CSS 3 + Js implement responsive navigation bar _ CSS/HTML

Today, we created a responsive navigation bar that can automatically change the style of the navigation bar with different screen resolutions or browser window sizes. Here we mainly use the MediaQuery of CSS3. Today, we created a responsive navigation bar that can automatically change the style of the navigation bar with different screen resolutions or browser window sizes. Here we mainly use the Media Query of CSS3.

Today, we created a responsive navigation bar that can automatically change the style of the navigation bar with different screen resolutions or browser window sizes. Here we mainly use the Media Query of CSS3. For details, refer to the article about responsive layout. I will not spend a lot of time here. I will mainly look at how to do this navigation bar.

In addition, it should be noted that the ie6-ie8 does not support the Media Query of CSS3, so we need special processing for the ie6-ie8, let them keep the default style, this must be taken into account for layout and style.

First, let's take a look at the layout. the html code is as follows:

• Homepage


• Movie


• TV series


• Animation


• Variety shows


• Documentary


• Open Course

Iron 3
China Partners
Summer and Sunday
Legend of Lu Zhen

Fengchi Network

The html section also has a condition annotation, when the browser is a ie6-8 to the html tag to mount a class "ie6-8", so as to facilitate the style table processing:

...

Below is the style control, first on the overall style and ie6-ie8 Processing

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

@ 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 smaller 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: center; 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 no-repeat; cursor: pointer ;}
}

OK, the layout and style control are completed, and the effect is also achieved. The effects in different States in 3 are as follows:

OK, this is basically the response navigation bar, and the source code is attached.