导航栏响应菜单

我正在与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

导航栏响应菜单

回答

相关问题