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

Analysis of the implementation of MySQL statement locking

Abstract: Analysis of two MySQL SQL statement loc...

Alibaba Cloud ECS Server Getting Started Process (Must-Read Tutorial for Newbies)

1. Alibaba Cloud selects the appropriate cloud se...

Use CSS3 background control properties + color transition to achieve gradient effect

css3 background image related Compatibility: IE9+...

Exploring the Linux Kernel: The Secrets of Kconfig

Get a deep understanding of how the Linux configu...

A brief analysis of MySQL locks and transactions

MySQL itself was developed based on the file syst...

Example code for implementing photo stacking effect with CSS

Achieve results step 1. Initial index.html To bui...

Solution to the "No such file or directory" prompt when executing executable files in Linux

Recently, when I was using the Linux operating sy...

MySQL string splitting operation (string interception containing separators)

String extraction without delimiters Question Req...

Vue + element dynamic multiple headers and dynamic slots

Table of contents 1. Demand 2. Effect 3. All code...

MySQL encryption and decryption examples

MySQL encryption and decryption examples Data enc...

Detailed explanation of MySQL backup and recovery practice of mysqlbackup

1. Introduction to mysqlbackup mysqlbackup is the...

How to use geoip to restrict regions in nginx

This blog is a work note environment: nginx versi...

MySQL aggregate function sorting

Table of contents MySQL result sorting - Aggregat...

CSS achieves the effect of changing the color of the entire line when the mouse is placed on it

summary: The following is a method for changing t...

MySQL creates users, authorizes users, revokes user permissions, changes user passwords, and deletes users (practical tips)

MySQL creates users and authorizes and revokes us...