• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    CSS3实现的侧滑菜单

    实现效果:

    实现代码:

    <!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 侧滑菜单的资料请关注脚本之家其它相关文章!

    上一篇:HTML5 Canvas绘制文本及图片的基础教程
    下一篇:css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    CSS3实现的侧滑菜单 CSS3,实现,的,侧滑,菜单,