响应式菜单栏： bootstrap + jQuery

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的更多相关文章

15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
响应式布局 Bootstrap
github介绍 (1)简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...
响应式与bootstrap
一.单双击问题 <body> <button>按钮</button> <script src="./jQuery.js"></ ...
web响应式之bootstrap的基础用法。
1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布  <meta name="viewport" ...
【课程分享】ASP.NET MVC5&微信公众平台整合开发实战(响应式布局、JQuery Mobile,Windows Azure、微信核心开发)
对这个课程有兴趣的,能够联系我QQ2748165793 基础知识储备 ASP.NET MVC 5基础(6讲) 第一讲-初识ASP.NET MVC并搭建整合开发环境第二讲-深入MVC开发模式第三讲- ...
响应式框架Bootstrap
概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...
响应式及Bootstrap
一丶CSS3的@media 查询使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@med ...
fcc 响应式框架Bootstrap 练习2
text-primary 属性值使标题直接变成了红色,text-center使标题直接居中 <h2 class="text-primary text-center"> ...

随机推荐

学习axios
axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }) . ...
[目录]C#学习笔记
C#是微软.NET平台下最重要的编程语言,它与C.C++不同,C#编写的源程序是托管在.NET平台下的.C#源程序经C#编译器编译成中间语言(IL,Intermediate Language),再经C ...
SuperMap iServer 在Linux 部署中问题总结
SuperMap iServer 作为超图公司的云GIS服务器产品,一般是部署在Linux服务器上.下面把日常部署和使用过程中遇到的相关问题做以汇总. 1.部署iServer的第一步是要检查Linux ...
用Python将绝对URL替换成相对URL的代码
下面的内容内容是关于用Python将绝对URL替换成相对URL的内容,应该是对码农有些用途. #!/usr/bin/env python### author : cold night# email : ...
git在本地向远程仓库创建分支
在本地的仓库种,如果想给upstream创建新分支并关联,需要执行 git push -u/--set-upstream 远程仓库名远程分支名
Gitlab管理网页老是500错误？增加物理内存,增加cpu吧
上一篇 CentOS 7 系统下 GitLab 搭建搭建时,是用的是1G内存, 访问gitlab管理网页非常慢,常常出现 500错误查询后发现: Gitlab的运行对CPU是有要求的:2核心支持 ...
Problem of Creating Topics in Kafka with Kerberos
Hi, After enabled Kerberos using Ambari, I got problem creating topics in Kafka using the kafka-topi ...
Python--day11（函数的参数）
今日主要内容 1. 函数的参数 2. 函数的嵌套调用 1. 形参与实参 1. 参数介绍: 函数为什么要有参数:因为内部的函数体需要外部的数据怎样定义函数的参数:在定义函数阶段,函数名在后面( ...
day11（函数参数，函数对象，打散机制，函数嵌套调用）
一,复习 # 什么是函数:具体特定功能的代码块 - 特定功能代码块作为一个整体,并给该整体命名,就是函数 # 函数的优点: # 1.减少代码的冗余 # 2.结构清晰,可读性强 # 3.具有复用性,开发 ...
[题解]N 皇后问题总结
N 皇后问题(queen.cpp) [题目描述] 在 N*N 的棋盘上放置 N 个皇后(n<=10)而彼此不受攻击(即在棋盘的任一行,任一列和任一对角线上不能放置 2 个皇后) ,编程求解所有的 ...

响应式菜单栏： bootstrap + jQuery

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

随机推荐

热门专题