html 代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="test.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<ul class="nav">
<li><a href="#" class="normal">Home</a></li>
<li><a href="#" class="normal">Order</a></li>
<li><a href="#" class="normal">Contact</a></li>
<li><a href="#" class="normal">About</a></li>
<a href="#" class="responsive-btn">☰</li>
</ul>
</body>
</html>

css 代码:

Desktop端:

 ul{
list-style:none;
padding:;
}
ul.nav{
width:100%;
background:#000;
height: 40px;
}
li{
display:inline-block;
float:left;
text-align:center;
width:60px;
height:40px;
line-height:40px;
font-size: 18px;
padding: 0 40px;
}
a{
display:inline-block;
text-decoration:none;
color:#fff;
height:40px;
line-height:40px;
}
a.responsive-btn{
float:right;
display: none;
margin-right:10px;
}

CSS

Mobile端:

 @media screen and (max-width: 600px){
ul.nav{
position: relative;
}
li{
display: block;
float: none;
text-align: left;
padding:;
}
ul.nav li:not(:first-child){
display: none;
}
ul.nav li:not(:first-child).responsive{
display: block;
background: orange;
width: 100%;
}
ul.nav li:not(:first-child).responsive:hover{
background: #999;
}
a.normal{
margin-left:10px;
}
a.responsive-btn{
position: absolute;
top:;
right:;
display: block;
}
}

CSS

JS 代码:

 var btn=document.getElementsByClassName('responsive-btn')[0];
btn.onclick=function(){
var lis=document.getElementsByTagName('li');
for (var i = lis.length - 1; i >= 1; i--) {
if (!lis[i].classList.contains('responsive')) {
lis[i].classList.add('responsive');
btn.innerHTML="☓"
}
else{
lis[i].classList.remove('responsive');
btn.innerHTML="☰"
}
}
}

OR Jquery代码:

 $(function(){
$('.responsive-btn').click(function(){
if($('li').hasClass('responsive')){
$('li').removeClass('responsive');
$('ul').find('.responsive-btn').html("☰");
}
else{
$('li').addClass('responsive');
$('ul').find('.responsive-btn').html("☓");
}
});
});

responsive-navigator的更多相关文章

  1. 项目新的需求,网页的自适应交付/响应式交付 Responsive/Adaptive Delivery

    网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...

  2. The Responsive jQuery Content Slider

    jquery slider 效果 http://bxslider.com/ http://www.cnblogs.com/lhb25/archive/2012/08/13/jquery-image-e ...

  3. auto responsive rem

    auto responsive rem 移动端适配 ;(function(win, lib) { var doc = win.document; var docEl = doc.documentEle ...

  4. H5 Notes:Navigator Geolocation

    H5的地理位置API可以帮助我们来获取用户的地理位置,经纬度.海拔等,因此我们可以利用该API做天气应用.地图服务等. Geolocation对象是我们获取地理位置用到的对象. 首先判断浏览器是否支持 ...

  5. react-native的tabbar和navigator混合使用

    前段时间搭建项目使用了navigator和react-native-tab-navigator,现在我教大家搭建一个通用的简单框架. 先把几张图贴在这里,这就是我们今天要搭建的东西,别看页面简单,但是 ...

  6. React Native之 Navigator与NavigatorIOS使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  7. 完美解决window.navigator.geolocation.getCurrentPosition,在IOS10系统中无法定位问题

    目前由于许多用户都将电话升级到了iOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统.然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多 ...

  8. js中的navigator对象

    Navigator 对象包含有关浏览器的信息.所有浏览器都支持该对象 在控制台中输出相关信息的代码 <script> console.log(navigator); </script ...

  9. responsive tables

    以上内容原本是整理为ppt格式的,贴过来格式有点乱,请见谅. 其他responsive tables参考: http://gergeo.se/RWD-Table-Patterns/ 3种类型的代码参考 ...

  10. JS新API标准 地理定位(navigator.geolocation)/////////zzzzzzzzzzz

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

随机推荐

  1. Spring MVC中的拦截器/过滤器HandlerInterceptorAdapter的使用

    一般情况下,对来自浏览器的请求的拦截,是利用Filter实现的 而在Spring中,基于Filter这种方式可以实现Bean预处理.后处理. 比如注入FilterRegistrationBean,然后 ...

  2. yarn使用

    参数中有中括号和尖括号,我们要识别以下区别: [] :可选项 <>:必选项 初始化一个新的项目 yarn init 添加一个依赖包 yarn add [package] yarn add ...

  3. Netty In Action中文版 - 第四章:Transports(传输)

    本章内容 Transports(传输) NIO(non-blocking IO,New IO), OIO(Old IO,blocking IO), Local(本地), Embedded(嵌入式) U ...

  4. web 开发之js---js 实现网页中播放wav的一种方法(flash播放器)

    http://blog.csdn.net/whumr1/article/details/6948160

  5. Html.RenderPartial使用三个参数

    Html.RenderPartial("usercontrolurl", model, ViewDataDictionary) 当使用三个参数时可以这样使用: var data = ...

  6. 【Android】使用 SwipeRefreshLayout 实现下拉刷新

    今天在codepath 上看到一个开源项目 [点击查看]使用到了 SwipeRefreshLayout 实现了下拉刷新,但演示样例并不完整,于是自己就动手写了下.之前看到郭霖的博客上也有介绍下拉刷新, ...

  7. Codevs 1744 格子染色==BZOJ 1296 粉刷匠

    1744 格子染色  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 有 n 条木板需要被粉 ...

  8. mssql 中的二进制返回数据

  9. ios25---图片拉伸

    控制器: // // ViewController.m // 12-图片的拉伸问题 // // Created by xiaomage on 15/12/30. // Copyright © 2015 ...

  10. sql server 生成随机数 rand函数

    https://docs.microsoft.com/en-us/sql/t-sql/functions/rand-transact-sql?view=sql-server-2017 在某一个区间内生 ...