帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 二级导航栏效果多样式
二级导航栏效果多样式
浏览:766次
-
评论:0次
-
发布时间:2018-08-14
Html
Css
Js
One
One
Two
Two
Three
Three
Four
Four
Five
Five
Six
Six
Seven
Seven
* { /* 定义全局属性 */ margin:0 auto; padding:0; } body,html { height:100%; /* 开启弹性布局 */ /* 使 ul在浏览器中 居中对齐 */ display:flex; justify-content:center; align-items:center; background:royalblue; } ul { /* 定义ul样式 */ /* 消除小圆点 */ list-style:none; width:700px; height:60px; } li { width:100px; height:60px; background:rgb(94,131,241); /* 定义往左浮动 */ float:left; /* 设置相对定位 */ position:relative; font-size:25px; color:white; /* 设置文字居中 */ text-align:center; line-height:60px; /* 鼠标样式改为小手 */ cursor:pointer; } section { /* 定义全部 section 属性 */ position:absolute; /* 设置渐变 */ transition:0.5s; } li:hover { /* 设置鼠标经过时改变li背景 */ background:rgba(41,41,41,0.274); } .one { width:700px; height:60px; /* 相对与li进行定位,使section 与 ul 相对其 下同 */ top:60px; /* 使改标签为 无 */ display:none; } li:hover .one { /* 使标签转换为块标签 */ display:block; background:rgb(247,106,106); } .two { width:700px; /* 定义高度为0 */ height:0; /* 相对与li进行定位,使section 与 ul 相对其 下同 */ left:-100px; /* 因为高度为0,所以超出的部分被隐藏掉 */ overflow:hidden; } li:hover .two { /* 高度变为60px,内容会显示出来 */ height:60px; background:rgb(247,212,99); } .three { /* 定义宽度为0 */ width:0; height:60px; left:-200px; /* 因为宽度为0,所以超出的部分被隐藏掉 */ overflow:hidden; } li:hover .three { width:700px; background:rgb(174,247,106); } .four { width:0; height:60px; /* 相对与li进行定位,使section 与 ul 相对其 */ /* 此处用 right 而不用 left ,是为了使其改变起始方向 */ right:-300px; /* 因为宽度为0,所以超出的部分被隐藏掉 */ overflow:hidden; } li:hover .four { width:700px; background:rgb(106,247,200); } .five { width:0; height:0; left:-400px; /* 因为宽,高度为0,所以超出的部分被隐藏掉 */ overflow:hidden; } li:hover .five { width:700px; height:60px; background:rgb(242,106,247); } .six { width:0; height:0; right:-100px; /* 因为宽,高度为0,所以超出的部分被隐藏掉 */ overflow:hidden; } li:hover .six { width:700px; height:60px; background:rgb(128,158,247); } .seven { width:700px; height:0; left:-600px; /* 此处定义 bottom 是为了改变起始位置从底部60px位置开始变高 */ bottom:-60px; overflow:hidden; } li:hover .seven { height:60px; background:rgb(245,120,141); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>二级导航栏效果多样式-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:css实现二级导航栏
简单的写了几个,配合住伪元素的话,还可以写更多酷炫的效果
定位提示框效果
纯CSS翻牌图片特效
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
766
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值