CSS3 media queries + jQuery enables responsive navigation. css3jquery

CSS3 media queries + jQuery enables responsive navigation. css3jquery

Purpose:

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, and a menu is clicked to pull down slowly:

 

Ideas:

1. To bind events to the menu later without adding unnecessary nodes to the DOM, the navigation displayed on the screen and the drop-down navigation in the small screen must be one.

So I chose to absolutely position the navigation.

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

Problem:

At the beginning, I chose him by default and then encountered a problem --As long as you press the button, the navigation list will no longer appear after the screen is enlarged.

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(500);    });}

So I thought it was a problem with my thinking. I switched to the default hidden mode. The result is the same. If you press the button, it will no longer appear. So I began to doubt jQuery.

Solution:

Then I found in F12 that after I pressed the button, it would show a style like this:

It turns out that all this is a ghost of slideToggle. It hides the element by setting the inline style of the element. The style set in this method has the highest priority among the three methods, therefore, the block set in CSS is useless.

To solve this problem, you can use js or a method with a higher priority :! Important.

If yes! If important is used, you need to set the navigation list to be hidden by default, otherwise it will never be hidden.

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;    }}

 

Summary:

It is dangerous to use a framework without actually understanding its principles.

I tried a jquery's .css () method later. He also changed the element style in inline mode.

It seems that we need to study how jQuery works so that we can understand its behavior only when applying it.