如何在悬停而不是单击时制作 Twitter Bootstrap 菜单下拉菜单 [英] How to make Twitter Bootstrap menu dropdown on hover rather than click

问题描述

我想让我的 Bootstrap 菜单在悬停时自动下拉，而不必单击菜单标题.我还想去掉菜单标题旁边的小箭头.

解决方案

我基于最新的 (v2.0.2) Bootstrap 框架创建了一个纯悬停下拉菜单，该框架支持多个子菜单，并认为我会将其发布给未来用户:

body {填充顶部:60px；填充底部:40px；}.sidebar-nav {填充:9px 0;}.dropdown-menu .sub-menu {左:100%；位置:绝对；顶部:0；可见性:隐藏；边距顶部:-1px；}.dropdown-menu li:hover .sub-menu {可见性:可见；}.dropdown:悬停 .dropdown-menu {显示:块；}.nav-tabs .dropdown-menu,.nav-pills .dropdown-menu,.navbar .dropdown-menu {边距顶部:0；}.navbar .sub-menu:before {边框底部:7px 实心透明；左边界:无；右边框:7px 实心 rgba(0, 0, 0, 0.2);边框顶部:7px 实心透明；左:-7px；顶部:10px；}.navbar .sub-menu:after {边框顶部:6px 实心透明；左边界:无；右边框:6px 实心 #fff；边框底部:6px 实心透明；左:10px；顶部:11px；左:-6px；}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="样式表"/><div class="navbar navbar-fixed-top"><div class="navbar-inner"><div class="container-fluid"><a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a href="#" class="brand">项目名称</a><div class="nav-collapse"><ul class="nav"><li class="active"><a href="#">首页</a></li><li><a href="#">链接</a></li><li><a href="#">链接</a></li><li><a href="#">链接</a></li><li class="下拉菜单"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a><ul class="下拉菜单子菜单"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li class="nav-header">Nav header</li><li><a href="#">分隔链接</a></li><li><a href="#">一个单独的链接</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li class="nav-header">Nav header</li><li><a href="#">分隔链接</a></li><li><a href="#">一个单独的链接</a></li><form action="" class="navbar-search pull-left"><input type="text" placeholder="Search" class="search-query span2"></表单><ul class="nav pull-right"><li><a href="#">链接</a></li><li class="divider-vertical"></li><li class="下拉菜单"><a class="#" href="#">Menu</a>

<!--/.nav-collapse -->

<小时><ul class="nav nav-pills"><li class="active"><a href="#">常规链接</a></li><li class="下拉菜单"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a><ul class="下拉菜单" id="menu1"><li><a href="#">2级菜单<i class="icon-arrow-right"></i></a><ul class="下拉菜单子菜单"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li class="nav-header">Nav header</li><li><a href="#">分隔链接</a></li><li><a href="#">一个单独的链接</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li><li class="下拉菜单"><a href="#">菜单</a><li class="下拉菜单"><a href="#">菜单</a>

演示

I'd like to have my Bootstrap menu automatically drop down on hover, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.

解决方案

I created a pure on hover dropdown menu based on the latest (v2.0.2) Bootstrap framework that has support for multiple submenus and thought I'd post it for future users:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

Demo

这篇关于如何在悬停而不是单击时制作 Twitter Bootstrap 菜单下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！