0
大画面とモバイル画面では問題なく動作するナビゲーションメニューがありますが、上のdivを追加するとすぐに大画面とモバイル画面のナビゲーションメニューが壊れます。ここのフィドル - https://jsfiddle.net/AwesomeHat/t9q2p2ut/を見てください。div完全にナビゲーションメニューを中断する
ナビゲーションメニューが完全にうまくいけば、ここのフィドルが表示されます - https://jsfiddle.net/AwesomeHat/dwzhh6L1/。
&出力ウィンドウのサイズを小さくしてメニューの応答性を確認し、両方の画面でメニューがどのように表示されているかを確認してください。 -
<!--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コードは第一で
/* 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;
}
}
ブラザーまず、あなたはこのためにたくさん –
後@ShudhanshShekharの感謝を追加します。 –