标签归档:下拉菜单

样式独特的纯CSS3自定义下拉菜单

不久前,我们给大家分享过一个jQuery自定义样式下拉框 支持分组、多选和搜索,应该说还是挺实用的。这次我们要介绍的也是一个下拉菜单,基于CSS3实现,它的特点是主菜单有一层阴影,这样整个下拉菜单看起来就会有3D立体的视觉效果,是不是很棒?

css3-styled-dropdown-menu

在线演示源码下载

纯CSS3下拉菜单导航 子菜单多种展开动画

这是一款非常漂亮的纯CSS3下拉菜单导航,这款菜单有两大亮点,一个是唯美的全屏背景图,非常适合个性化的个人博客使用。另外一个特点是子菜单拥有多种展开动画方式,有简单的淡入淡出,也有炫酷的折叠式展开。并且这款菜单时纯CSS实现,使用起来相当方便。

pure-css3-dropdown-menu-animation

在线演示源码下载

jQuery Bootstrap响应式下拉菜单

今天我们要来分享一个基于jQuery和Bootstrap的响应式下拉菜单,这款菜单的特点就是菜单项可以有二级下拉菜单,而且当页面宽度比较窄时菜单项将集中在一个下拉菜单下,非常适合移动网站。由于是基于jQuery的,兼容性也还可以。

jquery-bootstrap-dropdown-menu

接下来我们一起看看实现这款下拉菜单的源代码,代码主要由HTML、CSS以及jQuery组成。

HTML代码:

<nav class="navbar navbar-default equinav" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar">&lt[......]

阅读全文>>