利用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制作按钮式下拉菜单的更多相关文章

  1. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  2. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  3. 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

    下拉菜单 dropdown 对齐方式: .dropdown-menu-right     .dropdown-menu-left <div class="container" ...

  4. Bootstrap下拉菜单、按钮式下拉菜单

    1. 概述 下拉菜单使用频率也是比较高的,比较常见的使用场景是在导航菜单栏,某个主菜单含有下拉的子菜单. Bootstrap为下拉菜单提供了两种实现方式,即普通的下拉菜单还有按钮式的下拉菜单.我们先看 ...

  5. 巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  6. Bootstrap历练实例：带有下拉菜单的标签和胶囊导航

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Bootstrap3系列：按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  8. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  9. 基于CSS3金属风格下拉菜单

    基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/

随机推荐

  1. ajaxSubmit 实现图片上传 SSM maven

    文件上传依赖: <!-- 文件上传组件 --> <dependency> <groupId>commons-fileupload</groupId> & ...

  2. 行人重识别(ReID) ——基于MGN-pytorch进行可视化展示

    下载MGN-pytorch:https://github.com/seathiefwang/MGN-pytorch 下载Market1501数据集:http://www.liangzheng.org/ ...

  3. Linux性能优化从入门到实战：17 网络篇：网络基础

    网络模型 为了解决网络互联中异构设备的兼容性问题,并解耦复杂的网络包处理流程,国际标准化组织制定了开放式系统互联通信参考模型(Open System Interconnection Reference ...

  4. 关于BFC的总结

    虽然工作这么多年了,但是如果让我直接解释一下什么是BFC的时候,还是感觉有点不知道怎么准确的表达,下面就翻翻文档,总结一下,加深一下认识吧.大家也可以关注我的GitHub后续的更新 1.BFC的基本概 ...

  5. Redis基础系列-安装启动

    安装 ①将Redis 的tar 包上传到opt 目录②解压缩③安装gcc 环境我们需要将源码编译后再安装,因此需要安装c 语言的编译环境!不能直接make! 可以上网,yum install –y g ...

  6. Test 3.27 T2 旅行

    Description FGD 想从成都去上海旅游.在旅途中他希望经过一些城市并在那里欣赏风景,品尝风味小吃或者做其他的有趣的事情.经过这些城市的顺序不是完全随意的,比如说 FGD 不希望在刚吃过一顿 ...

  7. 【leetcode】1042. Flower Planting With No Adjacent

    题目如下: You have N gardens, labelled 1 to N.  In each garden, you want to plant one of 4 types of flow ...

  8. LeetCode--052--N皇后II(java)

    n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回 n 皇后不同的解决方案的数量. 示例: 输入 ...

  9. ES6基本用法

    es6是JS(JavaScript)的下一个版本. 新增了let命令,用来声明变量.变量在第一个花括号内有用,先声明后引用.不允许重复声明.存在暂时性死区. const声明一个只读的常量.一旦声明,常 ...

  10. BZOJ 3879: SvT 虚树 + 后缀自动机

    Description (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个询问,我们给出若干个后缀(以其在S中出现的起始 ...