css3导航菜单
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>
</li><nav class="main-menu">
<li>
<a class="logo" href="http://startific.com">
</a>
</li>
<li class="settings"></li>
<li 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">
<li class="addthis_default_style addthis_32x32_style">
<li 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.jpg" alt="css3导航菜单（CSS3实现的侧滑菜单）" border="0" />
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" alt="css3导航菜单（CSS3实现的侧滑菜单）" border="0" />
以上就是CSS3实现的侧滑菜单的详细内容，更多关于CSS3 侧滑菜单的资料请关注开心学习网其它相关文章！