CSS3 media queries with jquery for responsive navigation

This article mainly for you in detail the CSS3 media queries with jquery to achieve responsive navigation, with a certain reference value, interested in small partners can refer to

Objective:

Implement a responsive navigation, when the screen width is greater than 700px, the effect is as follows:

When the screen width is less than 700px, the navigation becomes a small button, after the click has a menu slowly pull down:

Ideas:

1. In order to later bind events on the menu, and do not add redundant nodes to the DOM, the navigation in the large screen and the drop-down navigation in the small screen must be one.

So I chose to position the navigation absolutely.

2. The default navigation list is present, it is hidden when the screen width is less than 700px, and it is set to position, which appears when the screen width is greater than 700px. Or, the default navigation list is hidden, and it appears on the right when the screen width is greater than 700px, hidden when it is less than.

Problem:

At the beginning, I chose the default he appeared, and then there was a problem--as long as the button was pressed and the screen zoomed in, the navigation list would never appear again.

The code is as follows:

<p class= "Nav-box" >    <ul class= "nav" >     <li><a href= "javascript:void (0);" class= "Tohome Active ">Home</a></li>     <li><a href=" javascript:void (0); "class=" ToPort ">portfolio </a></li>     <li><a href= "javascript:void (0);" class= "Tocont" >contact</a></li >    </ul>    <a href= "javascript:void (0);" class= "Nav-btn" >...</a></p>

. nav-box {  position:relative;}. nav-btn {  display:none;  Color: #DE6B73;  Float:right;  line-height:20px;  margin:35px 0;}. Nav {  display:block;  Border-top:none;  Position:absolute;  right:0;} @media (max-width:700px) {  . nav-btn{    display:inline-block;  }} @media (max-width:700px) {. nav {  display:none;  top:80px;  Background-color: #F79C9C;  border-top:1px solid #FFF;  line-height:60px; }  }

Window.onload=function () {  $ (". Nav-btn"). Click (function () {    $ (". Nav"). Slidetoggle ();}  

So I thought it was my idea that there was a problem, and I replaced it with the default of his hidden way. The result is still the same, as long as the button has been pressed, he will never appear. So I started to question jquery.

Solve:

And then I found out in F12 that after I pressed the button, he would have a pattern like this:

So it's all slidetoggle, he is. By setting the element's inline style to hide the element, this method sets the priority of the style to be the highest in three ways, so the block set in the CSS is no use at all.

To solve this problem, you can use JS, or you can use a higher priority way:!important.

If you choose to use!important, you need to set the navigation list is hidden by default, or he will never hide.

The final CSS code is as follows:

. nav {  display:none;  Position:absolute;  right:10%;  top:80px;  Background-color: #F79C9C;  border-top:1px solid #FFF;  line-height:60px;}. nav-btn {  display:none;  Color: #DE6B73;  Float:right;  line-height:20px;  margin:35px 0;} @media (max-width:700px) {  . nav-btn{    display:inline-block;  }} @media (min-width:700px) {  . nav {    Display:block!important;    Border-top:none;    top:15px;    right:0;}  }

Summarize:

It is dangerous not to really understand the principle of a framework.

After I tried a jquery. css () method, he was similarly changing the style of the elements in an inline way.

It seems like you need to look at how a jquery works, so that you can understand his behavior when applied.

