用bootstrap和css3制作按钮式下拉菜单
利用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>
用bootstrap和css3制作按钮式下拉菜单的更多相关文章
- Bootstrap按钮式下拉菜单
前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单
下拉菜单 dropdown 对齐方式: .dropdown-menu-right .dropdown-menu-left <div class="container" ...
- Bootstrap下拉菜单、按钮式下拉菜单
1. 概述 下拉菜单使用频率也是比较高的,比较常见的使用场景是在导航菜单栏,某个主菜单含有下拉的子菜单. Bootstrap为下拉菜单提供了两种实现方式,即普通的下拉菜单还有按钮式的下拉菜单.我们先看 ...
- 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)
原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...
- Bootstrap历练实例:带有下拉菜单的标签和胶囊导航
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap3系列:按钮式下拉菜单
1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- 基于CSS3金属风格下拉菜单
基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/
随机推荐
- [译]理解 SwiftUI 里的属性装饰器@State, @Binding, @ObservedObject, @EnvironmentObject
原文地址:https://mecid.github.io/2019/06/12/understanding-property-wrappers-in-swiftui/ @States 通过使用 @St ...
- ReactiveObjC(RAC)的使用汇总
RAC 指的就是 RactiveCocoa ,是 Github 的一个开源框架,能够帮我们提供大量方便的事件处理方案,让我们更简单粗暴地去处理事件,现在分为 ReactiveObjC 和 Reacti ...
- Robot Framework 源码阅读 day1 __main__.py
robot文件夹下的__main__.py函数 是使用module运行时的入口函数: import sys # Allows running as a script. __name__ check n ...
- xml转dict
xml转dict 最开始的时候一直是按格式比较严谨的XML格式进行的转换,所以一般只需要考虑两种情况就可以了,即各个节点或者子节点全相同或者全不同,全相同按list处理,全不同按dict处理,这么一想 ...
- alert(1) to win 11
- struts2+ajax 前后端传值
摘要: 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的数据,并转换为json类型模式数据 3.配置struts.xml文件 4.页面脚本接受并处理数 ...
- TPS、QPS和系统吞吐量的区别和理解
参考:https://blog.csdn.net/u010889616/article/details/83245695 一.QPS/TPSQPS:Queries Per Second意思是“每秒查询 ...
- linux运维、架构之路-linux用户管理
一. linux系统用户分类 1.分类 ①超级用户:root,UID为0 ②普通用户:UID是500-65535的用户 ③虚拟用户:UID在1-499,一般不能登录,满足文件或服务启动的需要,/sbi ...
- iOS多媒体总结&进入后台播放音乐
1. 播放mp3需要导入框架,AVFoundation支持音频文件(.caf..aif..wav..wmv和.mp3)的播放. #import <AVFoundation/AVFoundatio ...
- Python3解leetcode Path Sum III
问题描述: You are given a binary tree in which each node contains an integer value. Find the number of p ...