menu css html5 - >可見和隱藏，屏幕大小

我想隱藏菜單隻有當屏幕大小爲320px ...現在菜單總是隱藏，我需要給他們打電話。menu css html5 - >可見和隱藏，屏幕大小

當屏幕尺寸320px的是，那是好的，當我需要調用＃主導航，但默認情況下的大小必須是可見

* { 
    box-sizing: border-box; 
} 

html, body { 
    min-height: 100%; 
    font-size: 11pt; 
    font-family: 'PT Sans', Arial, sans-serif; 
} 

.main-header { 
    background: linear-gradient(#3F94BF, #246485); 
    padding: 5px; 
    text-align: center; 
    color: white; 
    text-shadow: #222 0px -1px 1px; 
    position: relative; 
    width: 100%; 
    transition: all 0.3s ease; 
} 

.page-wrap { 
    float: right; 
    width: 100%; 
    transition: width 0.3s ease; 
} 

nav a { 
    color: #fff; 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    line-height: 40px; 
    text-shadow: 1px 1px 0px #283744; 
} 

nav a:hover, nav a:active { 
    background-color: #8c99a4; 
} 

.main-nav { 
    position: fixed; 
    width: 0; 
    height: 100%; 
    font-weight: bold; 
    background: linear-gradient(#3F94BF, #246485); 
    overflow: hidden; 
    transition: width 0.3s ease; 
} 

.content { 
    overflow: hidden; 
    padding: 20px 20px 20px 20px; 
} 

#close-menu { 
    display: none; 
} 

#open-menu { 
     display: block; 
    } 

#main-nav:target { 
    width: 20%; 
} 

#main-nav:target + .page-wrap { 
    width: 80%; 

    .open-menu { 
     display: block; 
    } 
    .close-menu { 
     display: none; 
    } 
    .main-header { 
     width: 80%; 
     left: 20%; 
    } 
} 

/*Styles for screen 515px and lower*/ 
@media only screen and (max-width: 480px) { 

}

HTML

<html> 
    <head> 
     <title>Test</title> 
     <meta http-equiv="Content-Language" content="de" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

    </head> 

    <body> 
     <nav class="main-nav" id="main-nav"> 
      <a href="#details">Details</a> 
      <a href="#adresses">Adresses</a> 
      <a href="#kontakt">Kontakt</a> 
     </nav> 

     <div class="page-wrap"> 

      <header class="main-header"> 
       <a href="#main-nav" class="open-menu"> ☰</a> 
       <a href="#close-menu" class="close-menu">close</a> 

       <h1>VIGOUI</h1> 
      </header> 

      <div class="content"> 
       It’s all about playing four quarters. I think we played well but the other team played well too. They took advantage of certain circumstances that arose. It’s a physical game. 
      </div> 

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

來源

2013-04-11 Fawi

解決方案已更新。 – 2013-04-11 16:21:39

首先，你需要媒體查詢（http://jsfiddle.net/3X8Tq/）

@media all and (min-width: 320px) { 
    #main-nav { 
    width: 20%; 
} 
    .page-wrap { 
     width: 80%; 
    } 
}

這對於小窗口非常適用，但對於大屏幕關閉按鈕不起作用。這是因爲關閉按鈕從未工作。它僅適用於CSS，因爲它只應用open：target。所以讓我們關閉按鈕。我們在頁面上沒有打開菜單或關閉菜單ID，但您確實有CSS。

查看HREF #main-nav指向導航。沒有#close-menu ID。讓我們添加一個。

<div id="close-menu"></div>

然後我們將它放在導航欄之前。我們也將添加CSS的#close-menu

#close-menu:target + #main-nav { 
    width: 0; 
} 
#close-menu:target ~ .page-wrap { 
    width: 100%; 
    left: 0; 
}

解決方案：http://jsfiddle.net/3X8Tq/1/

在你的CSS的樣子，我相信你有它是如何工作的誤解。您的CSS中的子類只能與less css庫一起使用。頁面上不存在#close-menu和#open-menu。我建議閱讀：目標和一般的CSS選擇器。

來源

2013-04-11 15:43:18

我誤讀了你的問題，將更新 – 2013-04-11 15:47:03

感謝它效果不錯:)＃close-menu：target〜.page-wrap - >〜Aptana Studio 3將此（〜）顯示爲錯誤？ ul〜p {color：red; red; }這個兄弟組合子類似於X + Y，但是它並不嚴格。雖然相鄰的選擇器（ul + p）只會選擇緊接在前一個選擇器之前的第一個元素，但這個選擇器更具概括性。它會根據我們上面的例子選擇任何p元素，只要它們遵循ul。 – Fawi 2013-04-12 11:52:48

menu css html5 - >可見和隱藏，屏幕大小

回答

相關問題