可自由缩放的jQuery导航菜单_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这个插件的作用是创建一个自由缩放的导航菜单。这个效果使用html5、css3和一些jQuery就可以完成。

这种导航菜单的好处是可以让浏览者更关注网站的内容，它的另一个作用是可以创建一个很大的导航菜单来吸引首次访问的用户。这样你就可以以更大的篇幅来展示你的网站Logo和标题。

现在来看看HTML结构，我们使用一个标准的HTML5结构

<!DOCTYPE HTML><html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>How to create a dynamic top bar | Webdesigner Depot</title>
  </head><body>
</body></html>

在菜单中添加导航菜单的代码：

<!DOCTYPE HTML> <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <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>