这个插件的作用是创建一个自由缩放的导航菜单。这个效果使用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>
更多详细内容请访问:http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!