固定標題與響應式設計

我想從網上學習一個教程，但我基本上做了它說的一切，但由於某種原因菜單不顯示，而屏幕變小。固定標題與響應式設計

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>New Header Design</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<style type="text/css"> 

body{ 

margin :0; 
padding: 0; 
font-family: sans-serif; 


} 

header{ 

    background :#00795f; 
    width: 100%; 
    padding: 40px 0; 
    color: white; 
    text-align: center; 
} 

nav ul { 

background-color :#43a286; 
overflow :hidden; 
color: white; 
padding : 0; 
text-align: center; 
margin:0; 
-webkit-transition : max-height 0.4s; 
-ms-transition : max-height 0.4s; 
-moz-transition : max-height 0.4s; 
-o-transition : max-height 0.4s; 
-webkit-transition : max-height 0.4s; 
} 
nav ul li { 

    display: inline-block; 
    padding :20px; 
} 

nav ul li:hover{ 

    background-color:#399077; 
} 
a{ 

    text-decoration: none; 
    color:inherit; 
} 
section{ 

    line-height: 1.5em; 
    font-size: 0.9em; 
    padding: 40px; 
    width: 75%; 
    margin: 0 auto; 
} 
@media screen and (max-width: 580px){ 

    nav ul{ 
     max-height:0; 
    } 
    .showing { 
     max-height: 20em; 
    } 

    nav ul li{ 
     box-sizing: border-box; 
     width:100%; 
     padding:15px; 
     text-align: left; 

    } 
    .handle{ 
     display:block; 
    } 

} 
.handle{ 

    width:100%; 
    background:#005c48; 
    text-align : left; 
    box-sizing: border-box; 
    padding: 15px 10px; 
    cursor:pointer; 
    color: white; 
    display: none; 
} 
</style> 

</head> 
<body> 
    <header> 
     <h1>Website Created</h1> 
    </header> 
    <nav> 
     <ul> 
      <a href="#"><li>HOME</a></li> 
      <a href="#"><li>ABOUT</a></li> 
      <a href="#"><li>BLOG</a></li> 
      <a href="#"><li>SHOP</a></li> 
      <a href="#"><li>CONTACT</a></li> 
     </ul> 
     <div class ="handle"> <h1>Menu</h1></div> 


    </nav> 
    <section> 
     Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 

    </section> 
    <script> 
$('.handle').on('click', function(){ 

    $('nav ul').toggleClass('showing'); 
}); 
    </script> 

</body> 
</html>

所以我猜jQuery的可能是不正確的，或者必須有類錯誤，而縮小到移動視圖。需要一些幫助謝謝。

來源

2015-03-31 Masnad Hossain

jsfiddle會有幫助。顯然，如果屏幕<580像素，菜單將被隱藏。然後您必須單擊菜單鏈接才能使其再次可見。什麼不工作？ – i4h 2015-03-31 12:33:15

在我的網絡瀏覽器菜單沒有顯示，所以沒有在哪裏點擊：S – 2015-03-31 12:39:07

我曾嘗試js撥弄其相同的情況下，菜單不顯示屏幕變小。 – 2015-03-31 12:41:46

這是因爲手柄級

.handle{ 
width:100%; 
background:#005c48; 
text-align : left; 
box-sizing: border-box; 
padding: 15px 10px; 
cursor:pointer; 
color: white; 
display: none; 
}

被媒體查詢後調用。在像這樣的媒體查詢之前移動句柄類，它將起作用。

.handle{ 

width:100%; 
background:#005c48; 
text-align : left; 
box-sizing: border-box; 
padding: 15px 10px; 
cursor:pointer; 
color: white; 
display: none; 
} 
@media screen and (max-width: 580px){ 

nav ul{ 
    max-height:0; 
} 
.showing { 
    max-height: 20em; 
} 

nav ul li{ 
    box-sizing: border-box; 
    width:100%; 
    padding:15px; 
    text-align: left; 

} 
.handle{ 
    display:block; 
} 

}

來源

2015-03-31 13:00:03 henrik123

固定標題與響應式設計

回答

相關問題