創建響應式菜單

Question

希望有人能夠提供幫助。我一直在試圖創建一個簡單的菜單，這是響應。我這裏有以下代碼

<nav class="menu"> 
<ul class="active"> 
    <li class="current-item"><a href="#">Home</a></li> 
    <li><a href="#">My Work</a></li> 
    <li><a href="#">About Me</a></li> 
    <li><a href="#">Get in Touch</a></li> 
    <li><a href="#">Blog</a></li> 
</ul> 

<a class="toggle-nav" href="#">&#9776;</a> 


<form class="search-form"> 
    <input type="text"> 
    <button>Search</button> 
</form> 

jQuery(document).ready(function() { 
jQuery('.toggle-nav').click(function(e) { 
    jQuery(this).toggleClass('active'); 
    jQuery('.menu ul').toggleClass('active'); 

    e.preventDefault(); 
}); 

}）;

，我不能似乎不過這裏加我的CSS是codepen

https://codepen.io/inzid/pen/NjvGjG

完整的東西，你可以看到桌面版本是好的，但是當你換下來到移動下拉不起作用。

什麼想法？

Answer 1

$(document).ready(function() { 
 
    $('.toggle-nav').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).toggleClass('active'); 
 
    $('.menu ul').toggleClass('active'); 
 
    }); 
 
});

/*----- Toggle Button -----*/ 
 

 
.toggle-nav { 
 
    display: none; 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 

 

 
/*----- Menu -----*/ 
 

 
@media screen and (min-width: 860px) { 
 
    .menu { 
 
    width: 100%; 
 
    padding: 10px 18px; 
 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); 
 
    border-radius: 3px; 
 
    background: #303030; 
 
    } 
 
} 
 

 
.menu ul { 
 
    display: inline-block; 
 
} 
 

 
.menu li { 
 
    margin: 0px 50px 0px 0px; 
 
    float: left; 
 
    list-style: none; 
 
    font-size: 17px; 
 
} 
 

 
.menu li:last-child { 
 
    margin-right: 0px; 
 
} 
 

 
.menu a { 
 
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); 
 
    color: #FFF; 
 
    transition: color linear 0.15s; 
 
} 
 

 
.menu a:hover, 
 
.menu .current-item a { 
 
    text-decoration: none; 
 
    color: #66a992; 
 
} 
 

 

 
/*----- Search -----*/ 
 

 
.search-form { 
 
    float: right; 
 
    display: inline-block; 
 
} 
 

 
.search-form input { 
 
    border: 1px solid #555; 
 
    outline: 0; 
 
    width: 200px; 
 
    height: 30px; 
 
    padding: 0px 8px; 
 
    margin: 0 10px 0 0; 
 
    float: left; 
 
    border-radius: 2px 0px 0px 2px; 
 
    font-size: 13px; 
 
} 
 

 
.search-form button { 
 
    border: 0; 
 
    height: 30px; 
 
    padding: 0px 7px; 
 
    float: right; 
 
    border-radius: 0px 2px 2px 0px; 
 
    background: #66a992; 
 
    font-size: 13px; 
 
    font-weight: 600; 
 
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3); 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 

 

 
/*----- Responsive -----*/ 
 

 
@media screen and (max-width: 1150px) { 
 
    .wrap { 
 
    width: 90%; 
 
    } 
 
} 
 

 
@media screen and (max-width: 970px) { 
 
    .search-form input { 
 
    width: 120px; 
 
    } 
 
} 
 

 
@media screen and (max-width: 860px) { 
 
    .menu { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 
    .menu ul.active { 
 
    display: none; 
 
    } 
 
    .menu ul { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 120%; 
 
    left: 0px; 
 
    padding: 10px 18px; 
 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); 
 
    border-radius: 3px; 
 
    background: #303030; 
 
    } 
 
    .menu ul:after { 
 
    width: 0px; 
 
    height: 0px; 
 
    position: absolute; 
 
    top: 0%; 
 
    left: 22px; 
 
    content: ''; 
 
    transform: translate(0%, -100%); 
 
    border-left: 7px solid transparent; 
 
    border-right: 7px solid transparent; 
 
    border-bottom: 7px solid #303030; 
 
    } 
 
    .menu li { 
 
    margin: 5px 0px 5px 0px; 
 
    float: none; 
 
    display: block; 
 
    } 
 
    .menu a { 
 
    display: block; 
 
    } 
 
    .toggle-nav { 
 
    padding: 20px; 
 
    float: left; 
 
    display: inline-block; 
 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); 
 
    border-radius: 3px; 
 
    background: #303030; 
 
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); 
 
    color: #777; 
 
    font-size: 20px; 
 
    transition: color linear 0.15s; 
 
    } 
 
    .toggle-nav:hover, 
 
    .toggle-nav.active { 
 
    text-decoration: none; 
 
    color: #66a992; 
 
    } 
 
    .search-form { 
 
    margin: 12px 0px 0px 20px; 
 
    float: left; 
 
    } 
 
    .search-form input { 
 
    box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.1); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav class="menu"> 
 
    <ul class="active"> 
 
    <li class="current-item"><a href="#">Home</a></li> 
 
    <li><a href="#">My Work</a></li> 
 
    <li><a href="#">About Me</a></li> 
 
    <li><a href="#">Get in Touch</a></li> 
 
    <li><a href="#">Blog</a></li> 
 
    </ul> 
 

 
    <a class="toggle-nav" href="#">&#9776;</a> 
 

 

 
    <form class="search-form"> 
 
    <input type="text"> 
 
    <button>Search</button> 
 
    </form> 
 
</nav>

Answer 2

您尚未在筆中添加jQuery。添加它，它的工作原理。