在桌面上隱藏div

我正試圖在桌面上隱藏div。我嘗試過媒體查詢（這裏Caroline的解決方案是一個例子：https://ecommerce.shopify.com/c/ecommerce-design/t/display-content-on-mobile-or-desktop-only-211885）在桌面上隱藏div

我已經得到了我的大導航（.menu）隱藏在手機上，但我無法弄清楚如何隱藏我的mobilenav桌面。如果我在主CSS中將mobilenav的顯示設置爲「隱藏」，並在我的媒體查詢中顯示爲「阻止」，則div保持隱藏狀態。我猜測我的代碼在某處存在問題。你有任何建議，將不勝感激。這裏是我的小提琴：

https://jsfiddle.net/eamr662L/（對網站的完整的代碼）

這裏是我想什麼是相關代碼的摘錄：

mobilenav { 
     display: block; 
     width: 100%; 
     z-index: 1000; 
     background-color: #000000; 
     text-align: center; 
    } 

    mobilenav div { 
     width: 100%; 
    } 

    mobilenav a { 
     color: #ffffff; 
     text-transform: uppercase; 
    } 

    mobilenav a:hover { 
     color: #ffffff; 
     text-decoration: underline; 
    } 

    mobilenav > nav > ul { 
     display: flex; 
     flex-wrap: wrap; 
     justify-content: flex-start; 
     list-style: none; 
     margin: 0; 
     padding: 0; 

    } 

    mobilenav > nav > ul:hover { 
     background-color: #000000;  
    } 

    mobilenav > nav > ul > li { 
     flex: 0 1 auto; 
     margin: 0; 
     padding: 0; 
     position: relative; 
     width: 100%; 
     transition: all linear 0.1s;  
    } 

    mobilenav > nav > ul > li a + div { 
     display: none; 
     position: absolute; 
    } 

    mobilenav > nav > ul > li:hover a + div { 
     display: block; 
     background-color: #000000; 
    } 

    mobilenav > nav > ul > li a + div > ul { 
     list-style-type: none; 
    } 

    mobilenav > nav > ul > li a + div > ul > li { 
     margin: 0; 
     padding: 0; 
    } 

    mobilenav > nav > ul > li a + div > ul > li > a { 
     display: block; 
     padding: .25rem 1.5rem; 
     text-decoration: none; 
    } 

    mobilenav > nav > ul > li > a { 
     align-items: flex-start; 
     display: flex; 
     padding: 1rem 1.5rem; 
     text-decoration: none; 
    } 

<mobilenav> 
    <nav role="navigation"> 
     <ul> 
      <li> 
       <a href=""> 
        <div>Navigation</div> 
       </a> 
       <div> 
        <ul> 
         <li><a href="">Home</a></li> 
         <li><a href="">About Us</a></li> 
         <li ><a href="">Research</a></li> 
         <li><a href="">Services</a></li> 
         <li><a href="">Ask a Librarian</a></li> 
         <li><a href="">Archives &amp; Special Collections</a></li> 
         <li><a href="">Exhibitions</a></li> 
         <li><a href="">Plant Information</a></li>     
        </ul> 
       </div> 
      </li> 
     </ul> 
    </nav> 
</mobilenav>

這裏的網站：

http://nybg.beta.libguides.com/

謝謝！

來源

2016-12-24 Edgar

你應該表現出 – doz87

出於某種原因，似乎你的mobilenav有display設置爲block在桌面上。您可以使用display: none;與媒體查詢桌面這樣的：

@media(min-width: 601px) { 
    mobilenav { 
    display: none; 
    } 
}

或者只設置mobilenav到display: none;臺式機和使用媒體查詢移動到display設置爲block移動：

mobilenav{ 
    display: none; 
} 

@media(max-width: 600px){ 
    mobilenav{ 
    display: block; 
    } 
}

工作JSFIDDLE。

也許你應該爲桌面和移動設備使用相同的菜單，使用媒體查詢的風格也不同。

此外，我建議你把css放在外部文件中，而不是像你現在在你的網站上的<style></style>之間。

來源

2016-12-24 21:29:17 Ionut

謝謝你這麼多你的媒體查詢！如果我想在桌面版本的菜單上應用JavaScript，但不是在移動版本上，我是否仍然使用相同的HTML？我最初將它作爲一個菜單，但我還不知道很多JavaScript，這對我來說是一個挑戰。 – Edgar

我將把我的CSS放在一個單獨的文件中 - 謝謝！ – Edgar

@EstherMarie，它通常應該是相同的HTML代碼，這實際上取決於你想要做什麼。在這種情況下你不需要JavaScript。您可以使用媒體查詢，您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries閱讀更多關於它們的信息，還可以在Google上找到更多信息。另外，如果你認爲我的答案對你有幫助，請不要忘記接受它。謝謝。 – Ionut

嘗試添加媒體querys：

@media (min-width: 1200px) { mobilenav {display:block;} } 
@media (min-width: 1199px) { mobilenav {display:none;} }

Media querys example

來源

2016-12-25 04:40:15

在桌面上隱藏div

回答

相關問題