这是天兴工作室自己折腾的一个纯html+css写的下拉导航动画,代码如下。
html部分:
<div class="nav"> <ul class="clearfix"> <li><a href="#">自定义</a></li> <li><a href="#">自定义</a></li> <li> <a href="#">自定义</a> <ul> <li><a href="#">自定义</a></li> <li><a href="#">自定义</a></li> <li><a href="#">自定义自定义</a></li> </ul> </li> <li><a href="#">自定义</a></li> <li> <a href="#">自定义</a> <ul> <li><a href="#">自定义</a></li> <li><a href="#">自定义</a></li> <li><a href="#">自定义自定义</a></li> </ul> </li> <li><a href="#">自定义</a></li> <li><a href="#">自定义</a></li> </ul> </div>
css部分:
.nav{background-color:#404553;} .nav li{position:relative;float:left;} .nav li a{display:block;line-height:40px;padding:0 20px;color:#fff;} .nav li ul{position:absolute;left:-20px;top:60px;background-color:#404553;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;z-index: 0;opacity: 0;visibility: hidden} .nav li ul li a{white-space: nowrap;line-height:30px;} .nav li:hover ul{top:40px;padding:6px 0;opacity:1;visibility:visible;}
动画效果大概是鼠标放上去之后,从下往上慢慢提起来。比较重要是属性是“visibility”,才发现visibility可以这么用...
相关推荐
- zblog下拉导航之:抽屉式下拉导航09-09
- zblog模板实现下拉导航功能所需的代码示范10-17
- zblog如何做下拉导航?zblogphp下拉导航菜单制作方法03-04
- 转载:导航下拉菜单被底下的幻灯片遮住的解决办法12-04
- 下拉导航菜单被遮住了怎么办?12-13
- 工作记录 做复杂的下拉导航08-17
取消回复欢迎 你 发表评论:
- 最新文章
- 热文排行
- 最多评论
- 1主题的暗黑模式是什么?怎么设置和使用暗黑模式?01-19
- 2zblog判断插件是否安装或者启用的代码介绍01-16
- 3translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 4zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 5zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 6wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 7swiper做导航栏时自动跳转至对应分类的代码12-07
- 8zblogphp自带js框架评论接口大全12-04
- 9wordpress提示"Error establishing a database connection"的解决办法11-10
- 标签聚合
- ×0公务员×1回家×1a520×1手机积分×1仿聚划算×1高端用户×1缩略图调用×1易通卡×1dedecms5.7×1验证码×13G国际长途优惠包×1预付费×1三星 I9228×1首页×1网站头像×1插入视频×1凤凰传奇×1三栏×1网吧×1全球通彩袖卡
最新评论
-
吸料机
已经解决 -
xinling2020.com
我今天在路上还在想我的个人博客要是写到1W文章数量会不会崩,看到这几十万我就放心了。这辈子也不可能有这样的数据~!哈哈 -
访客
不知道百度**收录怎么样 -
天兴工作室
这玩意你看下php手册啊https://www.php.net/manual/zh/function.date.php,m就是星期几 -
风羽
PHP版没有直接的星期几哦,找了好久没有,只能用JS转换~