• <button id="eiyoe"><acronym id="eiyoe"></acronym></button>
    <em id="eiyoe"></em>

  • <rp id="eiyoe"><acronym id="eiyoe"><input id="eiyoe"></input></acronym></rp>
      查看: 425|回復: 0
      上一主題 下一主題

      CSS3實現的側滑菜單

      80343

      主題

      0

      好友

      積分

      離線 發信

      跳轉到指定樓層
      樓主
      發表于 2021-07-25 19:58 | 顯示全部樓層 | 倒序瀏覽

      實現效果:

      實現代碼:

      <!DOCTYPE html><html class="menu">
      <html>
      
      <head>
      
      <meta charset="utf-8"/>
      <meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
      <meta name="google" value="notranslate"/>
      <title>Side Menu</title>
      
      <link rel="stylesheet" type="text/css" href="css/menu.css">
      <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
      
      
        
       
      
      
      
      </head>
      <body>
      
      
      
      </div><nav class="main-menu">
      
      
        
       <div>
          <a class="logo" href="http://startific.com">
          </a> 
        </div> 
      <div class="settings"></div>
      <div class="scrollbar" id="style-1">
            
      <ul>
        
      <li>                                   
      <a href="http://startific.com">
      <i class="fa fa-home fa-lg"></i>
      <span class="nav-text">Home</span>
      </a>
      </li>   
         
      <li>                                 
      <a href="http://startific.com">
      <i class="fa fa-user fa-lg"></i>
      <span class="nav-text">Login</span>
      </a>
      </li>   
      
          
      <li>                                 
      <a href="http://startific.com">
      <i class="fa fa-envelope-o fa-lg"></i>
      <span class="nav-text">Contact</span>
      </a>
      </li>   
        
      
      
       
      <li>
      <a href="http://startific.com">
      <i class="fa fa-heart-o fa-lg"></i>
                              
      <span class="share"> 
      
      
      <div class="addthis_default_style addthis_32x32_style">
        
      <div style="position:absolute;
      margin-left: 56px;top:3px;"> 
         
        
      
        
       <a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" width="30px" height="30px"></a>
      
         <a href="https://twitter.com/share" target="_blank" class="share-popup"><img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png" width="30px" height="30px"></a>
      
         
      
      
      <a href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_&title=_TITLE_
      " target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png" width="30px" height="30px"></a>   
        
        
        
      </div>
      <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
      <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a"></script>
                             
                                  
                                    
                                  
                                
                              </span>
                              <span class="twitter"></span>
                              <span class="google"></span>
                              <span class="fb-like">  
      <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fstartific&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>
                             
                              </span>
                              <span class="nav-text">
                              </span>
                              
                          </a>
      
      </li>
                                  
      
        
        
      </li>
      <li class="darkerlishadow">
      <a href="http://startific.com">
      <i class="fa fa-clock-o fa-lg"></i>
      <span class="nav-text">News</span>
      </a>
      </li>
        
      <li class="darkerli">
      <a href="http://startific.com">
      <i class="fa fa-desktop fa-lg"></i>
      <span class="nav-text">Technology</span>
      </a>
      </li>
        
      <li class="darkerli">
      <a href="http://startific.com">
      <i class="fa fa-plane fa-lg"></i>
      <span class="nav-text">Travel</span>
      </a>
      </li>
        
      <li class="darkerli">
      <a href="http://startific.com">
      <i class="fa fa-shopping-cart"></i>
       <span class="nav-text">Shopping</span>
      </a>
      </li>
        
      <li class="darkerli">
      <a href="http://startific.com">
      <i class="fa fa-microphone fa-lg"></i>
      <span class="nav-text">Film & Music</span>
      </a>
      </li>
      
      <li class="darkerli">
      <a href="http://startific.com">
      <i class="fa fa-flask fa-lg"></i>
      <span class="nav-text">Web Tools</span>
      </a>
      </li>
        
      <li class="darkerli">
      <a href="http://startific.com">
      <i class="fa fa-picture-o fa-lg"></i>
      <span class="nav-text">Art & Design</span>
      </a>
      </li>
      
      <li class="darkerli">
      <a href="http://startific.com">
      <i class="fa fa-align-left fa-lg"></i>
      <span class="nav-text">Magazines
      </span>
      </a>
      </li>
        
      <li class="darkerli">
      <a href="http://startific.com">
      <i class="fa fa-gamepad fa-lg"></i>
      <span class="nav-text">Games</span>
      </a>
      </li>
        
      <li class="darkerli">
      <a href="http://startific.com">
      <i class="fa fa-glass fa-lg"></i>
      <span class="nav-text">Life & Style
      </span>
      </a>
      </li>
        
      <li class="darkerlishadowdown">
      <a href="http://startific.com">
      <i class="fa fa-rocket fa-lg"></i>
      <span class="nav-text">Fun</span>
      </a>
      </li>
       
        
      </ul>
      
        
      <li>
                                         
      <a href="http://startific.com">
      <i class="fa fa-question-circle fa-lg"></i>
      <span class="nav-text">Help</span>
      </a>
      </li>   
          
        
      <ul class="logout">
      <li>
                         <a href="http://startific.com">
                               <i class="fa fa-lightbulb-o fa-lg"></i>
                              <span class="nav-text">
                                  BLOG 
                              </span>
                              
                          </a>
      </li>  
      </ul>
              </nav>
              
        
      
      			
        
        
      </body>
      </html>

      CSS3

      body
      {
        margin:0px;
        padding:0px;
      	font-family: "Open Sans", arial;
      	background:url('https://static.tumblr.com/94eb957a00fd03c0c2f7d26decd71578/u1rhacw/osAmyyh1q/tumblr_static_tumblr_static_gaussian_blur_gradient_desktop_1680x943_wallpaper-393751.jpg');
      	color:#fff;
      	font-weight:300;
      
      }
      
      
      @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
      }
      @import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
      
      .logo{
        
      }
      
      .settings {
        
        height:73px; 
        float:left;
        background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
        background-repeat:no-repeat;
        width:250px;
        margin:0px;
       text-align: center;
      font-size:20px;
      font-family: 'Strait', sans-serif;
      
      }
      
      
      
      
      
      
      /* ScrolBar  */
      .scrollbar
      {
      
      height: 90%;
      width: 100%;
      overflow-y: hidden;
      overflow-x: hidden;
      }
      
      .scrollbar:hover
      {
      
      height: 90%;
      width: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      }
      
      /* Scrollbar Style */ 
      
      
      
      #style-1::-webkit-scrollbar-track
      {
      border-radius: 2px;
      }
      
      #style-1::-webkit-scrollbar
      {
      width: 5px;
      background-color: #F7F7F7;
      }
      
      #style-1::-webkit-scrollbar-thumb
      {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #BFBFBF;
      }
      /* Scrollbar End */ 
      
      
      
      
      .fa-lg {
      font-size: 1em;
        
      }
      .fa {
      position: relative;
      display: table-cell;
      width: 55px;
      height: 36px;
      text-align: center;
      top:12px; 
      font-size:20px;
      
      }
      
      
      
      .main-menu:hover, nav.main-menu.expanded {
      width:250px;
      overflow:hidden;
      opacity:1;
      
      }
      
      .main-menu {
      background:#F7F7F7;
      position:absolute;
      top:0;
      bottom:0;
      height:100%;
      left:0;
      width:55px;
      overflow:hidden;
      -webkit-transition:width .2s linear;
      transition:width .2s linear;
      -webkit-transform:translateZ(0) scale(1,1);
      box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
        opacity:1;
      }
      
      .main-menu>ul {
      margin:7px 0;
      
      }
      
      .main-menu li {
      position:relative;
      display:block;
      width:250px;
        
      
      
      }
      
      .main-menu li>a {
      position:relative;
      width:255px;
      display:table;
      border-collapse:collapse;
      border-spacing:0;
      color:#8a8a8a;
      font-size: 13px;
      text-decoration:none;
      -webkit-transform:translateZ(0) scale(1,1);
      -webkit-transition:all .14s linear;
      transition:all .14s linear;
      font-family: 'Strait', sans-serif;
      border-top:1px solid #f2f2f2;
      
      text-shadow: 1px 1px 1px  #fff;  
      }
      
      
      
      .main-menu .nav-icon {
        
      position:relative;
      display:table-cell;
      width:55px;
      height:36px;
      text-align:center;
      vertical-align:middle;
      font-size:18px;
      
      }
      
      .main-menu .nav-text  {
         
      position:relative;
      display:table-cell;
      vertical-align:middle;
      width:190px;
      font-family: 'Titillium Web', sans-serif;
      }
      
      .main-menu .share {
      }
      
      
      
      .main-menu .fb-like {
      
      left: 180px;
      position:absolute;
      top: 15px;
      }
      
      .main-menu>ul.logout {
      position:absolute;
      left:0;
      bottom:0;
        
      }
      
      .no-touch .scrollable.hover {
      overflow-y:hidden;
      
      }
      
      .no-touch .scrollable.hover:hover {
      overflow-y:auto;
      overflow:visible;
        
      }
      
      
      /* Logo Hover Property */
      
      
      .settings:hover, settings:focus {   
        background:url( https://s17.postimg.org/74cl7s05b/logo_hover.jpg);
        -webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
      -moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
      -o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
      transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
      }
      
      .settings:active, settings:focus {   
        background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
        -webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
      -moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
      -o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
      transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
      }
      
      
      a:hover,a:focus {
      text-decoration:none;
      border-left:0px solid #F7F7F7;
      
      
      
      }
      
      nav {
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      -o-user-select:none;
      user-select:none;
        
      }
      
      nav ul,nav li {
      outline:0;
      margin:0;
      padding:0;
      text-transform: uppercase;
      }
      
      
      
      
      /* Darker element side menu Start*/
      
      
      .darkerli
      {
      background-color:#ededed;
      text-transform:capitalize;  
      }
      
      .darkerlishadow
      {
      background-color:#ededed;
      text-transform:capitalize;  
      -webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
      -moz-box-shadow:    inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
      box-shadow:         inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
      }
      
      
      .darkerlishadowdown
      {
      background-color:#ededed;
      text-transform:capitalize;  
      -webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
      -moz-box-shadow:    inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
      box-shadow:         inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
      }
      
      /* Darker element side menu End*/
      
      
      
      
      .main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
      color:#fff;
      background-color:#00bbbb;
      text-shadow: 0px 0px 0px; 
      }
      .area {
      float: left;
      background: #e2e2e2;
      width: 100%;
      height: 100%;
      }
      @font-face {
        font-family: 'Titillium Web';
        font-style: normal;
        font-weight: 300;
        src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
      }

      以上就是CSS3實現的側滑菜單的詳細內容,更多關于CSS3 側滑菜單的資料請關注腳本之家其它相關文章!

      來源:http://www.jb51.net/css/773393.html