0
Ich habe ein Navigationsmenü, das auf einem großen Bildschirm und einem mobilen Bildschirm einwandfrei funktioniert, aber sobald ich ein div darüber hinzufüge, bricht es das Navigationsmenü auf dem großen Bildschirm und dem mobilen Bildschirm. Siehe die Geige hier - https://jsfiddle.net/AwesomeHat/t9q2p2ut/.div bricht das Navigationsmenü vollständig
Navigation Menü, wenn allein funktioniert perfekt gut sehen Sie die Geige hier - https://jsfiddle.net/AwesomeHat/dwzhh6L1/.
Bitte erhöhen Sie & verkleinern Sie das Ausgabefenster, um die Reaktionsfähigkeit des Menüs zu sehen und sehen Sie, wie es das Menü auf beiden Bildschirmen bricht.
<!--Social Icons-->
<div id="social">
<a href="#" class="icon-button wikipedia"><i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<a href="#" class="icon-button linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i>
<a href="#" class="icon-button google-plus"><i class="fa fa-google-plus" aria-hidden="true"></i>
<a href="#" class="icon-button twitter"><i class="fa fa-twitter" aria-hidden="true"></i>
<a href="#" class="icon-button facebook"><i class="fa fa-facebook" aria-hidden="true"></i>
</div>
<!--Navigation Bar-->
<nav>
<label for="show-menu" class="show-menu">Menu ☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Whats New</a>
<ul class="hidden">
<li><a href="#">Just Launched</a></li>
<li><a href="#">Launching Soon</a></li>
<li><a href="#">Completed Projects</a></li>
</ul>
</li>
<li><a href="#">Referral</a></li>
<li><a href="#">Buyers Section</a>
<ul class="hidden">
<li><a href="#">EMI Calculator</a></li>
<li><a href="#">Apply For Loan</a></li>
<li><a href="#">Make an Enquiry</a></li>
</ul>
</li>
<li><a href="#" class="support">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS-Code -
/* logo */
.logo {
float: left;
margin-left: 55px;
margin-top: 30px;
}
/* Social Icons */
.icon-button {
display: inline-block;
color: white;
border: 0px;
font-size: 1.0rem;
line-height: 1.7rem;
margin: 1px;
text-align: center;
width: 1.7rem;
margin-top: 60px;
float: right;
overflow: hidden;
}
.facebook {
background-color: #3B5998;
}
.twitter {
background-color: #4099ff;
}
.google-plus {
background-color: #db5a3c;
}
.linkedin {
background-color: #007fb1;
}
.wikipedia {
background-color: white;
overflow: hidden;
color: black;
margin-right: 100px;
}
.icon-button:hover {
background-color: rgba(165,219,89,1);
transition: 1s;
transform: rotate(360deg);
}
/* Navigation Menu */
nav ul {
list-style-type:none;
margin-top: 170px;
padding:0;
position: absolute;
width: 100%;
z-index: 2;
}
nav ul li {
display:inline-block;
float: left;
width: 14.2857%; /* fallback for non-calc() browsers */
width: calc(100%/7);
}
nav ul li a {
display:block;
min-width:140px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
background: #161616;
text-decoration: none;
}
nav ul li:hover a {
color: rgb(165,219,89);
}
nav ul li:hover ul a {
color: #fff;
height: 40px;
line-height: 40px;
}
nav ul li:hover ul a:hover {
color: rgb(165,219,89);
}
nav ul li ul {
margin-top: 0px;
display: none;
}
nav ul li ul li {
display: block;
float: none;
width: 200px;
}
nav ul li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
width: 25%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #161616;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media screen and (max-width : 760px){
nav ul {
position: relative;
margin-top: 0px;
display: none;
}
nav ul li, li a {
width: 90%;
}
nav ul li ul {
margin-top: 0px;
display: block;
}
nav ul li ul li {
width: 90%;
}
.show-menu {
display:block;
}
}
Bruder zuerst, Sie nach –
@ShudhanshShekhar Dank viel für diese hinzufügen. –