bootstrap库能够很方便的实现PC和移动上的响应式操作。

jQuery库大大的简化了脚本的开发；

html:

<html>

<body>

<div class='main_content'>

	<div class='nav_list'>

		{include file="admin@public/nav"}

		<a href="#" class="js-yw-nav-toggle yw-nav-toggle"><i></i></a>			<!-- fixed  left bottom -->

	</div>

	<div class='manager_content '>

		{block name="content"}{/block}

	</div>

</div>

</body>

</html>

css:

.yw-nav-toggle i::before, .yw-nav-toggle i::after {

	content: '';

	width: 30px;

	height: 2px;

	background: #000;

	position: absolute;

	left: 0;

	-webkit-transition: 0.2s;

	-o-transition: 0.2s;

	transition: 0.2s;

}

.yw-nav-toggle i::before {

	top: -7px;

}

.yw-nav-toggle i::after {

	bottom: -7px;

}

.yw-nav-toggle:hover i::before {

	top: -10px;

}

.yw-nav-toggle:hover i::after {

	bottom: -10px;

}

.yw-nav-toggle:active i::before {

	top: 0px;

	-webkit-transform: rotateZ(45deg);

	-moz-transform: rotateZ(45deg);

	-ms-transform: rotateZ(45deg);

	-o-transform: rotateZ(45deg);

	transform: rotateZ(45deg);

}

.yw-nav-toggle:active i::after {

	bottom: 0px;

	-webkit-transform: rotateZ(-45deg);

	-moz-transform: rotateZ(-45deg);

	-ms-transform: rotateZ(-45deg);

	-o-transform: rotateZ(-45deg);

	transform: rotateZ(-45deg);

}

.nav_list {

	position: fixed;

	width: 150px;

	border: 1px solid #0d5c57;

	margin-left: 2px;

	margin-top: 10px;

	-moz-transform: translateX(0px);

	-webkit-transform: translateX(0px);

	-ms-transform: translateX(0px);

	-o-transform: translateX(0px);

	transform: translateX(0px);

	-moz-transform: translateX(0px);

	-webkit-transition: 0.5s;

	-o-transition: 0.5s;

	transition: 0.5s;

}

@media screen and (max-width: 768px) {

	.yw-nav-toggle {

		opacity: 1;

		visibility: visible;

	}

	.nav_list {

		width: 150px;

		-moz-transform: translateX(-150px);

		-webkit-transform: translateX(-150px);

		-ms-transform: translateX(-150px);

		-o-transform: translateX(-150px);

		transform: translateX(-150px);

		-moz-transform: translateX(-150px);

	}

}

body.nav_offscreen .nav_list{

	width: 150px;

	-moz-transform: translateX(0px);

	-webkit-transform: translateX(0px);

	-ms-transform: translateX(0px);

	-o-transform: translateX(0px);

	transform: translateX(0px);

}

jQuery:

//click;

	var nav_off = function() {

		$('.js-yw-nav-toggle').on('click', function(event) {

			event.preventDefault();

			var $this = $(this);

			if ($("body").hasClass("nav_offscreen")) {

				$("body").removeClass("nav_offscreen");

				$this.removeClass("active");

			} else {

				$("body").addClass("nav_offscreen");

				$this.addClass("active");

			}

		});

		$(Window).scroll(function(){

			if ($("body").hasClass("nav_offscreen")) {

				$("body").removeClass("nav_offscreen");

				$(".js-yw-nav-toggle").removeClass("active");

			}

		});

	}

	var menuOutClick = function() {

		$(document).click(

				function(e) {

					var container = $(".nav_list, .js-yw-nav-toggle");

					if (!container.is(e.target)

							&& container.has(e.target).length === 0) {

						if ($("body").hasClass("nav_offscreen")) {

							$("body").removeClass("nav_offscreen");

							$(".js-yw-nav-toggle").removeClass("active");

						}

					}

				});

	}

　　

响应式菜单栏： bootstrap + jQuery的更多相关文章

  1. 15款帮助你实现响应式导航的 jQuery 插件

    对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

  2. jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  3. 响应式布局 Bootstrap

    github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...

  4. 响应式与bootstrap

    一.单双击问题 <body> <button>按钮</button> <script src="./jQuery.js"></ ...

  5. web响应式之bootstrap的基础用法。

    1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布 <!--meta:vp 响应式布局--> <meta name="viewport" ...

  6. 【课程分享】ASP.NET MVC5&amp;微信公众平台整合开发实战(响应式布局、JQuery Mobile,Windows Azure、微信核心开发)

    对这个课程有兴趣的,能够联系我QQ2748165793 基础知识储备 ASP.NET MVC 5基础(6讲) 第一讲-初识ASP.NET MVC并搭建整合开发环境 第二讲-深入MVC开发模式 第三讲- ...

  7. 响应式框架Bootstrap

    概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...

  8. 响应式及Bootstrap

    一丶CSS3的@media 查询 使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@med ...

  9. fcc 响应式框架Bootstrap 练习2

    text-primary 属性值使标题直接变成了红色,text-center使标题直接居中 <h2 class="text-primary  text-center"> ...

随机推荐

  1. Windows下创建ArcGIS Server站点

    原创文章,转载须标明出处自: https://www.cnblogs.com/gisspace/p/8126261.html ------------------------------------- ...

  2. 生鲜配送管理系统_升鲜宝 V2.0 小程序辅助系统工具矩阵系列相关说明

    随着微信红利的进一步释放,使用人群的不断增加,小程序从2017年01月第一批开发者出现后,2018年小程序得到快速的提升,小程序开发的相关应用小工具得到了市场的青咪,社会化大分工.协同.共享.协作的思 ...

  3. PHPstorm快捷键Ctrl + Alt + Left 或Right不起作用

    最近遇到一个问题,就是安装的phpstorm的回撤快捷键不起作用了,死活用不了!折磨了好久,终于找到解决方法了,具体请看我的github文章: 快捷键Ctrl + Alt + Left 或Right不 ...

  4. 如何删除Windows10操作系统资源管理器中的下载、图片、音乐、文档、视频、桌面、3D对象这7个文件夹

    通过注册表删除,步骤如下: 1.按下win+R,输入regedit,打开注册表 2.找到位置:计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Cur ...

  5. 电脑开机后win系统运行异常慢，鼠标移动卡

    今天公司里面一个小伙伴的电脑开机后还没有打开应用程序系统就运行非常慢,打开文件夹反应慢,鼠标是一点一点的在移动.体验感极差.作为运维的我立即上去解决问题: 首先是查看一下电脑确实运行比较慢,然后就查看 ...

  6. “尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行，将出现此问题。”

    远程连接服务器的数据库调试WCF程序时,可以正常访问数据库,但将程序发布成站点部署在数据库所在的服务器之后,一直报错,通过try/catch捕获得到以下报错信息: System.Exception: ...

  7. Scrapy框架-Spider和CrawlSpider的区别

    目录 1.目标 2.方法1:通过Spider爬取 3. 通过CrawlSpider爬取 1.目标 http://wz.sun0769.com/index.php/question/questionTy ...

  8. CENTOS重新安装JDK

    centos 删除默认安装的JDK 重新安装JDK 1.删除JDK 通过xshell工具成功连接安装好的虚拟机之后可通过    rpm -qa | grep java  或 rpm -qa | gre ...

  9. 如何将div高度填满剩余高度

    下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body">     <div id="navbar ...

  10. 随心测试_软测基础_006<测试人职业发展>

    接上篇:熟悉了_测试人员的工作职责范围与具体的工作内容 ,如何规划:测试人员的职业路线呢? 贴心小提示:以下内容,仅供参考,不挖坑 Q1:如何规划测试工程师的职业发展路线? A1:SX的观点:预定目标 ...