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)