CSS3+JS implementation of response navigation bar _css/html

Today we made a response navigation bar that automatically changes the style of the navigation bar with different screen resolutions or the size of the browser window, and here is the CSS3 media Query. Concrete can view the response-style layout of this article, here will not spend a lot of space to introduce, the main look at this navigation bar how to do.

It's also important to mention that IE6-IE8 does not support CSS3 's media query, so for IE6-IE8 we need special handling to keep them in the default style, which is important for layout and styling.

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

Copy Code code as follows:

<div class= "NavBar" >
<div class= "NAV" >
<ul id= "Menu" >
<li class= "Current" ><a href= "#" > Home </a></li>
<li><a href= "#" > Movie </a></li>
<li><a href= "#" > TV series </a></li>
<li><a href= "#" > Anime </a></li>
<li><a href= "#" > Comprehensive Arts </a></li>
<li><a href= "#" > Documentary </a></li>
<li><a href= "#" > Open Class </a></li>
</ul>
<p class= "Hot" >
<a href= "#" > Iron Man 3</a>
<a href= "#" > Chinese partner </a>
<a href= "#" > Midsummer late sunny Day </a>
<a href= "#" > Lu Zhen Legends </a>
</p>
<!--to determine if the browser is IE9,IE10 or non IE browser-->
<!--[if (GT IE 8) |! ( IE)]><!-->

<a href= "#" > Wind net </a>
<span class= "btn" id= "BTN" ></span>
<!--<! [endif]-->
</div>
</div>

The HTML section also has a conditional comment that, when the browser is ie6-8, mounts a class "ie6-8" to the HTML tag, which facilitates the handling of the stylesheet:

Copy Code code as follows:

<! DOCTYPE html>
<!--[if LT IE 9]>...

The following is the style control, first the overall style and IE6-IE8 processing

Copy Code code as follows:

* {margin:0; padding:0;}
Body {font:14px/22px "song", 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 hot 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 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 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 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:cent Er 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.pn g) Center Center no-repeat; Cursor:pointer;}
}

OK, for layout and style control is completed, the effect is also, 3 in different states under the effect of the following figure:

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

This section of code is used to animate the effect:

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

}

OK, this response-style navigation bar is basically the case, attach the source code

Css3-js-response-nav (jb51.net). rar