jQuery implements navigation bar effect with expansion animation

jQuery implements navigation bar effect with expansion animation

I designed and customized a navigation bar with an expansion animation effect, and tried to write a demo. It took me almost a day to complete the design and debugging.
Here I will talk about how to complete a completely self-designed navigation bar from design -> write layout -> write style -> write JS code.

HTML is used to write layout, CSS is used to write style, JS is used to write animation effects and event responses, etc. Considering the convenience of JQuery for DOM operations, choosing to use JQuery here can achieve twice the result with half the effort.

design:

If you feel that some of the navigation bar plug-ins you downloaded are too monotonous, then design a navigation bar that you like. You can first take a piece of paper and draw what kind of navigation you want and what kind of effect you want to achieve in the end.
For example, if you want to write a navigation bar here, when the mouse hovers over each chapter, each node below can be stretched horizontally, and the nodes appear with a jumping action.

Write layout:

After sorting out your thoughts, start writing HTML, which is a relatively simple step. Generally, the tags <div> <span> <a> are enough. It is important to clearly write the hierarchical relationship.

A few points to make:

<div> is a block-level element. This means that its contents automatically start on a new line.
The <span> tag does not occupy a line by itself and is generally used to wrap content. Because it is not a block-level element, setting the width and height attributes is invalid
The <a> tag is of course used to place links.

Write style:

The style needs to be debugged slowly and requires patience. For color matching, you can refer to some classic color schemes. Because we want to stretch out each node below horizontally, we must need an effect similar to a multi-column layout. The <span> and <div> tags are styled with display:inline-block to render the object as an inline object, but the content of the object is rendered as a block object. Simply put, it is to set the width and height without forcing it to occupy a single line. You can also use the awesome CSS3 layout attribute display:flex to achieve multi-column layout.

Write JS:

After the layout is written, the functionality needs to be implemented. As mentioned earlier, the navigation bar allows you to hover the mouse over each chapter and stretch out each node below it horizontally. Naturally, the hover event will be used. Let's take a look at jQuery's hover event.

$(selector).hover(inFunction,outFunction)

The first function in the brackets is required and specifies the function to be run when the mouseover event occurs.
The second function is optional and specifies the function to be run when the mouseout event occurs.

jQuery can also easily implement animation effects. The animate() method changes an element from one state to another through CSS styles.
CSS property values ​​are changed gradually, so that animation effects can be created, which I will not go into here.

Because I want the nodes to appear in sequence, but I don’t want to use animate queuing, so I wrote a callback function , wrote setTimeout delay in the callback function, and used addClass to add animation style to the corresponding node.

Code:

<!--Created by CC on 2017/10/14-->
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>~myNav~</title>
    <script type="text/javascript" src="jquery.js"></script>
    <!--Style-->
    <style type="text/css">
 
        .triangle-right {
            width: 0;
            height: 0;
            border-left: 20px solid #FF7800;
            border-bottom: 20px solid transparent;
            border-top:2px dotted #333333;
            display: inline-block;
            margin-top:10px;
            vertical-align: top;
        }
        .mynav
        {
            font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
            -webkit-font-smoothing: subpixel-antialiased;
            margin:10px 2%;
            width:90%;
            height:450px;
            display:flex;
        }
        .nav-left{
             flex:auto;
            height:200px;
            font-size:20px;
            font-weight: 700;
            text-align: center;
            background-color:#505050 ;
            color:#FF7800;
            border-right:3px solid #FF7800;
            width:80px;
            padding-top:40px;
        }
        .nav-right
             flex:auto;
             width:90%
        }
        .nav-right div{
            position:relative;
        }
        .cap{
            display:inline-block;
            width:70px;
            height:30px;
            background-color: #FF7800;
            margin:10px 0;
            border-bottom:2px dotted #333333;
            border-top:2px dotted #333333;
        }
 
        .child{
            display:inline-block;
            width:0px;
            border-top:2px dotted #333333;
            vertical-align: top;
            margin-top: 10px;
        }
        span.cap-child
        {
            position:absolute;
            border:2px solid #333333;
            background-color: #505050;
            color: #ffffff;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            /*top:5px;*/
            left:0px;
 
        }
        span.cap-child a{
            font-size:15px;
            color:white;
        }
        span.cap-child a:hover{
            color: #ffc8aa;
        }
        .hr-over{
            position:absolute;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            background-color: #FF7800;
            width:20px;
            height:20px;
            margin-top:-10px;
            border:1px solid #333333;
        }
        .showit{
            animation: cho-show .5s;
        }
        @keyframes cho-show {
            0% {
                -webkit-transform-origin: right bottom;
                transform-origin: right bottom;
                -webkit-transform:rotate3d(0, 0, 1, 45deg);
                transform: rotate3d(0, 0, 1, 45deg);
                opacity:0;
            }
            100% {
                -webkit-transform-origin: right bottom;
                transform-origin: right bottom;
                -webkit-transform: none;
                transform: none;
                opacity:1;
            }
        }
 
    </style>
</head>
<body>
<!--Layout-->
<div class="mynav">
    <div class="nav-left">
        Contents
        <span style="font-size:6px">
            by cc
        </span>
    </div>
    <div class="nav-right" >
        <div >
            <span class="cap ">Chapter 1</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
        <div >
            <span class="cap">Chapter 2</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
        <div >
            <span class="cap">Chapter 3</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
    </div>
</div>
 
<script type="text/javascript">
    var active='';
    var space=80;
    var myNodes = [{ name:'Chapter1',
                    children: [{name:'Character set',url:'https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E9%9B%86/946585?fr=aladdin'},
                    {name:'Comment',url:'cc/sd1/index'},
                    {name:'direct quantity',url:'cc/sd2/index'}
        ]},
        {name:'Chapter2',
        children:[{name:'number',url:'#'},
        {name:'text',url:'#'},
        {name:'Boolean value',url:'#'},
        {name:'global object',url:'#'},
        {name:'Packaging object',url:'#'}
        ]},
        {
            name:'Chapter3',
            children: [{name:'Cat',url:'#'},
            {name:'狗',url:'#'}
        ]}
    ];
 
    $('.cap').hover(function(){
        var cap = this;
        var mybox=$(cap.parentNode).find('.child');
        if(active!=this.innerHTML)
        {
            //Change color$(cap).css('background-color','#ffc8aa');
            $(cap).next().css('border-left-color','#ffc8aa');
            //Clean up the original content for(var j=0;j<$('.child').length;j++)
            {
                //console.log($('.child')[j]);
                $($('.child')[j]).empty();
                $($('.child')[j]).css('width','0px');
            }
 
            active=this.innerHTML;
            myNodes.forEach(function(item){
                    if(active==item.name)
                    {
                        myAnimate(item.children,mybox);
 
                    }
                }
            );
        }
         //Order display orderShow($(mybox),$(mybox).children().length-1);
 
    }, function(){
        //Change color$(this).css('background-color','#FF7800');
        $(this).next().css('border-left-color','#FF7800');
 
    });
 
 
    function myAnimate(arr,ele)
    {
       // console.log(ele);
        var $ele=$(ele);
        var pos;
        arr.forEach(function(item,index){
            pos=space*index+20;
            addOne(item,pos+'px');
        });
        $ele.animate({width:pos+100+'px'},200,'linear',function(){
            var left=pos+80+'px';
            $ele.append("<span class='hr-over' style='left:"+left+"'></span>");
        });
        function addOne(item,pos)
        {
            var mylink="<a href='"+item.url+"'>"+item.name+"</a>";
            $ele.append("<span class='cap-child' style='display:none;left:"+pos+"'>"+mylink+"</span>")
        }
    }
 
    function orderShow($it,times)
    {
        if(times>=0)
        {
            setTimeout(function(){
                $($it.children()[times]).css('display','block')
                $($it.children()[times]).addClass('showit');
            orderShow($it,times-1)
        },100);
        }
        else
            return;
 
    }
</script>
 
</body>
</html>

Effect:

Dynamic Effects:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Simple jQuery left navigation bar and page selection effect
  • JQuery floating navigation bar implementation code
  • Creating a simple navigation bar using jQuery
  • An example of how Jquery adds selected styles to the navigation bar of the current page or the page after jumping
  • jQuery implements the method of changing the color of the navigation bar header menu item after clicking
  • jQuery implements the navigation bar effect of expanding the list content after the mouse click
  • jQuery+CSS to achieve the side navigation bar effect
  • jQuery Mobile navigation bar code
  • jQuery clicks on the navigation bar to select the implementation code for changing the style
  • jQuery implements vertical and horizontal menu navigation bar

<<:  MySQL 8.0.17 winx64 (with navicat) manual configuration version installation tutorial diagram

>>:  CentOS 6-7 yum installation method of PHP (recommended)

Recommend

Solution to the problem of flash back after entering the password in MySQL database

MySQL database crashes after entering password an...

Linux confirms that the data disk has been uninstalled and a new custom image can be created

Custom Image FAQ How to view the data disk? You c...

HTML simple web form creation example introduction

<input> is used to collect user information ...

Summary of some common uses of refs in React

Table of contents What are Refs 1. String type Re...

How to enable MySQL remote connection in Linux server

Preface Learn MySQL to reorganize previous non-MK...

Detailed explanation of the solution to garbled characters when JDBC connects to MySQL to process Chinese

Detailed explanation of the solution to garbled c...

Detailed explanation of Linux netstat command

Table of contents Linux netstat command 1. Detail...

Introduction and architecture of Apache Arrow, a high-performance data format library package on JVM (Gkatziouras)

Apache Arrow is a popular format used by various ...

How to build a MySQL high-availability and high-performance cluster

Table of contents What is MySQL NDB Cluster Preli...

Detailed explanation of AWS free server application and network proxy setup tutorial

Table of contents Precautions Necessary condition...

Case study of dynamic data binding of this.$set in Vue

I feel that the explanation of this.$set on the I...

HTML table markup tutorial (18): table header

<br />The header refers to the first row of ...

MySQL table type storage engine selection

Table of contents 1. View the storage engine of t...

Solve the problem of blocking positioning DDL in MySQL 5.7

In the previous article "MySQL table structu...

How to set up scheduled tasks in Linux and Windows

Table of contents Linux 1. Basic use of crontab 2...