使用jquery实现HTML5响应式导航菜单教程


Posted in HTML / CSS onApril 02, 2014

通过jquery+html5实现,当浏览器窗口缩小或者手机访问的时候,导航菜单变成按钮下拉式菜单。效果图:

使用jquery实现HTML5响应式导航菜单教程

HTML代码:

复制代码代码如下:
<nav id="nav-wrap">
 <ul id="nav">
  <li><a href="#">Button</a></li>
  <li><a href="#">Button</a></li>
 </ul>
</nav>

jQuery代码:

通过以下jquery代码,会把<div id="menu-icon">添加到<nav id="nav_wrap">中,当点击 #menu-icon 时,菜单就会显示出来:

复制代码代码如下:


<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script</a>>
<script type="text/javascript">
$(document).ready(function($){
 /* prepend menu icon */
 $('#nav-wrap').prepend('<div id="menu-icon">Menu</div>'); 
 /* toggle nav */
 $("#menu-icon").on("click", function(){
  $("#nav").slideToggle();
  $(this).toggleClass("active");
 });
});
</script>

通过浏览器查看元素可以看到html显示的代码如下:

复制代码代码如下:


<nav id="nav-wrap">
 <div id="menu-icon">Menu</div>
 <ul id="nav">
  <li><a href="#">Button</a></li>
  <li><a href="#">Button</a></li>
 </ul>
</nav>

CSS代码:

在css代码中要先把#menu-icon的属性设置为display:none;,然后通过媒体查询media query判断再把#menu-icon改为display:block;,下面是关键的CSS样式代码,判断浏览器宽度小于600px时的样式:

使用jquery实现HTML5响应式导航菜单教程

最终效果看文章第一张效果图。

HTML / CSS 相关文章推荐
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
简单html5代码获取地理位置
Mar 31 #HTML / CSS
HTML5注册页面示例代码
Mar 27 #HTML / CSS
html5实现微信打飞机游戏
Mar 27 #HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 #HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 #HTML / CSS
用html5实现语音搜索框的方法
Mar 18 #HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 #HTML / CSS
You might like
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
详解YII关联查询
2016/01/10 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python实现简单查找最长子串功能示例
2019/02/26 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
ipython和python区别详解
2019/06/26 Python
python实现学生通讯录管理系统
2021/02/25 Python
帕克纽约:PARKER NY
2018/12/09 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
档案管理员岗位职责
2013/12/01 职场文书
感恩的演讲稿
2014/05/06 职场文书
学校清明节活动总结
2014/07/04 职场文书
2014年话务员工作总结
2014/11/19 职场文书
数学备课组工作总结
2015/08/12 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js