How to use JS+CSS3 to create a responsive navigation bar instance code

Create a responsive navigation bar that automatically changes the style of the navigation bar with different screen resolutions or browser window sizes, mostly in CSS3 media Query.

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:

<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:

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

* {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:

@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:

@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:

@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 layout and style control is complete.

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:

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";    }}, 30); }