Home > Article > Web Front-end > How to implement a cool navigation bar with JavaScript+css?

How to implement a cool navigation bar with JavaScript+css?

黄舟Original: 2017-07-25 09:27:065141browse

Teach you step by step to write a cool navigation bar. JS+CSS implements a black classic navigation bar. It has a certain reference value. Interested friends can refer to

to learn how to create a navigation step by step. column, I will make a comprehensive page at the end of the article 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">
    <p 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>
    </p>
  </header>
<h1>首页</h1>
</body>
</html>

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

Achieved effect:

Finally, JS dynamically adds positioning effect
Consider this in js, page jump There will be a link. 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^=&#39;"+href+"&#39;]").addClass("on");
    //[attribute^=value]：匹配给定的属性是以某些值开始的元素。
  }else {
    //默认主页高亮
    $(".list li a[href^=&#39;index&#39;]").addClass("on");
  }
});

Rendering

2. Slide in the automatic switching navigation bar

On the basis of 1, modify the content of the HTMLa tag, 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>

CSS to achieve the animation effect, first set the b and i tags to block level Elements, in this case, they can be distributed vertically, and then set a transition for a. The so-called animation is to change and move a up after it is inserted, and then 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 p in the package 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; }

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

3. Flexible submenu implementation

First use the submenu p package, which is filled with a tags, as follows

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

Next, set the style. Since it is a submenu, it must be separated from the document page, so use the absolute attribute. Use this attribute Then 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; }

The following effect:

Continue Next, use JQ and easing plug-ins to control the animation.
The find method is generally used to find the

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

effect of the descendant elements of the operating element. The picture recording is not very good. , are actually all elastically animated.

The above is the detailed content of How to implement a cool navigation bar with JavaScript+css?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JavaScript to implement navigation bar sample code sharingNext article：How to use JavaScript to implement navigation bar sample code sharing

See more

How to implement a cool navigation bar with JavaScript+css?

Related articles