CSS3 media queries integrates jQuery to implement responsive navigation. css3jquery

Source: Internet
Author: User

CSS3 media queries integrates jQuery to implement 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 I pressed 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.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

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.