導航欄多選

所以我擺弄我在http://cssmenumaker.com/menu/responsive-flat-menu上找到的這個設計，但是當瀏覽器中的導航欄縮小時我遇到了一些問題。因此，瀏覽器的全部寬度看起來像下面的img 1 ....當縮小時，它會變成一個漢堡包菜單，如圖2中所示的下拉菜單。問題在於它重複了，因爲我添加了一個額外的li標籤來添加'超級真棒菜單'。所以，我的問題是如何去除img 2中的額外重複（它應該像img 1一樣保留全部寬度）。導航欄多選

我嘗試了一些簡單的removeclasses，但他們沒有工作。我相信這很簡單，我只是看不到它。

我堅持的代碼在這裏（因爲不管是什麼原因，它是一個巨大的痛苦縮進jQuery的放在這裏） http://codepen.io/anon/pen/NxZLKo

<body> 
<div id="wrapper"> 
    <header> 
     <nav>  
      <div id='cssmenu'> 
       <ul> 
        <li><a href='#' class="current">Super Awesome Menu</a></li> 
        <li><a href='#'>Home</a></li> 
        <li class='active'><a href='#'>About</a></li> 
        <li><a href='#'>Activities</a></li> 
        <li><a href='#'>Resources</a></li> 
        <li><a href='#'>Contact</a></li> 
        <li><a href='#'>Join</a></li> 
       </ul> 
      </div> <!--end cssmenu--> 
     </nav> <!--end nav--> 
    </header> <!--end header--> 
</div> <!--end wrapper-->

來源

2016-02-22 user2501783

你想添加一個標誌？ –

讓我試着澄清一下，因爲我可能會感到困惑。我希望它看起來像這樣http://imgur.com/a/y28wo超級真棒菜單應該始終顯示。 – user2501783

爲了清楚起見，第二張圖片顯示瀏覽器寬度調整大小 – user2501783

你可以做到這一點使用媒體查詢。把這行代碼放在你的CSS中，你很好走。

@media screen and (max-width: 926px) { #cssmenu ul.open li:nth-child(1){ display:none !important; } }

它會隱藏在這種情況下，第一個孩子超大型真棒，如果你這樣做li:nth-child(2)它會隱藏主頁等

來源

2016-02-22 13:57:52

修復它的YUP。我感到難過，拉賈說幾乎同樣的事情，但你的作品。對不起Raja :(感謝您的幫助：D – user2501783

我覺得有沒有額外的鏈接「超級真棒菜單」

這只是您的菜單的名稱，如您在代碼片段的JavaScript部分中配置5 & 73。這是你的title參數

$("#cssmenu").menumaker({ 
    title: "Super Awesome Menu", 
    format: "multitoggle" 
});

就讓它空或另找名字！

來源

2016-02-22 14:00:04 Delphine

這是真的，但如果我刪除導航欄標題變空時，它正在縮小。我正在尋找這個：http://imgur.com/KUe0DmL – user2501783

你想要你的第一個鏈接總是顯示那是它？ – Delphine

如果你認爲'超級真棒菜單'，那麼是的。如圖所示（第二張圖片顯示瀏覽器窗口寬度降低到漢堡包風格）imgur.com/a/y28wo – user2501783

試試這個CSS

@media屏幕（最大寬度：爲680像素）{#cssmenu ul.open 李：首先，孩子{ 顯示：無重要; }}

來源

2016-02-22 14:09:09

沒有爲我工作...但我不知道我把它放在正確的地方說實話 – user2501783

您調整了窗口<680px？ http://codepen.io/anon/pen/jWjvjr –

回答

相關問題