2013-06-06 18 views
5

विभाजित मैं एक नेविगेशन बार है और मैं एक कैरट मेनू ड्रॉपडाउन के बगल में है।ट्विटर बूटस्ट्रैप लटकती

वर्तमान कोड में, उपयोगकर्ता Operations पाठ या कैरट क्लिक करता है तो लटकती मेनू खोला जाता है। लेकिन मैं इस की जरूरत है:

  • उपयोगकर्ता Operations लिंक पर क्लिक करता है, मैं उपयोगकर्ता मेरी /operations/ पृष्ठ पर जाने के लिए चाहते हैं।
  • उपयोगकर्ता कैरट के लिए क्लिक करता है, लटकती मेनू दिखाई जाएगी। यदि उपयोगकर्ता ड्रॉपडाउन मेनू के तत्वों में से किसी एक पर क्लिक करता है, तो उपयोगकर्ता को संबंधित पृष्ठ पर रीडायरेक्ट कर दिया जाएगा।

फिडल: http://jsfiddle.net/mavent/UtDqm/2/

<div class="navbar navbar-inverse"> 
    <li class="dropdown" id="myTools"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#myTools"> 
     Operations 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="/mypage1/">MyPage 1</a></li> 
     <li><a href="/mypage2/">MyPage 2</a></li> 
    </ul> 
    </li> 
</div> 

ट्विटर बूटस्ट्रैप प्रलेखन में यह पाया गया है विभाजन बटन ड्रॉपडाउन here कैसे बनाते हैं। मैं बटन का उपयोग नहीं करना चाहता। बटन का उपयोग किए बिना विभाजन व्यवहार करना संभव है। बस लिंक के साथ?

+1

आप क्यों नहीं बस 'लटकती-toggle' में कैरट लपेट और संचालन पाठ करने के लिए एक सामान्य' href' नहीं जोड़ते? [यहां] देखें (http://jsfiddle.net/UtDqm/5/) –

+0

@ जोशुआएम स्टीवी के उत्तर की तरह ही व्यवहार। यह काम करता है लेकिन कैरेट नेविबार में अगली पंक्ति में जाता है। [छवि लिंक] (http://img571.imageshack.us/img571/4656/oper1.jpg) – trante

+0

आप 'A' शैली होना निर्धारित है' प्रदर्शन: block'? यही सब मैं, के बारे में सोच सकते हैं के रूप में यह [। मेरे लिए ठीक काम करता है] (http://i.imgur.com/muE2sMI.png) –

उत्तर

8

नहीं तुम सिर्फ विभाजित किया जा सका संचालन एक नया <a> टैग में लिंक?

<div class="navbar navbar-inverse"> 
    <li class="dropdown" id="myTools"> 
    <a href="/operations/" style="display:inline-block;padding-right:0px;">Operations</a> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#myTools" style="display:inline-block;padding-left:0px;"> 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="/mypage1/">MyPage 1</a></li> 
     <li><a href="/mypage2/">MyPage 2</a></li> 
    </ul> 
    </li> 
</div> 
+0

यह काम करता है लेकिन कैरेट नेविबार में अगली पंक्ति में जाता है। [छवि] (http://img571.imageshack.us/img571/4656/oper1.jpg) – trante

+0

मेरे संपादन देखें, ओवरराइड शैली काम करता है। –

+0

यह बहुत अच्छा काम करता है, धन्यवाद :) – trante

3

क्या आप ऐसा कुछ ढूंढ रहे हैं?

<div class="btn-group"> 
    <a href="http://google.com" target="_blank" class="btn btn-link">Action</a> 
    <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="/mypage1/">MyPage 1</a></li> 
     <li><a href="/mypage2/">MyPage 2</a></li> 
    </ul> 
</div> 

http://jsfiddle.net/UtDqm/6/

संबंधित मुद्दे