文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap下拉菜单中悬停的页面描述

问Bootstrap下拉菜单中悬停的页面描述
EN

Stack Overflow用户

提问于 2016-03-29 09:15:55

回答 1查看 300关注 0票数 0

如何创建下拉菜单的功能，当在链接上悬停时，下拉菜单在侧列中有一个小的描述？它能用纯CSS来实现吗？

http://codepen.io/anon/pen/aNyORv

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
    </div>
    <!--/.navbar-header-->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>
                <ul class="dropdown-menu multi-column columns-2">
                    <div class="row">
                        <div class="col-sm-6">
                            <ul class="multi-column-dropdown">
                                <li><a href="#">title 1</a></li>
                                <li><a href="#">title 2</a></li>
                            </ul>
                        </div>
                        <div class="col-sm-6">
                            <ul class="multi-column-dropdown">
                                <li>This is visible by default or when hovering over Title 1</li>
                                <li>This is hidden but visible when hovering over Title 2</li>
                            </ul>
                        </div>
                    </div>
                </ul>
            </li>
        </ul>
    </div>
    <!--/.navbar-collapse-->
</nav>
<!--/.navbar-->

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-29 09:44:56

您所追求的功能通常使用引导工具提示或自举波波弗提供。两者都是完全style-able和可定制的。此外，它们是移动友好的(见答案末尾的sidenote)。

或者，您可以使用类似的东西。请注意，您必须将min-height的.columns-2>.col-xs-6调整为一个足够大的值，以适应没有滚动条的描述(如果其中任何描述足够大到需要它)：

.dropdown-menu.columns-2 {
	min-width: 400px;
}
.dropdown-menu li a {
	padding: 5px 15px;
	font-weight: 300;
}
.multi-column-dropdown {
	list-style: none;
  margin: 0px;
  padding: 0px;
}
.multi-column-dropdown li a {
	display: block;
	clear: both;
	line-height: 1.428571429;
	color: #333;
	white-space: normal;
}
 

.multi-column-dropdown .columns-2 {
  position: relative;
}
.multi-column-dropdown li a {
  width: 100%;
  height: 100%;
  padding: 7px 15px;
}
.columns-2>.col-xs-6 {
  /* adjust this to accomodate the height of your descriptions on all screens */
  min-height: 100px;
  
}
.multi-column-dropdown li:first-child .li-description {
  display: inline-block;
}
.multi-column-dropdown li .li-description {
  display: none;
  position: absolute;
  width: 100%;
  left: 100%;
  top: 0;
  padding: 7px 15px;
  background-color: #FBFBFB;
}
.multi-column-dropdown li:hover .li-description {
  display: inline-block;
}
@media(min-width: 768px) {
  .multi-column-dropdown li .li-description {
    background-color: white;
  }
  .columns-2>.col-xs-6 {
  /* adjust this to accomodate the height of your descriptions on all screens */
     min-height: 160px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
    </div>
    <!--/.navbar-header-->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>
                <ul class="dropdown-menu multi-column columns-2">
                    
                        <div class="col-xs-6">
                            <ul class="multi-column-dropdown">
                                <li><a href="#">title 1</a><div class="li-description">This is visible by default or when hovering over Title 1</div></li>
                                <li><a href="#">title 2</a><div class="li-description">This is hidden but visible when hovering over Title 2. It is a longer description and we need <code>min-height</code> on <code>.columns-2>.col-xs-6</code> so it doesn't create a scrollbar...</div></li>
                            </ul>
                        </div>
                      <div class="col-xs-6">&nbsp;</div>
                        
                    
                </ul>
            </li>
        </ul>
    </div>
    <!--/.navbar-collapse-->
</nav>
<!--/.navbar-->

你的书记簿上的旁白：

您正在加载两个版本的jQuery。这是一个大的NO NO。
您应该在带有.row的父级(如.container )中使用.container。这将在您的行上生成不需要的水平滚动条。更密切地注意Bootstrap的标记。

在您的UI体系结构上的侧翼：

今天，超过一半的互联网用户是通过触摸设备进行浏览的。他们应该如何hover并看到描述呢？

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36280090

复制

相似问题

问Bootstrap下拉菜单中悬停的页面描述
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap下拉菜单中悬停的页面描述EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap下拉菜单中悬停的页面描述
EN