하루 종일 알아 내려고 노력하고 있습니다. # menu-icon을 toggleClass로 클릭하면 @media 쿼리의 "# menu-icon. navigation"이 내 모바일 탐색에 적용됩니다. ('active') 그리고 .navigation 클래스를 보여줄 것입니다 (그리고이 transition effect로 화면에 내 탐색을 할 수 있습니다). 내 실수는 어디 있습니까?toggleClass가 탐색 문제를 표시합니다.
(function(){
\t 'use strict';
\t $(document).ready(function(){
\t \t var $toggleMenu = $('#menu-icon');
\t \t
\t \t $toggleMenu.on('click', function(){
\t \t \t $('.navigation').toggleClass('active');
\t \t });
\t });
})();
body {
background: #000;
}
.navigation ul { list-style: none; margin-left: 5px; }
.navigation ul li { display: inline-block; margin: 0 29px 0 0; }
.navigation ul li a { display: block; padding: 6px 0 8px 0; text-decoration: none; font-size: 15px; color: #e7d9bb; }
.navigation ul li a:hover { color: #a4987f; }
/* Mobile nav icon */
#menu-icon {
width: 30px;
height: 12px;
display: none;
position: relative;
margin-top: 10px;
}
#menu-icon span,
#menu-icon span:before,
#menu-icon span:after { position: absolute; left: 0; height: 3px; background: #fff; width: 100%; border-radius: 2px; }
#menu-icon span:before { content: ''; top: 10px; }
#menu-icon span:after { content: ''; top: -10px; }
@media (max-width: 480) {
.navigation { display: none; background: #5a9abe; position: absolute; top: 100%; width: 100%; max-width: 300px; padding: 0px 0 25px 0; opacity: 0; visibility: hidden; }
#menu-icon .navigation { transition: opacity .3s ease, visibility 0s linear .3s; }
#menu-icon .navigation { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }
#menu-icon { display: inline-block; position: absolute; top: 50px; left: 85%; z-index: 999999; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
<a id="menu-icon" href="#"><span></span></a>
<nav class="navigation active">
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">New Products</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav><!-- navigation -->
</div><!-- main-nav -->
처음에는 CSS에'.active' 클래스 용으로 설정된 스타일이없는 것 같습니까? – adeneo
.active 클래스에이 전환 효과를 사용하고 싶다면 .active 클래스를 추가하면 모바일 화면에 내비게이션을 표시하고 싶습니다. – Mll
또한'# menu-icon .navigation'은 메뉴 아이콘 내에서 네비게이션을 검색하지만 ** 형제입니다 ** – DaniP