CSS3 media queries with jquery for responsive navigation

Source: Internet
Author: User
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.

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.