導航欄響應菜單

我正在與Twitter的引導CSS菜單。對於移動版本，我想將一些圖標重新添加到文本中。我想在768px的斷點處（當出現漢堡包圖標時）執行此操作。導航欄響應菜單

菜單HTML

<div class="navbar-collapse collapse"> 
    <nav role="navigation" class="navigation"> 
     <ul class="menu nav navbar-nav" style="margin-left: 95.5px; margin-right: 0px;"> 
      <li class="first leaf active" id="homeLink"><a href="/"><i class="fa fa-home fa-lg"></i></a></li> 
      <li class="leaf"><a href="/link">item</a></li> 
      <li class="leaf"><a href="/link">item</a></li> 
      <li class="last leaf" id="contactLink"><a href="/contact">Contact</a></li> 
     </ul> 
    </nav> 
</div>

的Javascript

if(jQuery("body").prop("clientWidth") > 768){ 
    jQuery("#contactLink").html('<a href="/contact"><i class="fa fa-envelope fa-lg"></i></a>'); 
}

但寬度是不是在引導CSS中使用的實際寬度。我想在出現漢堡包圖標時更改它。我也試過窗口/身體innerWidth（解決方案搜索網後）..沒有工作..

現在我試圖讓菜單的「狀態」。但到目前爲止，我無法找到改變..

有沒有一種方法（在JS/JQuery的），以獲得菜單的狀態？或者一種方法來解決寬度（不添加額外的HTML ...）？

來源

2016-08-01 Finduilas

-1

試試您的jQuery的邏輯轉換成媒體查詢像（以下給出的文檔片斷僅僅是一個例子，你需要更換他們根據你的需要），

@media (max-width: 768px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
}

，然後嘗試。

來源

2016-08-01 10:32:36

添加HTML元素是不可能在CSS ..？ – Finduilas

您可以將您的HTML元素引用爲CSS中的ID選擇器。（使用＃符號） –

我知道如何選擇。但我怎麼能知道菜單（引導）.. – Finduilas

如果你能得到這與CSS媒體查詢工作，這很可能是去了解它的最佳方式，但如果你不能這樣做，設置文本而不是圖標，你也許可以試一下沿着這些線JS：

if ($(window).width() < 739) {  
    //code to set the html to text 
} 
else { 
    //code with icon 
}

來源

2016-08-01 10:38:57 Rixcy

導航欄響應菜單

回答

相關問題