CSS3 media queries combined with jquery to implement responsive navigation _jquery

Objective:

Implement a response 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, and a menu is pulled down slowly after clicking:

Ideas:

1. In order to later bind the event on the menu and not add extra 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 appears, and when the screen width is less than 700px, it hides and sets the position, which appears when the screen width is greater than 700px. Alternatively, the default navigation list is hidden and appears on the right side when the screen is wider than 700px, hidden when it is less than.

Problem:

In the beginning, I chose to default he appeared, and then there was a problem-as long as the button was pressed, the screen will not appear after the magnification of the navigation list.

The code is as follows:

<div 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>
</ Div>

. 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 there was a problem with my thinking, and I changed the way he hid it by default. The result is the same, as long as the button is pressed, he will never appear again. So I started to doubt jquery.

Solve:

Then I found in the F12 that when I pressed the button, he would appear in a style like this:

So it was all slidetoggle, he was. By setting the inline style of the element to hide the element, the style set by this method is the highest in three ways, so the block set in the CSS is useless.

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

If you choose to use!important, you need to set the navigation list is hidden by default, otherwise he will never be able to 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 frame to use it.

After I tried a jquery. css () method, he is also the style of the elements that are changed inline.

It seems to be necessary to study how a jquery works so that it can understand his behavior when applied.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.