2017-04-23 90 views
0

我想在較小的屏幕上將菜單項顯示爲單獨的行。這是非常基本的,看到很多地方。我打算效果是:響應菜單不顯示

enter image description here

與我有什麼到目前爲止(下面的代碼)的菜單項只顯示了旁邊的標誌(這就是他們如何在那裏爲桌面)。

此外,我需要添加一個背景圖像的菜單項。填充整個區域,而不是相同的圖像重複每個菜單我已經添加

一個圖像:

<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()">&#9776;</a> 
 
        </div> 
 
       </nav> 
 
      </div>

+0

請看看這個,它真的不乾淨,現在有一些unnessecary代碼,它需要一些重構,但我很少有時間。將重構/做得更好,明天將它打包成一個答案,如果它是你所需要的?:https://jsfiddle.net/gyexzhao/13/ –

+0

我剛剛讀過你的問題了,我之前的共享小提琴並不是你的你想保持標誌在頂部,並插入另一個圖像作爲菜單背景嗎? –

+0

是的,這是正確的 – codeNinja

回答

1

這裏我的解決方案(改變標記,JS和CSS):

HTML:

<div class="topnav" data-mobile="false"> 
    <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()">&#9776;</a> 
    </div> 
    </nav> 

    <nav id="mobile-menu"> 
     <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="link" href="industries.html">INDUSTRIES</a> 
     <a class="link" href="friends.html">FRIENDS OF MARY</a> 
     <a class="link" href="contact.html">CONTACT</a> 
    </nav> 
</div> 

JS:

function topNav() { 
    var topNav = document.querySelector('.topnav'); 
    topNav.dataset.mobile = (topNav.dataset.mobile == "false") ? true : false; 
} 

CSS:

html, body { 
    height : 100%; 
    margin : 0; 
    padding : 0; 
    background-color : white; 
} 

.topnav { 
    overflow:hidden; 
    width: 100%; 
    padding-bottom: 0px; 
} 

.topnav nav:first-of-type{ 
    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 .myTopnav{ 
    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; 
} 

#mobile-menu { 
    width : 100%; 
    height : 100%; 
    padding : 20px; 
    background: url(https://pbs.twimg.com/profile_images/638771889339404289/h64dZ4wh_400x400.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    display: flex; 
    flex-direction: column; 
    /*justify-content: center; --> add this to center vertically*/ 
    align-items: center; 
    box-sizing : border-box; 
} 

#mobile-menu > * { 
    color : black; 
} 

.topnav[data-mobile=false] #mobile-menu { 
    display : none; 
} 


@media only screen and (max-width: 767px) { 
    .myTopnav a.link { 
    display: none; 
    } 

    .topnav[data-mobile=true]{ 
    height : 100%; 
    } 

    .topnav nav div{ 
    width: 100%; 
    height : 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; 
    } 
} 

之後,您需要在移動菜單展開時將其正確放置在以下內容上。

fiddle

0

這裏是fiddle

您需要爲topbar添加flex-direction:column才能將其顯示爲移動設備的列。

.topnav nav div{ 
     flex-direction:column; 
    } 
    .myTopnav.responsive a.link:first-child{ 
     margin-top:30px; 
    } 
    .myTopnav.responsive a.link{ 
     width : 100%; 
    } 
    .myTopnav.responsive a.notlink{ 
      width: 70%; 
    position: absolute; 
    top: 0px; 
    text-align: center; 
    } 
+0

不知道它是否只是我,但在小提琴中單擊菜單按鈕沒有做任何事情。 – codeNinja

+0

嗨@codeNinja,我已經更新了小提琴,現在檢查它。 – Santosh

+0

唯一的問題是背景圖像應該填滿整個屏幕。現在它只填充菜單的最高點。 – codeNinja