css簡單實現響應式菜單例子

最終效果如上，手機端（左）、電腦端（右）

ps://www.idevs.cn/wp-content/uploads/%E6%9C%AA%E6%A0%87%E9%A2%98-5.png" />

我有一個十分奇葩的毛病，那就是莫名其妙的對前端架構十分抵觸，總覺得它很臃腫，所以日常一些小項目我都是手寫代碼，盡量唯寫用到的代碼，強迫症患者，好像這樣效率低一些，不過可以鍛煉一下嘛（尼瑪CSS和HTML有什麼好鍛煉的，借口！）

正好最近在做一個網站的時候，要用到響應式，頁面內容很容易，只是nav需要js配合才能做到比較完美的響應式，於是，像上面那樣的導覽功能表就寫出來了。

使用的jQuery，所以只要你的頁面引用了一次jQuery，那麼代碼量真的是相當少，兩三段就實現了js控制，那麼，粗暴一點，直接貼代碼吧。

HTML架構：

<header id="header">
    <nav class="navs">
        <a href="#" class="logo">iDevs</a>
        <div id="switch">Menu</div>
        <ul class="menu case_menu">
            <li class="current"><a href="#header">Home</a></li>
            <li><a href="#title">Service</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#maps">Contact</a></li>
        </ul>
    </nav>
</header>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#switch").click(function(){
  $(".case_menu").toggle(300);
  });
});
</script>
CSS：

#header{width:100%;height:2000px;}
#header .navs{background:#5c7;height: 80px;width: 100%;line-height:80px;}
#header .navs .logo{float:left;display: block;margin: 0 10px;color: #fff;font-size: 30px;}
#header #switch{display:none;}
#header .navs .menu{float: right;}
#header .navs .menu li{display: inline;}
#header .navs .menu li a{color: #fff;padding: 0 10px;font-size:20px;text-decoration:none;transition:.2s;}
#header .navs .menu li a:hover{text-shadow:1px 1px 1px #295}
#header .navs .menu li.current a{text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff}
@media(max-width:700px){
#header #switch{display:block;float:right;color:#fff;padding:0 10px;margin: 0 10px 0 0; font-size:20px;background:#3a5;cursor: pointer;}
#header .navs .menu{position:absolute;right:10px;top:80px;display:none;background:#3a5;height:200px;width:180px;text-align:center;}
#header .navs .menu li{line-height:50px;}
#header .navs .menu li a{display:block;font-size:16px;width:100%;padding:0}
#header .navs .menu li a:hover,#header .navs .menu li.current a{background: #295}
}

嗯，大概就是這樣，上面代碼的Demo效果如下：

自行修改代碼美化吧，就不繼續貼代碼了。