0
我爲此有一支筆，請儘量減少您的瀏覽器尺寸，以便移動大小，並且您應該看到漢堡菜單。 這個想法是當你點擊這個應該發生的菜單時： - 漢堡圖標變成'x'關閉圖標 - 菜單向下滑動，這是使用css關鍵幀的類'isOPen'（這是在筆上工作！）如何使用CSS漢堡包菜單向上和向下滑動移動菜單
當我點擊「X」關閉圖標是這樣的話：
- 「X」關閉圖標恢復到漢堡菜單
- 菜單向上滑動時（這是有可能通過應用類「isClose '也使用CSS關鍵幀。（不在筆上工作）
我試圖解決的問題：將關閉圖標恢復爲漢堡菜單並向上滑動菜單。
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 global-action-bar">
<div class="global-action-bar-container">
<div class="col-xs-4 col-sm-6">
<!-- CONTACT -->
<a class="visible-xs" href="#"><i class="fa fa-phone"></i> (111) 111-111</a>
<!-- FEEDBACK -->
<div class="hidden-xs">
<a href="#"><i class="fa fa-phone"></i> Contact us (USA) (111) 111-111</a>
<span class="divider"> | </span>
<a href="#"><i class="fa fa-pencil-square-o"></i> Feedback</a>
</div>
</div>
<div class="col-xs-8 col-sm-6 location-language-currency">
<!-- LOCATION -->
<a href="#">Change Location</a>
<img class="location-flag" src="http://placehold.it/24x24" alt="USA">
<!-- LANGUAGE -->
<select class="hidden-xs" id="ddlLanguage" name="SelectedLanguage">
<option selected="selected" value="en-US">English</option>
<option value="es-MX">Español</option>
</select>
<!-- CURRENCY -->
<select class="hidden-xs" id="ddlLanguage" name="SelectedLanguage">
<option selected="selected" value="en-US">USD</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- ========== @END GLOBAL BAR COMPONENT ======== -->
<!-- ========== HEADER NAVIGATION COMPONENT ============= -->
<div class="container-fluid margin-none">
<div class="row header-navigation padding-none">
<div class="col-xs-12">
<div class="header-navigation-container">
<!-- Header Brand -->
<div class="col-xs-4 col-sm-2 header-navigation-logo">
<a href="#">
<img src="http://placehold.it/130x45" alt="our company" height="45">
</a>
</div>
<!-- Header Mobile icons -->
<div class="col-xs-8 visible-xs header-mobile-icons">
<!-- User icon -->
<a href="javascript:void(0)" class="fa fa-user-circle" aria-hidden="true"></a>
<!-- Cart icon & Cart indicator -->
<a href="javascript:void(0)" class="fa fa-shopping-cart" aria-hidden="true"></a>
<span class="circle"></span>
<!-- Mobile Menu Icon -->
<a class="mobile-icon" id="mobileIcon" href="#"><span></span></a>
</div>
<!-- Header Desktop nav -->
<div class="hidden-xs col-sm-10 desktop-nav">
<ul class="margin-none text-right">
<li class="hidden-md hidden-lg">
<a href="javascript:void(0)">Menu <i class="fa fa-angle-down" aria-hidden="true"></i></a>
</li>
<li class="hidden-xs hidden-sm">
<a href="search_refine.html">Products</a>
</li>
<li class="hidden-xs hidden-sm">
<a href="javascript:void(0)">Manufacturers</a>
</li>
<li class="hidden-xs hidden-sm hidden-md">
<a href="javascript:void(0)">Applications</a>
</li>
<li class="hidden-xs hidden-sm hidden-md">
<a href="javascript:void(0)">Services & Tools</a>
</li>
<li class="hidden-xs hidden-sm hidden-md">
<a href="javascript:void(0)">Help</a>
</li>
<li class="hidden-xs hidden-sm hidden-lg">
<a href="javascript:void(0)">More <i class="fa fa-angle-down" aria-hidden="true"></i></a>
</li>
<li class="history-account-login-nav">
<a href="javascript:void(0)">Order History</a>
</li>
<li class="history-account-login-nav">
<a href="javascript:void(0)">Log In</a>
</li>
<li class="padding-none">|</li>
<li>
<a href="javascript:void(0)"><strong>Register</strong></a>
</li>
<li class="history-account-login-nav padding-right-none">
<a href="javascript:void(0)">
<i class="fa fa-shopping-cart fa-lg" alt="Cart"></i><span class="badge badge-cart">455</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- MOBILE MENU -->
<div class="col-xs-12 padding-none margin-none mobile-menu hidden" id="mobileMenu">
<ul>
<li class="active"><a href="javascript:void(0)">Home</a></li>
<li class="active"><a href="javascript:void(0)">Products <i class="fa fa-angle-right fa-lg pull-right"></i></a></li>
<li><a href="javascript:void(0)">NEWEST Products</a></li>
<li><a href="javascript:void(0)">Manufacturers</a></li>
<li><a href="javascript:void(0)">Contact Us</a></li>
</ul>
<div class="col-xs-12 mobile-menu-welcome-logout padding-none margin-none">
<p class="mobile-menu-welcome-user padding-none margin-none">Welcome User</p>
<p class="mobile-menu-log-out padding-none margin-none">
<a href="javascript:void(0)"><i class="fa fa-user-circle"></i> Log Out</a>
</p>
</div>
</div>
<!-- ========== @END HEADER NAVIGATION COMPONENT ============= -->
<!-- ========== SEARCH COMPONENT ============= -->
<div class="container-fluid search">
<div class="row">
<div class="search-container">
<div class="col-xs-12 col-sm-9 col-sm-offset-0 col-md-5 col-md-offset-3">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn dropdown-search-button dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All <i class="fa fa-angle-down" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu" id="dropdown">
<li><a href="#" class="selected">All</a>
<li><a href="#" class="category"> Capacitors</a>
<li><a href="#" class="category"> Circuit Protection</a>
<li><a href="#" class="category"> Computing</a>
<li><a href="#" class="category"> Connectors</a>
<li><a href="#" class="category"> Diodes & Rectifiers</a>
<li><a href="#" class="category"> EMI/RFI Components</a>
</ul>
</div>
<input type="text" id="inputField" class="form-control search-input" placeholder="Part # or Keyword">
<div class="input-group-btn">
<button class="btn m-primary-btn search-btn"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
<!-- checkboxes -->
<div class="hidden-xs col-sm-3 col-md-4 checkboxes padding-none">
<label title="stocked" class="checkbox-spacing">
<input type="checkbox" name="" value="" class="stocked"> Stocked
</label>
<label title="RoHS" class="checkbox-spacing">
<input type="checkbox" name="" value="" > RoHS
</label>
</div>
</div>
<!-- @end search container -->
</div>
</div>
<!-- ========== @END SEARCH COMPONENT ============= -->
預計您會嘗試，如果您遇到特定問題而不是尋求幫助。看起來你對佈局有很好的把握。您是否嘗試在x按鈕上放置點擊處理程序來更改菜單狀態？ – jfeferman
我做過了，請查看代碼筆以查看我在javascript部分嘗試的內容。 –