फेसबुक संदेश ड्रॉपडाउन जैसे बूटस्ट्रैप अधिसूचना पैनल

Question

मैं बूटस्ट्रैप का उपयोग कर एक संदेश ड्रॉपडाउन दिखाना चाहता हूं। यह फेसबुक में आने वाले संदेशों की बूंदों के समान ही है (पूर्ण पृष्ठ दृश्य नहीं, बल्कि केवल ड्रॉपडाउन)। क्या कोई ऐसा करने के लिए नमूना मार्कअप साझा कर सकता है।

Answer 1

आप बूटस्ट्रैप 3 उपयोग कर रहे हैं आप देख सकते हैं और उदाहरण के यहाँ काम: http://infinite-woodland-5276.herokuapp.com/index.html

कार्य उदाहरण: http://codepen.io/igcorreia/pen/htdxl

एचटीएमएल

<div class="container"> 
    <div class="row"> 

     <p class="lead">Roll over the button on the left to see a dropdown</p> 
     Rollover dropdown: 
     <!-- Our Special dropdown has class show-on-hover --> 
     <div class="btn-group show-on-hover"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
      Action <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> 
      </ul> 
     </div> 

     Regular dropdown: 
     <!-- Single button --> 
     <div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
      Action <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> 
      </ul> 
     </div> 
    </div> 

सीएसएस

body{ 
    padding:10px; 
} 

.show-on-hover:hover > ul.dropdown-menu { 
    display: block;  
}