用bootstrap和css3制作按钮式下拉菜单

程序员红敏技术 2022年11月7日

0 收藏 620 点赞 566 浏览 872 个字

利用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="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
          <span class="glyphicon glyphicon-headphones"></span>   //span标签包裹的字体图标
          moving</a></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
          <span class="glyphicon glyphicon-headphones"></span>
          raging</a></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
          <span class="glyphicon glyphicon-headphones"></span>
          daniangmener</a></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
          <span class="glyphicon glyphicon-headphones"></span>
          holy</a></li>
      </ul>
    </div>
  </div>
</body>