jQuery之家-htmleaf.com免费提供各种jquery、html5、css3前端开发插件素材。
<!DOCTYPE HTML> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="author" content="Antonio Pratas">
<title>How to create a resizing menu bar | Webdesigner Depot</title>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head><body>
<header class=“large”>
<nav><img class=“logo” src="wdd.png"/>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Posts</a></li>
<li><a href="#">Awesome Freebies</a></li>
</ul> </nav>
</header>
<section>
<p>Let's get that menu small!</p>
<p>End of the line.</p>
</section>
</body>
</html>
/* Importing Amaranth Font for menu text */
@import url(http://fonts.useso.com/css?family=Amaranth);
header, a, img, li{
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari and Chrome */
-o-transition: all 1s; /* Opera */}
/* Basic layout */
body{background-color: #ebebeb;}
ul{list-style-type: none;float: right;}
li{display: inline;float: left;}
img.logo{float: left;}
nav{width: 960px;margin: 0 auto;}
section.stretch{float: left;height: 1500px;width: 100%;}
section.stretch p{font-family: 'Amaranth', sans-serif;font-size: 30px;color: #969696;text-align: center;position: relative;margin-top: 250px;}
section.stretch p.bottom{top: 100%;}
header{background: #C7C7C7;border-bottom: 1px solid #aaaaaa;float: left;width: 100%;position: fixed;z-index: 10;}
header a{color: #969696;text-decoration: none;font-family: 'Amaranth', sans-serif;text-transform: uppercase;}
header a.active, header a:hover{color: #3d3d3d;}
header li{margin-right: 30px;}
/* Sizes for the bigger menu */
header.large{height: 120px;}
header.large img{width: 489px;height: 113px;}
header.large li{margin-top: 45px;}
/* Sizes for the smaller menu */
header.small{ height: 50px; }
header.small img{ width: 287px; height: 69px; margin-top: -10px; }
header.small li{ margin-top: 17px; }