CSS Simple implementation of response menu examples

The final effect is as above, the handset end (left), the computer end (right)

Ps://www.idevs.cn/wp-content/uploads/%e6%9c%aa%e6%a0%87%e9%a2%98-5.png "/>

I have a very wonderful problem, it is inexplicable to the front end of the framework is very inconsistent, always feel that it is very bloated, so some small projects I am writing code, as far as possible only to write the code used, obsessive-compulsive disorder patients, as if this is less efficient, but you can exercise a little bit of the CSS and HTML what good exercise, Excuse! ）

Just recently in doing a website, to use the response, the content of the page is very easy, just nav need JS to achieve a more perfect response, so, like the above navigation menu is written out.

Use jquery, so as long as your page refers to a jquery, then the code is really very small, two or three paragraph on the realization of JS control, then, rough point, directly paste code.

HTML frame:

<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>
<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;p adding: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;p adding: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%;p adding:0}
#header. navs. Menu Li A:hover, #header. Navs. Menu li.current a{background: #295}
}

Well, this is probably the case, the above code demo effect is as follows:

Modify the code to beautify yourself, do not continue to paste the code.