html 代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.    <meta charset="utf-8">
  5.    <meta name="viewport" content="width=device-width">
  6.    <title>JS Bin</title>
  7.    <link rel="stylesheet" type="text/css" href="test.css">
  8.    <script type="text/javascript" src="test.js"></script>
  9.  </head>
  10.  <body>
  11.  <ul class="nav">
  12.    <li><a href="#" class="normal">Home</a></li>
  13.    <li><a href="#" class="normal">Order</a></li>
  14.    <li><a href="#" class="normal">Contact</a></li>
  15.    <li><a href="#" class="normal">About</a></li>
  16.    <a href="#" class="responsive-btn">☰</li>
  17.  </ul>
  18.  </body>
  19.  </html>

css 代码：

Desktop端：

  1.  ul{
  2.    list-style:none;
  3.    padding:;
  4.  }
  5.  ul.nav{
  6.    width:100%;
  7.    background:#000;
  8.    height: 40px;
  9.  }
  10.  li{
  11.    display:inline-block;
  12.    float:left;
  13.    text-align:center;
  14.    width:60px;
  15.    height:40px;
  16.    line-height:40px;
  17.    font-size: 18px;
  18.    padding: 0 40px;
  19.  }
  20.  a{
  21.    display:inline-block;
  22.    text-decoration:none;
  23.    color:#fff;
  24.    height:40px;
  25.    line-height:40px;
  26.  }
  27.  a.responsive-btn{
  28.    float:right;
  29.    display: none;
  30.    margin-right:10px;
  31.  }

CSS

Mobile端：

  1.  @media screen and (max-width: 600px){
  2.    ul.nav{
  3.      position: relative;
  4.    }
  5.    li{
  6.      display: block;
  7.      float: none;
  8.      text-align: left;
  9.      padding:;
  10.    }
  11.    ul.nav li:not(:first-child){
  12.      display: none;
  13.    }
  14.    ul.nav li:not(:first-child).responsive{
  15.      display: block;
  16.      background: orange;
  17.      width: 100%;
  18.    }
  19.    ul.nav li:not(:first-child).responsive:hover{
  20.      background: #999;
  21.    }
  22.    a.normal{
  23.      margin-left:10px;
  24.    }
  25.    a.responsive-btn{
  26.      position: absolute;
  27.      top:;
  28.      right:;
  29.      display: block;
  30.    }
  31.  }

CSS

JS 代码：

  1.  var btn=document.getElementsByClassName('responsive-btn')[0];
  2.  btn.onclick=function(){
  3.    var lis=document.getElementsByTagName('li');
  4.    for (var i = lis.length - 1; i >= 1; i--) {
  5.      if (!lis[i].classList.contains('responsive')) {
  6.        lis[i].classList.add('responsive');
  7.        btn.innerHTML="☓"
  8.      }
  9.      else{
  10.        lis[i].classList.remove('responsive');
  11.        btn.innerHTML="☰"
  12.      }
  13.    }
  14.  }

OR Jquery代码：

  1.  $(function(){
  2.    $('.responsive-btn').click(function(){
  3.       if($('li').hasClass('responsive')){
  4.         $('li').removeClass('responsive');
  5.         $('ul').find('.responsive-btn').html("☰");
  6.       }
  7.       else{
  8.         $('li').addClass('responsive');
  9.         $('ul').find('.responsive-btn').html("☓");
  10.       }
  11.    });
  12.  });

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. 【SQL Server 学习系列】-- 收缩数据库文件大小

    USE WebExam; GO ALTER DATABASE WebExam SET RECOVERY SIMPLE; GO -- 收缩文件到 1 MB. ); GO ALTER DATABASE W ...

  2. java List.add操作可以指定位置

    java List.add操作可以指定位置,addAll也可以指定: 使用: public class Test02 { public static void main(String[] args) ...

  3. 009 NAT

    static nat r1(config)#ip nat inside source static 192.168.1.2 10.0.0.2 r1(config)#int f0/0 r1(config ...

  4. 1072. Gas Station (30)【最短路dijkstra】——PAT (Advanced Level) Practise

    题目信息 1072. Gas Station (30) 时间限制200 ms 内存限制65536 kB 代码长度限制16000 B A gas station has to be built at s ...

  5. 编程算法 - 最小的k个数 代码(C)

    最小的k个数 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入n个整数, 找出当中的最小k个数. 使用高速排序(Quick Sort)的方法 ...

  6. the largest value you actually can transmit between the client and server is determined by the amount of available memory and the size of the communications buffers.

    the largest value you actually can transmit between the client and server is determined by the amoun ...

  7. Ubuntu利用TCP协议来获取server时间

    Linux利用TCP协议来获取server时间 这里使用Unix网络编程里面的一个小程序,该client建立一个到server的TCP连接,然后读取由server以直观可读格式简单地送回的当前时间和日 ...

  8. Hibernate连接数据库

    包结构如下图所示(按图标进行对齐): 环境搭好后代码分为以下几步: /** * private static final Configuration CONFIGURATION; * private ...

  9. C# 函数的传值与传址(转)

    http://www.cnblogs.com/mdnx/archive/2012/09/04/2671060.html using System; using System.Collections.G ...

  10. js验证手机号，身份证，车牌号验证

    js验证手机号  <input type="text" class="identificationno"> // 身份证号码为15位或者18位,15 ...