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 - >可见和隐藏，屏幕大小

回答

相关问题