Teach you step by step to write cool navigation bar js+css implementation

Teach you step by step to write cool navigation bar js+css implementation_jquery

WBOY

Release： 2016-05-16 15:10:45

Original

1292 people have browsed it

Learn to make a navigation bar step by step. At the end of the article, I will make a comprehensive page and share with you a cool navigation bar for your reference. The specific content is as follows

1. The highlighted navigation bar of the current page

The first is the HTML code, which is very simple, ul+li implements the menu

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航栏一</title>
</head>
<body>
  <header class="header">
    <div class="nva">
      <ul class="list">
        <li><a href="Android.html">Android</a></li>
        <li><a href="C++.html">C++</a></li>
        <li><a href="IOS.html">IOS</a></li>
        <li><a href="Java.html">Java</a></li>
        <li><a href="Ruby.html">Ruby</a></li>
      </ul>
    </div>
  </header>
<h1>首页</h1>
</body>
</html>

Copy after login

Basic effect:

Next, set the CSS properties. Note here that tag a is a line-level element, so you need to use display to convert it to a block-level element. This is very common, and there is also the common usage of line-height

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }

Copy after login

Achieved effect:

Finally, JS is used to dynamically add positioning effects
Thinking about it this way in js, there will be a link when the page jumps. Match the attributes according to the suffix of the link. If it matches, change the style to achieve the desired effect
What you need to pay attention to is how to get the URL and how to find the href information from the URL

$(function(){
  //当前链接以/分割后最后一个元素索引
  var index = window.location.href.split("/").length-1;
  //最后一个元素前四个字母,防止后面带参数
  var href = window.location.href.split("/")[index].substr(0,4);
 
  if(href.length>0){
    //如果匹配开头成功则更改样式
    $(".list li a[href^='"+href+"']").addClass("on");
    //[attribute^=value]：匹配给定的属性是以某些值开始的元素。
  }else {
    //默认主页高亮
    $(".list li a[href^='index']").addClass("on");
  }
});

Copy after login

Rendering

2. Slide in the navigation bar that switches automatically

Based on step 1, modify the HTMLa tag content, and then set the animation effect through CSS

<ul class="list">
        <li><a href="index01.html">
        <b>首页</b>
        <i>Index</i>
        </a></li>
        <li><a href="Android.html">
          <b>Android</b>
          <i>安卓</i>
        </a></li>
        <li><a href="C++.html">
          <b>C++</b>
          <i>谁加加</i>
        </a></li>
        <li><a href="IOS.html">
          <b>IOS</b>
          <i>苹果</i>
        </a></li>
        <li><a href="Java.html">
          <b>Java</b>
          <i>爪哇</i>
        </a></li>
        <li><a href="Ruby.html">
          <b>Ruby</b>
          <i>如八一</i>
        </a></li>
      </ul>

Copy after login

To achieve animation effects with CSS, first set the b and i tags as block-level elements, so that they can be distributed vertically, and then set a transition for a. The so-called animation is to change a after it is crossed in, and then move a up. Add a border to a for easy observation, see the picture below

Finally, if you want to achieve the effect, just set an overflow hidden attribute for the div that wraps the menu

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; overflow: hidden; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s; }
              .list b,.list i{ display: block; }
.list li a:hover{ margin-top: -40px; background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }

Copy after login

It can also be implemented using JQ, the code is as follows

$(function () {
  $(".list a").hover(function () {
    //stop是当执行其他动画的时候停止当前的
    $(this).stop().animate({
      "margin-top": -40
    }, 300);
  }, function () {
    $(this).stop().animate({
      "margin-top": 0
    }, 300);
  });
});

Copy after login

3. Flexible submenu implementation

First of all, the submenu is wrapped in div, with a tags inside, as follows

<li><a href="Android.html">
  <b>Android</b>
</a>
  <div class="down">
    <a href="#">子菜单1</a>
    <a href="#">子菜单2</a>
    <a href="#">子菜单3</a>
    <a href="#">子菜单4</a>
  </div>
</li>

Copy after login

Next, set the style. Since it is a submenu, it needs to be separated from the document page, so use the absolute attribute. If you use this attribute, the parent container must be relative

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; position: relative; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s; }
.list b{ display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
.list .down{ position: absolute; top: 40px; background-color: #222; /*display: none;*/ }
.list .down a{ color: #aaa; padding-left: 30px; display: block; }
h1{ margin: 20px auto; text-align: center; }

Copy after login

The following effect:

Next use JQ and easing plug-ins to control animation
The find method is generally used to find
of descendant elements of the operating element.

$(function () {
  $(".list li").hover(function () {
    //这里使用了easing插件
    $(this).find(".down").stop().slideDown({duration:1000,easing:"easeOutBounce"});
  }, function () {
    $(this).find(".down").stop().slideUp({duration:1000,easing:"easeOutBounce"});
  });
});

Copy after login

The effect, the picture recording is not very good, in fact they are all elastic animations.