当前位置:主页 > 网页特效 > 菜单导航 >

可自由缩放的jQuery导航菜单

发布时间:2018/07/02 来源:互联网 浏览: 关键词:jquery 菜单导航 
可自由缩放的jQuery导航菜单 可自由缩放的jQuery导航菜单
阿里云

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

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

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

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

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

<!DOCTYPE HTML> <html>
  <head>
    <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
    <title>How to create a resizing menu bar | Webdesigner Depot</title>
    <linkrel="stylesheet"type="text/css"href="http://meyerweb.com/eric/tools/css/reset/reset.css">
    <scriptsrc="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <headerclass=“large”>
    <nav><imgclass=“logo”src="wdd.png"/>
    <ul>
      <li><ahref="#">Home</a></li>
      <li><ahref="#">Posts</a></li>
      <li><ahref="#">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/

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top