标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>悬浮导航代码</title>
</head>
<style>
.nav{cursor:pointer;min-width:60px;max-width:148px;margin:0;padding:0;background:#0092bf;position:fixed;left:0;top:195px;text-align:center;overflow:hidden;color:#fff;z-index:1000;_width:60px;}
.nav #navmenu{display:none;}
.nav:hover #navmenu{display:block;}
.nav:hover #navhdr{display:none;}
.nav h2{display:block;width:35px;margin-left:auto;margin-right:auto;}
.nav ul,li{ margin:0; padding:0; list-style:none;}
.nav ul{text-align:left;width:148px;}
.nav a{color:#fff;display:block;padding:6px 0 4px 16px;font-style:normal; text-decoration:none;font-family:"Helvetica",Impact,Arial,Sans-serif}
.nav a:hover,nav a:focus{background:#f14a29;outline:0;}
</style>
<body>
<div class="nav">
<img width="12" height="25" src="images/star-top.png" alt="HTML5 Navbar">
<h2 id="navhdr">侧导航</h2>
<ul id="navmenu">
<li><a href="#the-logo" tabindex="1">An HTML5 Logo</a></li>
<li><a href="#the-movement" tabindex="3">The Movement</a></li>
<li><a href="#downloads" tabindex="4">Downloads</a></li>
<li><a href="#swag" tabindex="5">Stuff!</a></li>
<li><a href="#top" tabindex="7">Back Up Top</a></li>
</ul>
<img width="12" height="29" class="star" src="images/star-bottom.png" alt="HTML5 Navbar">
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/275147378abc/p/4870629.html
