작은 화면에 별도의 행으로 메뉴 항목을 표시하려고합니다. 이것은 꽤 기초적이고 많은 곳에서 보았습니다. 내가가는 오전 효과는 : 내가 지금까지 자녀로반응 형 메뉴가 표시되지 않습니다.
는 (아래 코드) 메뉴 항목은 다음 (가 데스크탑있다 그게 방법) 로고로 표시됩니다.
또한 메뉴 항목에 배경 이미지를 추가해야합니다. 전체 영역을 채 웁니다 아니라 동일한 이미지가
가 이미 추가 한 각 메뉴에 대한 반복 한 이미지 : 여기
<meta name="viewport" content="width=device-width, initial-scale=1">
내 fiddle
//make the topnav responsive for mobile screens
function topNav() {
var x = document.getElementById("myTopnav");
if (x.className === "myTopnav") {
x.className += " responsive";
} else {
x.className = "myTopnav";
}
}
.topnav {
background-repeat:no-repeat;
background-size:cover;
overflow:visible;
width: 100%;
padding-bottom: 0px;
}
.topnav nav{
padding-top: 5px;
padding-bottom: 8px;
background: -webkit-linear-gradient(left, transparent, black, black, transparent); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, transparent, black,black, transparent); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, transparent, black,black, transparent); /* For Fx 3.6 to 15 */
background: linear-gradient(to right, transparent, black, black, transparent); /* Standard syntax (must be last) */
width:100%;
}
.topnav nav div{
width: 85%;
margin-left: 7.5%;
margin-right: 7.5% ;
display:flex;
align-items: center;
justify-content: center;
}
.link {
color: white;
text-decoration: none;
font-size: 11px;
font-weight: 700; /* this is futura heavy*/
width:11.25%;
letter-spacing: 2px;
word-wrap:true;
display:inline-block;
vertical-align: top;
text-align: center;
/*line-height: 5em;*/
}
.notlink {
width:30.4%;
margin-left: 1%;
margin-right: 1%;
display: inline-block;
}
.notlink img {
width: 100%;
}
.topnav nav .link:hover {
color: #008ed2;
}
.icon {
display: none;
font-size: 32px;
color: white;
text-decoration: none;
text-align: center;
line-height: 40px;
min-width: 40px;
min-height: 40px;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media only screen and (max-width: 767px) {
.myTopnav a.link {display: none;}
.topnav nav div{
width: 100%;
margin-left: 0;
margin-right: 0;
position: relative;
top: 0;
left: 0;
}
.icon {
display :inline-block;
position : absolute;
right : 0;
}
.notlink {
width: 70%;
display : flex;
align-items: center;
justify-content : center;
}
.notlink img {
max-width:100%;
max-height:75px;
width: auto;
height: auto;
}
}
@media screen and (max-width: 767px) {
.myTopnav.responsive {position: relative;}
.myTopnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.myTopnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div class="topnav">
<nav>
<div class="myTopnav" id="myTopnav">
<a class="link" href="index.html">HOME</a>
<a class="link" id ="selected" href="about.html">ABOUT</a>
<a class="link" href="expertise.html">EXPERTISE</a>
<a class="notlink" href="index.html"><img src="https://www.google.com/logos/doodles/2017/earth-day-2017-5650394117046272-s.png"></a>
<a class="link" href="industries.html">INDUSTRIES</a>
<a class="link" href="friends.html">FRIENDS OF MARY</a>
<a class="link" href="contact.html">CONTACT</a>
<a href="javascript:void(0);" class="icon" onclick="topNav()">☰</a>
</div>
</nav>
</div>
정말 깨끗하지 그리고 지금은 일부 unnessecary 코드를 가지고 있으며, 어떤 리팩토링이 필요합니다, 이것 좀 봐,하지만 난 그냥 약간의 시간이 있었다하시기 바랍니다. 당신이 필요로하는 것이면 그것은 리팩토링/더 잘 할 것이고 내일 답안에 그것을 포장 할 것입니다 : https://jsfiddle.net/gyexzhao/13/ –
방금 전에 당신의 질문을 다시 읽지 않았습니까? 로고를 상단에두고 다른 이미지를 메뉴 배경으로 삽입하고 싶습니까? –
예 맞습니다 – codeNinja