ブートストラップのドロップダウンメニューのホバーに関するページの説明

Question

リンク上をホバリングしたときに横の列に小さな説明があるドロップダウンメニューの機能を作成するにはどうすればよいですか？それは純粋な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--> 

Answer 1

あなたは後に通常Bootstrap TooltipまたはBootstrap Popoverを使用して提供されている機能。どちらも完全にstyle - 可能でカスタマイズ可能です。それに、彼らはモバイルフレンドリーです（答えの終わりにsidenote（s）を見てください）。

また、このようなものを使用することもできます。あなたは（説明のいずれかがそれを必要とするのに十分な大きさである場合）、スクロールバーなしで記述を収まるほど大きな値にあなたの.columns-2>.col-xs-6のmin-heightを調整する必要がありますのでご注意ください。

.dropdown-menu.columns-2 { 
 
\t min-width: 400px; 
 
} 
 
.dropdown-menu li a { 
 
\t padding: 5px 15px; 
 
\t font-weight: 300; 
 
} 
 
.multi-column-dropdown { 
 
\t list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.multi-column-dropdown li a { 
 
\t display: block; 
 
\t clear: both; 
 
\t line-height: 1.428571429; 
 
\t color: #333; 
 
\t 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の2つのバージョンをロードしています。それは大きなNO NOです。
• 親の中に.rowを使用すると、margin: 0 15px;となります（.containerなど）。これにより、行に不要な水平スクロールバーが生成されます。ブートストラップのマークアップに細心の注意を払う。あなたのUIアーキテクチャ上の

追記：今日のインターネットユーザーの半分以上

• 詳細は、タッチデバイスから閲覧されています。彼らはどのようにしてhoverとなっているのですか？