jQuery实现带展开动画的导航栏效果

2024-09-28 13:18:52

设计和自定义一个带展开动画效果的导航栏，尝试写了一个demo，加上设计和调试差不多写了一天吧。
这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏。

HTML写布局，CSS写样式，JS写动画效果和事件响应等，考虑到JQuery对DOM操作的便利性，这里选择用JQuery可以达到事半功倍的效果。

设计：

如果觉得自己下载的一些导航栏插件太千篇一律了，那么就设计一个自己喜欢的导航栏。可以先拿张纸画画自己希望要一个什么样的导航最终想要达到什么样的效果。
比如这里想要写一个导航栏，鼠标悬浮在每一章节上面，可以横向伸展出下面的每一个节点，节点的出现有一个跳跃的动作。

写布局：

在理清楚思路以后，开始写HTML，这步相对比较简单。 一般用到<div> <span> <a> 这几个标签就可以了。写清楚层次关系是很重要的，这里

要说明几点：

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。
<span>标签不会独自占一行，一般用来包裹内容。因为不是块级元素设置width、height属性无效
<a>标签当然是用来放链接的啦

写样式：

样式需要慢慢的调试，要用耐心。配色可以参考一些经典的配色方案。因为我们想要实现横向伸展出下面的每一个节点，必定会需要类似于多栏布局那样的效果，<span> 和<div>标签设置样式 display:inline-block可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。简单的说就是既一个设置width、height又不会强制占据一行。也可以用 display:flex这个牛逼的CSS3布局属性，实现多栏多列布局。

写JS：

布局写好之后就需要实现功能了。前面提到导航栏实现鼠标悬浮在每一章节上面，可以横向伸展出下面的每一个节点。自然会用到hover事件，来看看jQuery的hover事件。

$(selector).hover(inFunction,outFunction)

括号内第一个function必需写，规定 mouseover 事件发生时运行的函数。
第二个function可选，规定 mouseout 事件发生时运行的函数。

jQuery同样可以方便的实现动画效果， animate() 方法通过CSS样式将元素从一个状态改变为另一个状态。
CSS属性值是逐渐改变的，这样就可以创建动画效果，这里不再赘述。

因为想要节点按顺序依次出现，但又不想用animate的排队，所以我写了一个 回调函数，在回调函数中写了setTimeout延时，用addClass给响应的节点加上animation动画样式。

代码：

<!--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 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%;
            heigth:450px;
            display:flex;
        }
        .nav-left{
             flex:auto;
            heigth: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>
<!--布局-->
<div class="mynav">
    <div class="nav-left">
        目<br/>录<br>
        <span style="font-size:6px">
            by cc
        </span>
    </div>
    <div class="nav-right" >
        <div >
            <span class="cap ">Chapter1</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
        <div >
            <span class="cap">Chapter2</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
        <div >
            <span class="cap">Chapter3</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:'字符集',url:'https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E9%9B%86/946585?fr=aladdin'},
                    {name:'注释',url:'cc/sd1/index'},
                    {name:'直接量',url:'cc/sd2/index'}
        ]},
        {name:'Chapter2',
        children:[{name:'数字',url:'#'},
        {name:'文本',url:'#'},
        {name:'布尔值',url:'#'},
        {name:'全局对象',url:'#'},
        {name:'包装对象',url:'#'}
        ]},
        {
            name:'Chapter3',
            children: [{name:'猫猫',url:'#'},
            {name:'狗狗',url:'#'}
        ]}
    ];

    $('.cap').hover(function(){
        var cap=this;
        var mybox=$(cap.parentNode).find('.child');
        if(active!=this.innerHTML)
        {
            //变色
            $(cap).css('background-color','#ffc8aa');
            $(cap).next().css('border-left-color','#ffc8aa');
            //清理原来的内容
           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);

                    }
                }
            );
        }
         //顺序显示
        orderShow($(mybox),$(mybox).children().length-1);

    }, function(){
        //变色
        $(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>

效果：

动态效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery实现导航栏头部菜单项点击后变换颜色的方法

本文实例讲述了jQuery实现导航栏头部菜单项点击后变换颜色的方法.分享给大家供大家参考,具体如下: 实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ text-decoration: none; color
jquery实现垂直和水平菜单导航栏

本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下 1. HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>竖直导航菜单</title> <link href="css/Vmenu.css" rel="stylesheet" /> <script
jQuery Mobile 导航栏代码

导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内. 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button"). 使用 data-role="navbar" 属性来定义导航栏: 复制代码代码如下: <div data-role="header"><div data-role="navbar"><ul><li><a href="
jquery实现鼠标点击后展开列表内容的导航栏效果

本文实例讲述了jquery实现鼠标点击后展开列表内容的导航栏效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航栏,鼠标点击后展开隐藏的列表内容,用来制作一个目录是最合适不过的选择.本例是锋利的jQeury中的一个实例,这是最终的优化版本,兼容性还示曾测试,在火狐的表现尚不知情,有兴趣的朋友可测试或修正. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-click-show-table-nav-co
用jquery的方法制作一个简单的导航栏

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习导航栏的制作</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function() {
jQuery点击导航栏选中更换样式的实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
简单的jquery左侧导航栏和页面选中效果

这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external
jquery+css实现侧边导航栏效果

最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1.效果图当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2.css代码这里是css代码,详情请看注释 <style> /*重置一些样式*/ *, *::a
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例

解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script type="text/javascript" src="templets/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function
JQuery 浮动导航栏实现代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

jQuery实现带展开动画的导航栏效果

设计：

写布局：

写样式：

写JS：

相关推荐

随机推荐