以導航爲中心的響應式徽標

嗨，我有一個水平菜單，中間有徽標，似乎無法獲得內聯，但在所有瀏覽器中仍然看起來不錯。以導航爲中心的響應式徽標

現在，在響應模式下，我希望它始終在頂部顯示標誌，並在底部顯示按鈕以顯示/隱藏菜單。目前在響應它隱藏的標誌，然後當顯示菜單被點擊時，它顯示的標誌在ul中間的菜單。

這是迄今爲止有點雜亂的代碼。

* { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 

 
    font-family: sans-serif; 
 
    margin: 5px; 
 
    background: #F1F6F8; 
 
} 
 

 
a { 
 

 
    font-weight: bold; 
 
    color: #3F5767; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: #524C56; 
 
} 
 

 
#wrapper { 
 
    max-width: 980px; 
 
    margin: 0 auto; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 100px; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
/* Logo code can go here */ 
 
ul li a.logo { 
 
    background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center; 
 
    height:76px; 
 
    width:175px; 
 
    display:block; 
 
    padding:5px; 
 
    margin: 0 auto; 
 
} 
 

 

 
nav { 
 
    text-align: center; 
 
} 
 

 
li { 
 
    font-family: sans-serif; 
 
    font-size: 150%; 
 
    display: inline-block; 
 
    padding: 0 10px 0 10px; 
 
} 
 

 
nav ul li a { 
 
    color: #3F5767; 
 
} 
 

 
/* Start controls checkbox change button */ 
 
ul li a:hover + .hidden, .hidden:hover{ /* Maybe remove this */ 
 
     display: block; 
 
     width: auto; 
 
}  
 

 
input[type=checkbox] { 
 
     display: none; 
 
} 
 

 
input[type=checkbox]:checked ~ #menu{ 
 
     display: block; 
 
} 
 

 
.show-menu{ 
 
     font-family: sans-serif; 
 
     font-weight: bold; 
 
     text-decoration: none; 
 
     color: #3F5767; 
 
     background: #424242; 
 
     text-align: center; 
 
     padding: 3px o; 
 
     display: none; 
 
} 
 

 

 
.thing:before { 
 
     content: "Show Menu"; 
 
} 
 

 
input[type=checkbox]:checked ~ .thing:before { 
 
     content: "Close Menu"; 
 
} 
 

 

 
@media screen and (max-width: 760px) { 
 
     ul{position: static; 
 
     display: none; 
 
} 
 

 
li{ 
 
     margin: 0 auto; 
 
     font-size: 100%; 
 
     padding: 0; 
 
     /*border-bottom: 2px solid #676767;*/ 
 
} 
 

 

 
ul li, li a{ 
 
     width: 100%; 
 
     font-size: 15px; 
 
} 
 
.show-menu{ 
 
     display: block; 
 
     width: auto; 
 
     height: 30px; 
 
     padding: 3px 0 0 0; 
 
} 
 
} 
 
/* End controls checkbox change button */ 
 

 
@media print {#ghostery-purple-box {display:none !important}}

<!DOCTYPE html> 
 
<html lang="en"><head> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
     <meta charset="UTF-8"> 
 
     <title>Coast Fm Tasmania</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 
<div id="wrapper"> 
 
    <header> 
 
     <nav> 
 

 
     <input id="show-menu" role="button" type="checkbox"> 
 
     <label for="show-menu" class="show-menu thing"> &nbsp </label> 
 

 
     <ul id="menu"> 
 
      <li> 
 
      <a href="index.html" class="current">Home</a></li> 
 
       <li><a href="#">Events</a></li> 
 
       <li><a href="#">On-Air</a></li> 
 
       <li><a href="#">Gallery</a></li> 
 
       <li><a class="logo" href="index.html"></a></li> 
 
       <li><a href="#">Sport</a></li> 
 
       <li><a href="#">The Team</a></li> 
 
       <li><a href="#">Sponsors</a></li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 

 
</div> 
 
</body> 
 
</html>

而且這裏是標誌 Coast FM

感謝

來源

2017-09-06 Michael Belden

您可以在div中添加另一個徽標，這將是您的「隱藏的徽標」。

<input id="show-menu" role="button" type="checkbox"> 
<div class="hidden"> 
<a class="hidden-logo" href="index.html"></a> 
<label for="show-menu" class="show-menu thing"> &nbsp </label> 
</div>

然後，您可以顯示它並隨時隱藏它。

.hidden { 
    display:flex; 
    justify-content: center; 
    background: #424242; 
    display:none; 
} 
@media screen and (max-width: 760px) { 
    .hidden { 
     display:flex; 
    } 
} 
.hidden-logo { 
    background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center; 
    height:23px; 
    background-size:50%; 
    width:175px; 
    display:block; 
    padding:5px; 
}

下面是一個例子

https://jsfiddle.net/jrdkp7ph/2/

來源

2017-09-06 05:40:47

嗨，我很喜歡你如何做到這一點。？它不會在Safari中顯示任何響應 –

嘿，我剛剛在Safari 10.1上測試過，它對我來說工作正常。你能告訴我你的問題照片嗎？ –

嗨，感謝我喜歡它沒有想到隱藏我改變了一點flexbox代碼，所以它在Safari中的作品。有沒有辦法擺脫徽標隱藏在響應式菜單中的空白區域？ –

您可以使用jQuery並添加所需的列表動態

在這裏做檢查的代碼，例如：https://jsbin.com/zusunidupo/1/edit?css,js,output Ne ED時調整窗口大小（在只有第一次加載鏈接提供的執行）執行下面的代碼塊每次

if ($(window).width() < 760) { 
$('<li><a class="logo" href="https://i.stack.imgur.com/1dcqW.png"><img border="0" src="https://i.stack.imgur.com/1dcqW.png" width="50" height="50"></a></li>').insertAfter($('li:eq(4)')) 
} 
else { 
$("#menu").prepend('<li><a class="logo" href="https://i.stack.imgur.com/1dcqW.png"><img border="0" src="https://i.stack.imgur.com/1dcqW.png" width="50" height="50"></a></li>'); 
}

來源

2017-09-06 05:23:49 user1594

嘿，我覺得你的HTML代碼中的許多變化只是建議提高

* { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 

 
    font-family: sans-serif; 
 
    margin: 5px; 
 
    background: #F1F6F8; 
 
} 
 

 
a { 
 

 
    font-weight: bold; 
 
    color: #3F5767; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: #524C56; 
 
} 
 

 
#wrapper { 
 
    max-width: 980px; 
 
    margin: 0 auto; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    height: 100px; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
/* Logo code can go here */ 
 
ul li a.logo { 
 
    background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center; 
 
    height:76px; 
 
    width:175px; 
 
    display:block; 
 
    padding:5px; 
 
    margin: 0 auto; 
 
} 
 

 
.logo { 
 
    background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center; 
 
    height:76px; 
 
    width:175px; 
 
    display:block; 
 
    padding:5px; 
 
    margin: 0 auto; 
 
} 
 

 
nav { 
 
    text-align: center; 
 
} 
 

 
li { 
 
    font-family: sans-serif; 
 
    font-size: 150%; 
 
    display: inline-block; 
 
    padding: 0 10px 0 10px; 
 
} 
 

 
nav ul li a { 
 
    color: #3F5767; 
 
} 
 

 
/* Start controls checkbox change button */ 
 
ul li a:hover + .hidden, .hidden:hover{ /* Maybe remove this */ 
 
     display: block; 
 
     width: auto; 
 
}  
 

 
input[type=checkbox] { 
 
     display: none; 
 
} 
 

 
input[type=checkbox]:checked ~ #menu{ 
 
     display: block; 
 
} 
 

 
.show-menu{ 
 
     font-family: sans-serif; 
 
     font-weight: bold; 
 
     text-decoration: none; 
 
     color: #3F5767; 
 
     background: #424242; 
 
     text-align: center; 
 
     padding: 3px o; 
 
     display: none; 
 
} 
 

 

 
.thing:before { 
 
     content: "Show Menu"; 
 
} 
 

 
input[type=checkbox]:checked ~ .thing:before { 
 
     content: "Close Menu"; 
 
} 
 

 

 
@media screen and (max-width: 760px) { 
 
ul{position: static; 
 
     display: none; 
 
} 
 
ul li a.logo { display: none; } 
 

 
li{ 
 
     margin: 0 auto; 
 
     font-size: 100%; 
 
     padding: 0; 
 
     /*border-bottom: 2px solid #676767;*/ 
 
} 
 

 

 
ul li, li a{ 
 
     width: 100%; 
 
     font-size: 15px; 
 
} 
 
.show-menu{ 
 
     display: block; 
 
     width: auto; 
 
     height: 30px; 
 
     padding: 3px 0 0 0; 
 
} 
 
} 
 
/* End controls checkbox change button */ 
 

 
@media print {#ghostery-purple-box {display:none !important}}

<!DOCTYPE html> 
 
<html lang="en"><head> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
     <meta charset="UTF-8"> 
 
     <title>Coast Fm Tasmania</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 
<div id="wrapper"> 
 
    <header> 
 
     <nav> 
 

 
     <input id="show-menu" role="button" type="checkbox"> 
 
     <label for="show-menu" class="show-menu thing"> <a class="logo" href="index.html"></a> &nbsp </label> 
 
     
 

 
     <ul id="menu"> 
 
      <li> 
 
      <a href="index.html" class="current">Home</a></li> 
 
       <li><a href="#">Events</a></li> 
 
       <li><a href="#">On-Air</a></li> 
 
       <li><a href="#">Gallery</a></li> 
 
       <li><a class="logo" href="index.html"></a></li> 
 
       <li><a href="#">Sport</a></li> 
 
       <li><a href="#">The Team</a></li> 
 
       <li><a href="#">Sponsors</a></li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 

 
</div> 
 
</body> 
 
</html>

來源

2017-09-06 05:36:51

謝謝你，這是一個爛攤子，因爲我把它從另一個網站我工作，但決定把標誌在這一個。 –

以導航爲中心的響應式徽標

回答

相關問題