響應式jQuery漢堡包圖標點擊「消失」

我從頭開始製作第一個響應式菜單。我的工具是jQuery，HTML和CSS。響應式jQuery漢堡包圖標點擊「消失」

的問題是，一旦你點擊漢堡包菜單圖標，它「消失」。檢查源代碼告訴我們一個不同的故事：漢堡包的圖標仍然存在，只是移動到目前爲止，它不再可見。

我不確定爲什麼圖標首先在移動，或者我可能可以修復它。一如既往，感謝您的幫助。

HTML：

<div class="header"> 
    <!-- Container --> 
    <div class="headerContainer container"> 
     <!-- Logo --> 
     <div class="logo col-md-3 alpha" style=" 
    width: 206px; 
    margin-right: 0; 
"> <a href="/"><img id="p_lt_Logo_Logo_ucEditableImage_imgImage" src="http://placehold.it/206x63" alt=""></a> 

     </div> 
     <!--/ End Logo --> 
     <!-- Navigation --> 
     <div class="navigation col-md-9 omega"> 
      <div class="mobile-menu"> 
       <img src="https://cdn4.iconfinder.com/data/icons/miu/22/editor_list_view_hambuger_menu-48.png" alt="menu" class="pull-right hamburger"> 
      </div> 
      <ul id="menuElem" class="CMSListMenuUL" style="display: none;"> 
       <li class="CMSListMenuHighlightedLI"> <a class="CMSListMenuLinkHighlighted" href="/">Home</a> 

       </li> 
       <li class="CMSListMenuLI"> <a class="CMSListMenuLink" href="/About">About</a> 

       </li> 
       <li class="CMSListMenuLI"> <a class="CMSListMenuLink" href="/Contact">Contact</a> 

       </li> 
      </ul> 
     </div> 
     <!--/ End Navigation --> 
    </div> 
    <!--/ End Container --> 
</div>

CSS

ol, ul { 
     list-style: none; 
    } 
    .headerContainer { 
     position: relative; 
    } 
    .mobile-menu { 
     display:block; 
     position: absolute; 
     bottom: 30px; 
     right: 5px; 
    } 
    .hamburger:hover { 
     -webkit-filter: drop-shadow(3px 3px 3px #3C3C3C); 
     filter: drop-shadow(3px 3px 3px #3C3C3C); 
    } 
    ul.navigation { 
     height: auto; 
    } 
    .navigation li { 
     float: none; 
     width: 100%; 
     margin: 0; 
    } 
    ul.navigation a { 
     line-height: 40px; 
    } 
    .navigation ul { 
     float: none; 
     position: relative; 
     background: url("http://mcbeev.com/MBV/media/layout/background_header.jpg") repeat-x; 
    } 
    .navigation { 
     width: 100%; 
    } 
    .headerContainer { 
     background-color: #23518f; 
    } 
}

jQuery的

jQuery(function ($) { 
    $('.mobile-menu').click(function() { 
     $('#menuElem').toggle(); 
    }); 
});

來源

2014-05-19 LemonFlip

它並沒有消失，只是在標題欄下方重新定位並被列表所覆蓋。您的HTML結構prob需要一些幫助。我會把'漢堡包'和徽標一起放在頂部'標題欄'中，並將內容（UL）放在其下面的一個單獨的DIV中。 –

聲明前值，而不是使用機器人tom

.mobile-menu { 
    display:block; 
    position: absolute; 
    right: 5px; 
    top: 18px; 
}

來源

2014-05-19 22:13:04

謝謝，這個作品完美。 – LemonFlip

響應式jQuery漢堡包圖標點擊「消失」

回答

相關問題