Provide zblog template_zblog them_wordpress template download and customization

A very simple and concise adaptive navigation bar

Tianxing Studio 2016-10-25 22:07 course sixteen thousand six hundred and ninety-seven 1 Comments


This is a super simple one that I have struggled with myself self-adaption navigation bar The overall idea is also simple.

The html structure of the navigation bar is as follows:

 <div class="nav">     <span class="nav-on"><i></i><i></i><i></i></span>     <ul> <li><a href="#">Home Page</a></li> <li><a href="#">Column 1</a></li> <li><a href="#">Column 2</a></li>     </ul> </div>

The js code is as follows (depending on the JQ library):

 $(".nav-on").click(function(){     $(".nav>ul").slideToggle(); });

Try to explain: use css to query and judge that the navigation bar is normally displayed on the computer side, and the navigation bar trigger button "<span class=" nav on "></span>" is hidden.

When the user accesses with a mobile phone, hide the<ul>in the navigation bar, and then click the trigger button in the navigation bar with the js operation to display the entire<ul></ul>content.

At last, I will write a css:

 .nav{line-height:50px;background: #0099cc;position: relative;} .nav li{float:left;} .nav li a{display:block;padding:0 20px;color:#fff;} .nav span.nav-on{display:none;width:20px;position: absolute;top:12px;right:12px;cursor: pointer;} .nav-on i{display:block;width:100%;height:5px;background:#fff;margin-bottom:5px;} /*Phone end css code*/ @media screen and (max-width:768px){ .nav ul{display:none;width:100%;} .nav ul li{width:100%;} .nav span.nav-on{display:block;} }

If you need css beautification, you need to do it according to your own needs. This article only provides one method.


Can't find a tutorial that can solve your problem?

You can try to search or ask questions directly online. We also provide charging technical support. If you need it, you can contact us online.

Online questions Online Service

yes one Comments from netizens:

  •  Yutang Network

    Yutang Network 8 years ago (2016-10-26) reply

    You are very good

welcome you Comment: Cancel Reply

 Please fill in the verification code
  • Latest articles
  • Hot article ranking
  • Most Comments
Label aggregation
  • Sign in
  • Registered account Forgot your password?
  • register
  • Already have an account? Direct login Forgot your password?
  • Social account login