我的网站快完成了,只是我的下拉菜单不起作用。我试过谷歌搜索并向朋友寻求建议,但没有任何帮助。下面我附上了使用或提到下拉菜单的代码:
/*Responsive Navigation*/
$(document).ready(function() {
$('.toggle').click(function() {
$('.toggle').toggleClass('active')
$('nav ul').toggleClass('active-menu')
})
});
@media(max-width:900px) {
.toggle {
display: block;
}
.toggle:before {
content: '\f0c9';
font-family: fontAwesome;
line-height: 0px;
margin-left: -30px;
}
.toggle.active:before {
content: '\f00d' !important;
}
}
/*Navbar full Screen*/
.toggle {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="" class="dropdown">
<div class="toggle"></div>
</a>
<!--Menu items-->
<ul class="menu">
<li class="active"><a href="#main">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact-form">Contact</a></li>
</ul>
答案 0 :(得分:0)
为此您需要一些庞大的代码。看一下这个!正是您所需要的。
Mouse Click
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
margin-right: 2;
margin-left: 2;
}
.topnav {
overflow: hidden;
background-color: black;
padding-left: -2;
padding-right: -2;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #eee;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px)
{
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}