使用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 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 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
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python实现自动解数独小程序
2019/01/21 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
详解Python绘图Turtle库
2019/10/12 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
介绍一下游标
2012/01/10 面试题
优秀高中生事迹材料
2014/02/11 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
2022年四月新番
2022/03/15 日漫
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
PHP正则表达式之RCEService回溯
2022/04/11 PHP