Css3+js Implementing a responsive navigation bar method

This article introduces CSS3+JS implementation of the responsive navigation bar method

Today, a responsive navigation bar is created that automatically changes the style of the navigation bar with different screen resolutions or browser window sizes, and the main thing to use here is the CSS3 media Query. Specifically, you can see the response to the layout of this article, here does not spend a lot of space to introduce, mainly to see how this navigation bar to do.

It is also important to mention that IE6-IE8 is not supported for CSS3 media query, so for IE6-IE8 we need special handling, let them keep the default style, this is for the layout and style to take this into account.

First look at the layout of this piece, the HTML code is as follows:

Copy the Code code as follows:

<p class= "NavBar" > <p class= "nav" > <ul id= "menu" > <li class= "current" ><a H ref= "#" > Home </a></li> <li><a href= "#" > Movies </a></li> <li>&lt A href= "#" > Drama </a></li> <li><a href= "#" > Anime </a></li> &LT;LI&G T;<a href= "#" > Arts </a></li> <li><a href= "#" > Documentary </a></li> &lt ; Li><a href= "#" > public class </a></li> </ul> <p class= "Hot" > <a href= "# "> Iron Man 3</a> <a href=" # "> Chinese partner </a> <a href=" # "> Midsummer late Sunny </a> & Lt;a href= "#" > Lu Zhen Legends </a> </p> <!--determine if the browser is IE9,IE10 or non-IE browser-<!--[if (GT IE 8 ) | ! (IE)] ><!--> 

The HTML part also has a conditional comment, when the browser is ie6-8 to the HTML tag to mount a class "ie6-8", so that the processing of the style table:



Copy the Code code as follows:

<! DOCTYPE html><!--[if Lt IE 9]>
Here is the style control, the overall style and ie6-ie8 to deal with the first



Copy the Code code as follows:

* {margin:0; padding:0;} Body {font:14px/22px, arial, serif;}. NavBar {margin-top:80px; width:100%; height:38px; background: #333;}. Nav {margin:0 auto; border:0px solid #ccc;}. Nav ul {list-style:none; width:auto;}. Nav ul li {height:38px; text-align:center;}. Nav ul Li a {display:block; font-size:16px; color: #fff; text-decoration:none; line-height:39px;}. Ie6-8. Nav {width:1000px; height:38px;}. Ie6-8. Nav ul li {float:left;}. Ie6-8. Nav ul li a {padding:0 30px 0 30px;}. Ie6-8. Nav ul li.current {background: #f60;}. Ie6-8. Nav ul li:hover a {color: #f60;}. Ie6-8. Nav ul li a:hover {_color: #f60;} /*ie6 hack*/.ie6-8. Nav ul li.current:hover a {color: #fff;}. Ie6-8. Nav hot {float:left; margin-left:20px; padding-top:8px;}. Ie6-8 nav. Hot a {padding:0 5px 0 5px; font-size:12px; color: #fff; text-decoration:none;}. Ie6-8. Nav a:hover {color: #f60; text-decoration:underline;}. Ie6-8. Nav. title {display:none;} 
OK, media query is used below.

When the screen width is greater than 1000px:



Copy the Code code as follows:

@media screen and (min-width:1000px) {    . nav {width:1000px; height:38px;}    . Nav ul li {float:left; width:auto;}    . Nav ul Li a {padding:0 30px 0 30px;}    . Nav ul li.current {background: #f60;}    . Nav ul li:hover a {color: #f60;}    . Nav ul li.current:hover a {color: #fff;}    . Nav. Hot {margin-left:20px; padding-top:8px;}    . Nav. Hot a {padding:0 5px 0 5px; font-size:12px; color: #fff; text-decoration:none;}    . Nav. Hot a:hover {color: #f60; text-decoration:underline;}    . Nav. title {Display:none;}}
When the screen width is between 640px and 1000px:



Copy the Code code as follows:

@media screen and (min-width:640px) and (max-width:1000px) {    . nav {width:auto; height:38px;}    . Nav ul li {float:left; width:14%; min-width:50px;}    . Nav ul li.current {background: #f60;}    . Nav ul li:hover a {color: #f60;}    . Nav ul li.current:hover a {color: #fff;}    . Nav. Hot {display:none;}    . Nav. title {Display:none;}}
When the screen width is less than 640px:



Copy the Code code as follows:

@media screen and (max-width:640px) {    . navBar {margin-top:0; height:auto; background: #444;}    . Nav {width:auto; height:auto;}    . Nav ul li {margin-top:1px; width:100%; Min-width:100px;background: #333;}    . Nav ul Li a:active {background: #f60;}    . Nav. Hot {display:none;}    . Nav. title {position:relative; width:100%; height:38px; border-top:1px solid #444; background: #333; text-align:cente R Font:normal 20px/35px "Microsoft Yahei", Arial, serif; letter-spacing:2px;}    . Nav. Title A {color: #f60; text-decoration:none;}    . Nav. title BTN {position:absolute; right:10px; top:0; width:34px; height:34px; padding:2px; Background:url (btn.png ) Center Center No-repeat; Cursor:pointer;}}
OK, for the layout and style control is complete, the effect also has, 3 in different states of effect such as:




  


But for the third picture, we also want an effect, that is, click on the lower right corner of the icon when the menu can be closed, then how to do it? This can be implemented with JS, when the menu in the state, click on the Picture menu can be expanded, when the menu is expanded, click on the icon menu can be closed, and also have animation effect. OK, the following look at JS, but JS this piece will not elaborate, paste the core code it:

This part of the code is used to create animations:



Copy the Code code as follows:

var move = function (obj, target) {var timer;    Clearinterval (timer);        Timer = setinterval (function () {var speed = (target-obj.offsettop)/3; Speed = speed > 0?        Math.ceil (Speed): Math.floor (speed);            if (Math.Abs (Obj.offsettop-target) < 4) {clearinterval (timer);        Obj.style.marginTop = target + "px";        } else {Obj.style.marginTop = Obj.offsettop + speed + "px"; }}, ()}