如何添加一個自適應選項卡菜單和收縮li菜單項Bootstrap？

我的網站有建立在twitter引導上的巨大下拉菜單。如何添加一個自適應選項卡菜單和收縮li菜單項Bootstrap？

我試圖添加一個標籤菜單，這不是引導程序的建立，但響應，我的大型下拉項目。

但是，它不適合那裏，它包裹整個切換。

這是我如何添加一個完整寬度的大型下拉菜單。

<li class="dropdown full-width"><a href="#" class="dropdown-toggle" data-toggle="dropdown">TEST<b 
     class="icon-angle-down"></b></a> 
</li>

在這裏，您可以VIEW演示頁

當你將鼠標懸停上的導航欄「搜索聯絡」項目，就會切換全寬，這正是我想要的。因爲我與Twitter的引導建造它

enter image description here

但是，請檢查項目'TEST'。稍後我添加的腳本不是構建的twitter引導程序，而是響應式的，它會打破導航欄並使項目的全角寬度如下圖所示。

enter image description here

我無法找到任何解決方案，直至現在。

我想要的是，它應該和'ILETISIM'項目的工作方式一樣。

我將用新的菜單替換該菜單。

來源

2013-07-23 SNaRe

裹在ZOZO一個div標籤，並與像這樣給它100％：

<div class="tab-wrapper dropdown-menu"> 
zozo tabs here.... 
</div>

問題的其餘部分與嘰嘰喳喳導航菜單。子菜單顯示在ul內部的懸停中，並且您在div內添加了zozo選項卡。

/*hide by default*/ 
.tab-wrapper{ 
    display: none; 
    width: 980px; 
    left: -492.5px; 
} 
/*display on hover sub menu*/ 
.navbar ul.nav li:hover > .tab-wrapper { 
    display: block; 
}

現在，由於整個元素顯示設置爲none，所以現在會出現一些默認選項卡的問題。

更新：添加類tab-wrapper並替換了css樣式。

更新2 我意識到你的菜單是絕對定位的。所以添加了相同的類到div下拉菜單，這將使它絕對從你的風格，並添加了更多的風格。

更新3 移動下拉菜單顯示出來，因爲它的元件或它的容器被隱藏與顯示沒有。我們在可見之後使用刷新方法。

$(document).ready(function() { 
     /*give your li id of test and it fire on mouseover to refresh the tabs*/ 
     $("#test").on("mouseover", function() { 
      $("#tabbed-nav-02").data('zozoTabs').refresh(); 
     }); 
    });

你也可以添加標籤zozo標籤和zozo-ui到你的stackoverflow後？

來源

2013-07-23 09:25:05 FariDesign

我給了它，但它不起作用。我試圖實現的是，當我的光標在'測試'時，切換開關應該打開，您的Zozo標籤，現在您可以在網站上看到，它默認切換。當我的鼠標結束「測試」時它將打開。 – SNaRe

我檢查了它，它被隱藏了。現在它不切換。當我的光標在'TEST'上時它會切換。只要檢查項目'ILETISIM'它會表現相同。 – SNaRe

現在它正確切換。但是，您的菜單就像在手機中一樣。它的行爲就像這個區域更小，因爲它是負責任的而縮小了內容。必須有一個簡單的解決方案。 – SNaRe

如何添加一個自適應選項卡菜單和收縮li菜單項Bootstrap？

回答

相關問題