用bootstrap和css3制作按钮式下拉菜单
2024-09-02 22:42:10
利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式
<style>
.myBtnStyle .dropdown-menu span{
margin:5px;
}
.myBtnStyle .dropdown-menu {
animation: 0.5s linear fadeIn; //css3新特性animation
}
@keyframes fadeIn { //通过keyframes规则创建动画特效,原理为将一套css样式逐渐转化成另一种css样式
0%{opacity:0;transform: translateY(-20);}
100%{opacity: 1;transform: translateY(0);}
}
</style>
</head>
<body>
<div class="container">
<div class="dropdown myBtnStyle open">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
explotion
</button>
<ul class="dropdown-menu">
<li><a href="#">
<span class="glyphicon glyphicon-headphones"></span> //span标签包裹的字体图标
moving</a></li>
<li><a href="#">
<span class="glyphicon glyphicon-headphones"></span>
raging</a></li>
<li><a href="#">
<span class="glyphicon glyphicon-headphones"></span>
daniangmener</a></li>
<li><a href="#">
<span class="glyphicon glyphicon-headphones"></span>
holy</a></li>
</ul>
</div>
</div>
</body>
最新文章
- [源码]String StringBuffer StringBudlider(1String部分)
- spring启动component-scan类扫描加载过程---源码分析
- [转]SIFT特征提取分析
- DBA一天干的活
- 在线教育服务:http://www.ablesky.com/
- 【原】Redis-LRU缓存
- HW6.23
- WPF——绑定数据库数据(Listview)
- Windows消息传递机制具体解释
- Linux RAR 安装和使用详细说明
- java 导出blob图片到excel
- 【git】git hello world
- 【20190305】CSS-响应式图片:srcset+sizes,picture,svg
- Python 死锁现象
- 爬虫 写入文件时遇到gbk编码错误
- PAT-Top1001. Battle Over Cities - Hard Version (35)
- [NOIp2012提高组]同余方程
- python的list和tuple
- LeetCode141:Linked List Cycle
- Linux less/more命令详解