[英]CSS for responsive jquery drop down menu
我試圖制作一個簡單的響應式導航菜單,它可以很好地折疊,並且可以很好地工作,直到菜單在折疊時下降為止。 前兩個導航鏈接位於頂部,“ a href”鏈接也不位於正確鏈接的后面,這是一個問題。
我認為這是我的css中的浮動的問題,但我不確定,如果有人可以將我指向正確的方向,那將很棒。
繼承人我的HTML
<div class="container">
<header>
<nav class="nav">
<div class="nav-head">
<div class="nav-logo">
<img class="responsive-img" src="http://placehold.it/350x231" alt="Country View Logo">
</div>
<div class="main-text">
<h1>Title</h1>
</div>
<div class="sub-text">
<h2>"Sub Title"</h2>
</div>
</div>
<div class="nav-links">
<a href="#" class="three-lines-menu"><b class="lines">☰</b> Menu</a>
<ul class="js-menu">
<li><a href="#">Link</a></li>
<li><a href="testimonials.html">Link</a></li>
<li><a href="careers.html">Link</a></li>
<li><a href="links.html">Link</a></li>
<li><a href="contact-us.html">Link</a></li>
</ul>
</div>
</nav>
</header>
<section class="clear content-block">
<h1>Title</h1>
<h2>"Sub-Title"</h2>
</section>
</div>
這是我的CSS
.container{
background-color: #fff;
width: 100%;
max-width: 1000px;
text-align: center;
margin: auto;
}
.nav {
width: 100%;
height: 100%;
font-size: 20px;
color: #556b2f;
}
.nav-head{
padding: 10px 0;
padding-bottom: 15px;
}
.nav-logo {
float: left;
width: 35%;
text-align: left;
max-width:90%;
height:auto;
display:block;
margin:0 auto;
}
.responsive-img{
width:100% !important;
height:100% !important;
display:block;
}
.nav-contact a {
color: #556b2f;
text-decoration: none;
}
.nav-links {
margin: 30px 0;
clear: both;
width: 100%;
background-color: #556b2f;
height: 50px;
}
.nav-links ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links ul li {
width: 20%;
float: left;
height: 50px;
}
.nav-links ul li a {
display: block;
width: 100%;
color: #ffffff;
padding-top: 15px;
text-decoration: none;
}
.nav-links ul li:hover, .nav-links ul li:active {
background-color: #7b9155;
}
.three-lines-menu {
background-color: #556b2f;
color: #fff;
font-size: 24px;
text-decoration: none;
float: right;
width: 100%;
text-align: right;
display: none;
height: inherit;
}
.lines {
color: #7b9155;
}
@media screen and (max-width: 767px) {
.three-lines-menu {
display: block;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
}
.nav-links {
margin: 0px;
min-height: 45px;
height: auto;
}
.nav-links ul {
margin: 0px;
padding-bottom: 15px;
height: 250px;
}
.nav-links ul li {
width: 100%;
float: none;
height: 40px;
background-color: #556b2f;
}
.nav-links ul li a {
display: block;
width: 100%;
}
.js-menu {
display: none;
}
.js-menu-responsive {
display: block;
}
}
.clear {
clear: both;
}
.content-block{
width: 900px;
margin: auto;
clear: both;
padding: 0 15px;
}
這是我的JS小提琴
干杯
您需要在此媒體查詢中添加float:left
@media screen and (max-width: 767px) {
.nav-links ul li {float:left}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.