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. 基于 Java 的开源网络爬虫框架 WebCollector

    原文:https://www.oschina.net/p/webcollector

  2. Elasticsearch学习系列之介绍安装

    前言 关于ELK搭建的问题,或许你还有些模糊,其实你把我视频里讲的知识点串联起来就明白了.搭建ELK环境,看下面我说的: 首先,先把ES集群搭建起来,建议用CentOS6.5 64位的linux系统, ...

  3. KLT 光流

    一 光流 光流的概念是Gibson在1950年首先提出来的.它是空间运动物体在观察成像平面上的像素运动的瞬时速度,是利用图像序列中像素在时间域上的变化以及相邻帧之间的相关性来找到上一帧跟当前帧之间存在 ...

  4. Maven+Mybatis+Spring+SpringMVC实现分页查询（附源代码）

    以下小宝鸽将分享一篇Mybatis分页功能的博文,以下将给出具体的步骤.跟着博主的节奏肯定能实现.另外最后还会附上整个project的源代码.假设是没有使用过maven的猿友可自行下载相关的jar包就 ...

  5. 关于使用data()获取自定义属性出现undefined的说明

    这应该是这个函数的一个bug,没有考虑到驼峰式的写法,当我写成驼峰式,即是有大小写的变量时就会出现没有定义的情况. 今天写个交互,需要用到自定义属性,因为这个自定义属性是当作字段用的,就直接用了字段名 ...

  6. 反射实现Model修改前后的内容对比 【API调用】腾讯云短信 Windows操作系统下Redis服务安装图文详解 Redis入门学习

    反射实现Model修改前后的内容对比   在开发过程中,我们会遇到这样一个问题,编辑了一个对象之后,我们想要把这个对象修改了哪些内容保存下来,以便将来查看和追责. 首先我们要创建一个User类 1 p ...

  7. 各种comprehension

    1 什么是comprehension list.set.dict.generator等本质上是集合.所以,数学上的集合的表示引入到python中,{x| x属于某个集合}. 所以,comprehens ...

  8. SQL Server: Difference between PARTITION BY and GROUP BY

    https://stackoverflow.com/questions/2404565/sql-server-difference-between-partition-by-and-group-by ...

  9. 红米note怎么打开USB调试模式

    红米note到货后,打开USB调试模式是一些新手很棘手的问题,所以要手机助手成功识别红米note,你必须打开红米note的USB调试模式.在安卓4.2版本中,系统的USB调试模式不是非常简单地被打开的 ...

  10. BZOJ_2160_拉拉队排练_manacher

    BZOJ_2160_拉拉队排练_manacher Description 艾利斯顿商学院篮球队要参加一年一度的市篮球比赛了.拉拉队是篮球比赛的一个看点,好的拉拉队往往能帮助球队增加士气,赢得最终的比赛 ...