我是Jquery的新手。 我正在尝试构建响应式网站,因此从Navigation Part开始。 我为导航编写了一些代码并且它的工作很好并且导航具有嵌套项目。但问题是,无论何时调整窗口大小,导航都会折叠为“菜单”导航按钮,当我单击导航项时它重叠其他导航项目。 每当我选择不同的导航项时,所选的导航项也不会关闭。
小提琴 - https://jsfiddle.net/8h8q7y8z/
这是我的代码
HTML
<div class="navbar">
<span class="nav-btn"></span>
<div class="container">
<div id="brand">
<img src="Img/logo1.png" class="visible" />
<img src="Img/smallLogo.png" class="hidden" />
</div>
<nav>
<ul>
<li>
<a href="#">
<img src="Img/home2.png" height="20" /></a>
</li>
<li><a href="#">HOTEL</a></li>
<li><a href="#">TOURS</a></li>
<li class="dropdown"><a href="#">EUROPE MAIL</a><img src="Img/arrowDown.png" />
<ul class="dditems">
<li><a href="EuropeRail.html">Europe Rail</a></li>
<li><a href="EuropeRailWorld.html">Europe Rail World</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">VACATIONS</a><img src="Img/arrowDown.png" />
<ul class="dditems">
<li><a href="Vocation.html">Cheap Caribbean</a></li>
<li><a href="Hurtigruten.html">Hurtigruten</a></li>
<li><a href="Contiki.html">Contiki</a></li>
<li><a href="Sandals.html">Sandals</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">HOME RENTALS</a><img src="Img/arrowDown.png" />
<ul class="dditems">
<li><a href="HomeRental.html">Vacation Home Rentals</a></li>
<li><a href="HomeExchange.html">Home For Exchange</a></li>
<li><a href="HomeAway.html">Home Away Europe</a></li>
</ul>
</li>
<li><a href="#">CRUISE</a></li>
<li><a href="#">INSURANCE</a></li>
<li class="dropdown"><a href="#">ATTRACTION</a><img src="Img/arrowDown.png" />
<ul class="dditems">
<li><a href="CityPass.html">City Pass</a></li>
<li><a href="StarlineTours.html">Starline Tours</a></li>
<li><a href="DublinPass.html">Dublin Pass</a></li>
<li><a href="NewyorkPass.html">New york Pass</a></li>
<li><a href="TrustedTours.html">Trusted Tours</a></li>
<li><a href="PariscityVision.html">Paris city Vision</a></li>
<li><a href="LondonPass.html">London Pass</a></li>
<li><a href="GrayLine.html">Gray Line</a></li>
<li><a href="SmartDestinations.html">Smart Destinations</a></li>
<li><a href="CityExperts.html">City Experts NY</a></li>
<li><a href="Conciergerie.html">Conciergerie</a></li>
<li><a href="Isango.html">isango</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
CSS
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
* {
margin: 0px;
padding: 0px;
}
.container {
padding-right: 25px;
padding-left: 100px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.navbar {
background: #333333;
height: 50px;
position: fixed;
width: 100%;
margin: 0 auto;
}
#brand {
float: left;
padding-right: 30px;
padding-top: 10px;
}
.hidden {
display: none;
}
.visible {
display: block;
}
nav {
width: 100%;
text-align: center;
}
nav ul {
float: left;
line-height: 50px;
padding: 0px;
margin: 0px;
position: relative;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
text-decoration: none;
padding: 10px;
color: #9d9d9d;
font-size: 14px;
}
nav ul li:hover {
background-color: #333;
}
nav ul li a:hover {
color: #fff;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
background-color: #333;
min-width: 150px;
}
nav ul ul li {
display: block;
line-height: 25px;
text-align: left;
}
.dropdown img {
display: none;
}
@media only screen and (max-width: 985px) {
.container {
padding-left: 10px;
}
.nav-btn {
position: relative;
float: right;
padding: 4px 5px;
margin-top: 12px;
margin-right: 15px;
margin-bottom: 8px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 4px;
cursor: pointer;
}
.nav-btn:hover {
color: #9d9d9d;
background-color: #fff;
}
.nav-btn:before {
content: "Menu";
}
.hidden {
display: block;
}
.visible {
display: none;
}
nav {
float: right;
display: none;
background-color: #fff;
}
nav ul {
text-align: left;
float: right;
line-height: 25px;
padding: 5px;
}
nav ul li {
display: block;
border-bottom: 1px solid #968a8a;
cursor: pointer;
}
nav ul li:hover {
background-color: #968a8a;
}
nav ul li a {
color: rgb(0,0,0);
}
nav ul li:hover ul {
display: none;
}
.dropdown img {
display: block;
float: right;
margin-top: 4px;
margin-right: 4px;
}
ul .dditems {
width: 100%;
background-color: #968a8a;
}
}
@media only screen and (max-width: 1094px) {
.container {
padding-left: 10px;
}
#brand {
padding-right: 10px;
}
/*.hidden {
display: block;
}
.visible {
display: none;
}*/
}
JS
$(document).ready(function () {
$("span.nav-btn").click(function () {
$("nav").slideToggle();
});
});
$(document).ready(function () {
var mainmenu = $(this).next('ul');
$(".dropdown").click(function () {
$(this).children(".dditems").slideToggle();
});
});
答案 0 :(得分:0)
将您的CSS更改为此 - 我所做的就是将absolute
位置更改为relative
,并为菜单指定固定宽度,您当然可以更改:
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
* {
margin: 0px;
padding: 0px;
}
.container {
padding-right: 25px;
padding-left: 100px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.navbar {
background: #333333;
height: 50px;
position: fixed;
width: 100%;
margin: 0 auto;
}
#brand {
float: left;
padding-right: 30px;
padding-top: 10px;
}
.hidden {
display: none;
}
.visible {
display: block;
}
nav {
width: 100%;
text-align: center;
}
nav ul {
float: left;
line-height: 50px;
padding: 0px;
margin: 0px;
position: relative;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
text-decoration: none;
padding: 10px;
color: #9d9d9d;
font-size: 14px;
}
nav ul li:hover {
background-color: #333;
}
nav ul li a:hover {
color: #fff;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: relative;
background-color: #333;
/*min-width: 150px;*/;
}
nav ul ul li {
display: block;
line-height: 25px;
text-align: left;
}
.dropdown img {
display: none;
}
@media only screen and (max-width: 985px) {
.container {
padding-left: 10px;
}
.nav-btn {
position: relative;
float: right;
padding: 4px 5px;
margin-top: 12px;
margin-right: 15px;
margin-bottom: 8px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 4px;
cursor: pointer;
}
.nav-btn:hover {
color: #9d9d9d;
background-color: #fff;
}
.nav-btn:before {
content: "Menu";
}
.hidden {
display: block;
}
.visible {
display: none;
}
nav {
float: right;
display: none;
background-color: #fff;
}
nav ul {
text-align: left;
float: right;
line-height: 25px;
padding: 5px;
width: 150px;
}
nav ul li {
display: block;
border-bottom: 1px solid #968a8a;
cursor: pointer;
}
nav ul li:hover {
background-color: #968a8a;
}
nav ul li a {
color: rgb(0,0,0);
}
nav ul li:hover ul {
display: none;
}
.dropdown img {
display: block;
float: right;
margin-top: 4px;
margin-right: 4px;
}
ul .dditems {
width: 100%;
background-color: #968a8a;
}
}
@media only screen and (max-width: 1094px) {
.container {
padding-left: 10px;
}
#brand {
padding-right: 10px;
}
}