巧用CSS怎样实现侧滑菜单的效果？

发布时间：2023-07-24 13:57:00 所属栏目：语言来源：

导读：今天给大家分享的是用CSS怎样实现侧滑菜单的效果，侧滑菜单也就是侧边划出和收进的效果，小编觉得还是比较实用的，因此分享给大家做个参考，感兴趣的朋友接下来跟随小编一起看看吧。

实现代码：

<!DOCTY

今天给大家分享的是用CSS怎样实现侧滑菜单的效果，侧滑菜单也就是侧边划出和收进的效果，小编觉得还是比较实用的，因此分享给大家做个参考，感兴趣的朋友接下来跟随小编一起看看吧。

    实现代码：

<!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&width&

layout=button&action=like&show_faces=false&share=false&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');

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!