快捷搜索:
来自 新京葡娱乐场网址 2019-09-23 14:04 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

实现炫酷下拉,jquery实现导航菜单

CSS3热身实战——过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

2017/08/04 · CSS · 9 评论 · 动画, 过渡

原文出处: 守候你   

jquery实现的个人中心导航菜单,jquery实现导航菜单

之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图:

新京葡娱乐场网址 1

 

在线预览   源码下载

 

一起看下实现的代码:

html代码:

新京葡娱乐场网址 2 <nav class="animated bounceInDown"> <ul> <li><a href="#profile"> <div class="fa fa-user"> </div> Profile </a></li> <li><a href="#message"> <div class="fa fa-envelope"> </div> Messages <span class="badge right">12</span> </a></li> <li class="sub-menu"><a href="#settings"> <div class="fa fa-gear"> </div> Settings <div class="fa right fa-caret-up"> </div> </a> <ul style="display: block;"> <li><a href="#settings">Account </a></li> <li><a href="#settings">Profile </a></li> <li><a href="#settings">Secruity & Privacy </a></li> <li><a href="#settings">Password </a></li> <li><a href="#settings">Notification </a></li> </ul> </li> <li class="sub-menu"><a href="#message"> <div class="fa fa-question-circle"> </div> Help <div class="fa right fa-caret-down"> </div> </a> <ul style="display: none;"> <li><a href="#settings">FAQ's </a></li> <li><a href="#settings">Submit a Ticket </a></li> <li><a href="#settings">Network Status </a></li> </ul> </li> <li><a href="#message"> <div class="fa fa-sign-out"> </div> Logout </a></li> </ul> </nav> View Code

css代码:

新京葡娱乐场网址 3 body { background: #f7f7f7 url("1.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: "Roboto"; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { content: ''; position: fixed; z-index: -1; top: 0; left: 0; background: #34495e; /* IE Fallback */ background: rgba(52, 73, 94, 0.8); width: 100%; height: 100%; } nav { position: absolute; top: 50%; left: 50%; width: 360px; margin: -78px 0 100px -180px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { /* Sub Menu */ } nav ul li a { display: block; background: #3498db; padding: 10px 15px; color: #fff; text-decoration: none; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; } nav ul li a:hover { background: #2980b9; } nav ul li a .fa { width: 16px; text-align: center; margin-right: 5px; } nav ul li a .badge { display: inline-block; background: #fff; /* IE Fallback */ background: rgba(255, 255, 255, 0.2); padding: 3px 7px; color: #fff; font-size: 12px; font-weight: 800; } nav ul li ul li a { background: #新京葡娱乐场网址 ,444; border-left: 4px solid transparent; padding: 10px 20px; } nav ul li ul li a:hover { background: #333; border-left: 4px solid #3498db; } /* Float Right/Left */ .right { float: right; } .left { float: left; } View Code

js代码:

新京葡娱乐场网址 4 $('.sub-menu ul').hide(); $(".sub-menu").click(function () { $(this).children("ul").slideToggle("100"); $(this).find(".right").toggleClass("fa-caret-up fa-caret-down"); }); //@ sourceURL=pen.js View Code

注:本文爱编程原创文章,转载请注明原文地址:

1.前言

在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三个特效,希望这三个特殊能让大家受到启发,利用css3做出更好,更炫的动画效果,并且对比这三个特效和JS特效的对比,希望能帮助到是大家学到CSS3的一些知识。今天这三个案例可以说是一个预习或者热身吧,以后也会写关于CSS3更好的作品或者文章,最近我也是在编写一个css3的动画库!

jquery实现菜单点击时间问题

//在处理点击展开的时候,可以将之前所有打开的菜单关闭一下。
$(document).ready(function () {
$("li.mainlevel").click(function () {
$("li.mainlevel > ul").hide();
$(this).find("ul").slideDown(300);
});
});  

2.过渡与动画概念理解

jquery怎控制当前页的导航菜单效果?

例如导航的div <div class="nav"><a href="index.html">首页</a><a href="product.html">产品</a><a href="case.html">案例中心</a></div>

下面的html内容:
<div class="main">
<div class="content">首页的内容</div>
<div class="content">产品的内容</div>
<div class="content">案例中心的内容</div>
</div>
至于class=“content”可以是你自己加上的为了便于jQuery获取,没有这个样式类
<script type="text/javascript">
$(document).ready(function()
{
var tabs = $('.nav > a');
var cons = $('.main > div.content');

tabs.first().addClass("now").show(); //默认第一个显示
cons.first().show().nextAll().hide(); //默认第一个显示,其他隐藏
tabs.each(function(index){
$(this).mouseover(function(){
$(this).addClass("now").siblings().removeClass("now");
cons.eq(index).show().siblings().hide();
});
});

});
</script>  

之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜...

css3过渡

化用菜鸟教程的说法,CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:1.指定要添加效果的CSS属性。2.指定效果的持续时间。

css3动画

化用菜鸟教程的说法,CSS3动画是根据@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。指定至少这两个CSS3的动画属性绑定向一个选择器:1.规定动画的名称。2.规定动画的时长。

3.过渡案例-炫酷下拉

新京葡娱乐场网址 5

3-1原理分析

1.首先就是一个导航下拉,就是鼠标放上去出现一个下拉列表
2.然后发现,下拉里面,每一个选项是从不同的两个方向出现的
3.出现的方式是奇数项从左边进,偶数项从右边进,进入方式是滑动淡入。

3-2实现过程

1.首先页面的布局,这个应该大家都知道,菜单无非就是一个ul-li列表,下拉列表就是li下面的一个ul-li。

reset.css(样式重置表和个人常用样式封装)

JavaScript

*{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:#000;text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize16,h4{font-size:16px}.fontsize14,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllil li{float:left}.fllir li{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0;right:0;margin:auto}.positionCenterTop{top:0;bottom:0;margin:auto}.positionCenter{top:0;bottom:0;left:0;right:0;margin:auto}.distable{display:table}.distablecell{display:table-cell;vertical-align:middle}.textels{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.marginCenter{margin:0 auto}.t_l{text-align:left}.t_c{text-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position:fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both;overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lblock{display:inline-block}.clear{clear:both}.pointer{cursor:pointer}img{border:0;vertical-align:middle}

1
*{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:#000;text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize16,h4{font-size:16px}.fontsize14,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllil li{float:left}.fllir li{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0;right:0;margin:auto}.positionCenterTop{top:0;bottom:0;margin:auto}.positionCenter{top:0;bottom:0;left:0;right:0;margin:auto}.distable{display:table}.distablecell{display:table-cell;vertical-align:middle}.textels{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.marginCenter{margin:0 auto}.t_l{text-align:left}.t_c{text-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position:fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both;overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lblock{display:inline-block}.clear{clear:both}.pointer{cursor:pointer}img{border:0;vertical-align:middle}

html代码如下

JavaScript

<div class="demo-nav"> <!--.fllil,.clear是在样式重置表(reset.css)上写好的样式,.fllil li{fload:left;}.clear{clear:both;}--> <ul class="menu fllil"> <li>HTML5 <ul class="sub-menu"> <li>article</li> <li>section</li> <li>menu</li> <li>nav</li> </ul> </li> <li>CSS3 <ul class="sub-menu"> <li>动画</li> <li>过渡</li> <li>圆形</li> <li>边框</li> </ul> </li> <li>Javascript <ul class="sub-menu"> <li>字符串</li> <li>数组</li> <li>对象</li> <li>布尔</li> </ul> </li> <li>Jquery <ul class="sub-menu"> <li>动画</li> <li>特效</li> <li>AJAX</li> </ul> </li> <li>VUE</li> </ul> <div class="clear"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="demo-nav">
    <!--.fllil,.clear是在样式重置表(reset.css)上写好的样式,.fllil li{fload:left;}.clear{clear:both;}-->
    <ul class="menu fllil">
        <li>HTML5
            <ul class="sub-menu">
                <li>article</li>
                <li>section</li>
                <li>menu</li>
                <li>nav</li>
            </ul>
        </li>
        <li>CSS3
            <ul class="sub-menu">
                <li>动画</li>
                <li>过渡</li>
                <li>圆形</li>
                <li>边框</li>
            </ul>
        </li>
        <li>Javascript
            <ul class="sub-menu">
                <li>字符串</li>
                <li>数组</li>
                <li>对象</li>
                <li>布尔</li>
            </ul>
        </li>
        <li>Jquery
            <ul class="sub-menu">
                <li>动画</li>
                <li>特效</li>
                <li>AJAX</li>
            </ul>
        </li>
        <li>VUE</li>
    </ul>
    <div class="clear"></div>
</div>

css代码如下

JavaScript

.demo-nav { width: 500px; margin: 0 auto; } .demo-nav li { line-height: 40px; padding: 0 10px; background: #09f; color: #fff; position: relative; } .demo-nav li ul { position: absolute; left: 0; top: 40px; height: 0; overflow: hidden; } .demo-nav li ul li { float: none; /*过渡代码*/ transition: all .3s; background: #f90; opacity: 0; } /*奇数项初始往右边偏移100%*/ .demo-nav li ul li:nth-of-type(1n) { transform: translate3d(100%, 0, 0); } /*偶数项初始往左边偏移100%*/ .demo-nav li ul li:nth-of-type(2n) { transform: translate3d(-100%, 0, 0); } .demo-nav li:hover ul { overflow: visible; } /*透明度和互动同时进行*/ .demo-nav li:hover ul li { opacity: 1; transform: translate3d(0, 0, 0); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
    .demo-nav {
        width: 500px;
        margin: 0 auto;
    }
 
    .demo-nav li {
        line-height: 40px;
        padding: 0 10px;
        background: #09f;
        color: #fff;
        position: relative;
    }
 
    .demo-nav li ul {
        position: absolute;
        left: 0;
        top: 40px;
        height: 0;
        overflow: hidden;
    }
 
    .demo-nav li ul li {
        float: none;
        /*过渡代码*/
        transition: all .3s;
        background: #f90;
        opacity: 0;
    }
    /*奇数项初始往右边偏移100%*/
    .demo-nav li ul li:nth-of-type(1n) {
        transform: translate3d(100%, 0, 0);
    }
    /*偶数项初始往左边偏移100%*/
    .demo-nav li ul li:nth-of-type(2n) {
        transform: translate3d(-100%, 0, 0);
    }
 
    .demo-nav li:hover ul {
        overflow: visible;
    }
    /*透明度和互动同时进行*/
    .demo-nav li:hover ul li {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

注意1:在显示下拉列表的操作上,刚开始隐藏子菜单ul的样式,不能这样写.demo-nav li ul{display:none;}。要这样写.demo-nav li ul{height: 0;overflow:hidden;},鼠标放上父级li的时候,显示ul不能这样写.demo-nav li:hover ul{display:block;},要这样写,.demo-nav li:hover ul{overflow: visible;}因为一开始如果子菜单ul是隐藏的,鼠标放到父级li的时候,子菜单ul就显示出来,这样是看到子菜单ul下面li的动画的。

新京葡娱乐场网址 6

注意2:子菜单ul要用.demo-nav li ul{height: 0;overflow:hidden;}隐藏,在显示的时候再设置.demo-nav li:hover ul{overflow: visible;}。这一步不能省,否则会出问题。如果不加,实际上子菜单ul,以及子菜单ul下面的li一直在页面上,如果鼠标移上去子菜单ul,以及子菜单ul下面的li。那么实际上也会触发父级lihover

新京葡娱乐场网址 7

新京葡娱乐场网址 8

3-3与JS实现对比

这个效果js也是能实现,实现上也不难,无非就是调用定时器的问题。但是写的肯定比css3多,逻辑也会比css3复杂。
1.首先,父级li必须要绑定一个鼠标移出和移入事件,也要定义一个属性,记录定时器(不同的父级li不能共用一个定时器,不然会受到干扰,必须每一个父级li下面都要有一个属性记录定时器)。obj.timer=setInterval(function(){},100)
2.用js实现,实际上也是操作class或者css。所以性能上css3是比js好!
3.针对这个动画,css3也比js好控制。

3-4完整代码

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ec-css导航栏</title> <link rel="stylesheet" href="reset.css"> <style> .demo-nav { width: 500px; margin: 0 auto; } .demo-nav li { line-height: 40px; padding: 0 10px; background: #09f; color: #fff; position: relative; } .demo-nav li ul { position: absolute; left: 0; top: 40px; /*height: 0;*/ /*overflow: hidden;*/ } .demo-nav li ul li { float: none; transition: all .3s; background: #f90; opacity: 0; } .demo-nav li ul li:nth-of-type(1n) { transform: translate3d(100%, 0, 0); } .demo-nav li ul li:nth-of-type(2n) { transform: translate3d(-100%, 0, 0); } .demo-nav li:hover ul { /*overflow: visible;*/ } .demo-nav li:hover ul li { opacity: 1; transform: translate3d(0, 0, 0); } /*最多10级,超过10级的,得写js*/ .demo-nav li ul li:nth-of-type(2) { transition-delay: .1s; } .demo-nav li ul li:nth-of-type(3) { transition-delay: .2s; } .demo-nav li ul li:nth-of-type(4) { transition-delay: .3s; } .demo-nav li ul li:nth-of-type(5) { transition-delay: .4s; } .demo-nav li ul li:nth-of-type(6) { transition-delay: .5s; } .demo-nav li ul li:nth-of-type(7) { transition-delay: .6s; } .demo-nav li ul li:nth-of-type(8) { transition-delay: .7s; } .demo-nav li ul li:nth-of-type(9) { transition-delay: .8s; } .demo-nav li ul li:nth-of-type(10) { transition-delay: .9s; } </style> </head> <body> <div class="demo-nav"> <ul class="menu fllil"> <li>HTML5 <ul class="sub-menu"> <li>article</li> <li>section</li> <li>menu</li> <li>nav</li> </ul> </li> <li>CSS3 <ul class="sub-menu"> <li>动画</li> <li>过渡</li> <li>圆形</li> <li>边框</li> </ul> </li> <li>Javascript <ul class="sub-menu"> <li>字符串</li> <li>数组</li> <li>对象</li> <li>布尔</li> </ul> </li> <li>Jquery <ul class="sub-menu"> <li>动画</li> <li>特效</li> <li>AJAX</li> </ul> </li> <li>VUE</li> </ul> <div class="clear"></div> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ec-css导航栏</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .demo-nav {
            width: 500px;
            margin: 0 auto;
        }
 
        .demo-nav li {
            line-height: 40px;
            padding: 0 10px;
            background: #09f;
            color: #fff;
            position: relative;
        }
 
        .demo-nav li ul {
            position: absolute;
            left: 0;
            top: 40px;
            /*height: 0;*/
            /*overflow: hidden;*/
        }
 
        .demo-nav li ul li {
            float: none;
            transition: all .3s;
            background: #f90;
            opacity: 0;
        }
 
        .demo-nav li ul li:nth-of-type(1n) {
            transform: translate3d(100%, 0, 0);
        }
 
        .demo-nav li ul li:nth-of-type(2n) {
            transform: translate3d(-100%, 0, 0);
        }
 
        .demo-nav li:hover ul {
            /*overflow: visible;*/
        }
 
        .demo-nav li:hover ul li {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
        /*最多10级,超过10级的,得写js*/
        .demo-nav li ul li:nth-of-type(2) {
            transition-delay: .1s;
        }
 
        .demo-nav li ul li:nth-of-type(3) {
            transition-delay: .2s;
        }
 
        .demo-nav li ul li:nth-of-type(4) {
            transition-delay: .3s;
        }
        .demo-nav li ul li:nth-of-type(5) {
            transition-delay: .4s;
        }
 
        .demo-nav li ul li:nth-of-type(6) {
            transition-delay: .5s;
        }
 
        .demo-nav li ul li:nth-of-type(7) {
            transition-delay: .6s;
        }
        .demo-nav li ul li:nth-of-type(8) {
            transition-delay: .7s;
        }
 
        .demo-nav li ul li:nth-of-type(9) {
            transition-delay: .8s;
        }
 
        .demo-nav li ul li:nth-of-type(10) {
            transition-delay: .9s;
        }
    </style>
</head>
<body>
<div class="demo-nav">
    <ul class="menu fllil">
        <li>HTML5
            <ul class="sub-menu">
                <li>article</li>
                <li>section</li>
                <li>menu</li>
                <li>nav</li>
            </ul>
        </li>
        <li>CSS3
            <ul class="sub-menu">
                <li>动画</li>
                <li>过渡</li>
                <li>圆形</li>
                <li>边框</li>
            </ul>
        </li>
        <li>Javascript
            <ul class="sub-menu">
                <li>字符串</li>
                <li>数组</li>
                <li>对象</li>
                <li>布尔</li>
            </ul>
        </li>
        <li>Jquery
            <ul class="sub-menu">
                <li>动画</li>
                <li>特效</li>
                <li>AJAX</li>
            </ul>
        </li>
        <li>VUE</li>
    </ul>
    <div class="clear"></div>
</div>
</body>
</html>

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:实现炫酷下拉,jquery实现导航菜单

关键词: