响应式菜单栏: bootstrap + jQuery

时间:2023-02-28 07:37:23

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&period;glide&period;js(支持触摸&amp&semi;轻量级)

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件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&period;NET MVC5&amp&semi;amp&semi;微信公众平台整合开发实战&lpar;响应式布局、JQuery Mobile&comma;Windows Azure、微信核心开发&rpar;

    对这个课程有兴趣的,能够联系我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. 使用FFmpeg解码H264-2016&period;01&period;14

    使用jni方式调用FFmepg项目中接口,对H264裸码进行解码. 该Demo主要实现从文件中读取H264编码的视频流,然后使用FFmpeg解码,将解码后的码流保存到文件. 工程目录结构如图所示: A ...

  2. ASP&period;NET的一套笔试题

    1.    自定义控件如何做?答:自定义控件,跟HtmlControl或WebControl相似,编译后可以添加引用到工具栏里面,直接用鼠标拖动使用.2.界面的布局?答:表格,div3.程序的执行过程 ...

  3. PHP的哲学:Simple Is Hard

    原帖地址 PHP框架的繁荣是正确的发展方向吗?   作者 正文 poshboytl    发表时间:2009-01-19   最后修改:2009-04-06   做ROR有一年了, 感觉非常好.配合敏 ...

  4. Linq101-Set

    using System; using System.Collections.Generic; using System.Linq; namespace Linq101 { class Set { / ...

  5. lnmp 60秒的服务器缓存时间

    1.问题 php代码写好之后执行发现居然没有生效,打断点,改代码.刷新都没有达到预期的效果.但是间隔60秒之后刷新就看到效果了,或者删除文件就里面见效. 2.原因 从phpinfo()页面输出搜索&q ...

  6. 利用sass构建组件化的ui库

    创建公用的Sass项目模板 在做项目时,不管什么项目,他们之间总是有一些可以共用的部分.比如说重置样式.公用样式.模块组件.UI库等.那么在Sass项目中也是如此.为了避免在每个项目中做一些相同的事情 ...

  7. 定位(position)

    position :属性规定元素的定位类型 语法: position : static | absolute | fixed | relative JavaScript语法:object.style. ...

  8. BZOJ 2707&colon; &lbrack;SDOI2012&rsqb;走迷宫 &lbrack;高斯消元 scc缩点&rsqb;

    2707: [SDOI2012]走迷宫 题意:求s走到t期望步数,\(n \le 10^4\),保证\(|SCC| \le 100\) 求scc缩点,每个scc高斯消元,scc之间直接DP 注意每次清 ...

  9. CSS中可以继承和不可继承的常见属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  10. SpringBoot的Web开发

    一.创建Web项目 创建的时候勾选对应web选项即可,会自动引入相应的starter,pom如下: <dependency> <groupId>org.springframew ...