3

我正在尝试构建响应式移动优先导航，尝试自学渐进增强。

我想要做的是通过单击菜单图标来定位我的#header，从而将我的#menu 设置为100% 的高度。基本上使它在单击图标时显示。

我尝试了以下方法：

#header:target #menu {
      height:100%;
}

没有工作。如果#header 是目标，有人对如何更改#menu 高度有任何建议吗？

jsFiddle

编辑：由于我正在使用渐进增强构建此导航，因此我不想使用任何 Jquery 或 JavaScript。关键是在添加下一级用户体验之前使其与所有设备兼容。所以它需要在没有 jQuery/JavaScript 的情况下工作

<body id="home">

    <div class="wrapper">

        <header id="header">

            <h1 class="logo"><a href="">Nav</a></h1>
            <a href="#header"> <div id="nav_btn"> </div> </a>

        </header>

        <nav id="primary_nav">

            <ul id="menu">
                <li><a href="">Portfolio</a></li>           
                <li><a href="">About Me</a></li>            
                <li><a href="">Nonsense</a></li>            
                <li><a href="">Services</a></li>            
                <li><a href="">Contact</a></li>                     
            </ul>

        </nav><!--end primary_nav-->

    </div><!--end wrapper-->

</body>
4

4 回答 4

2

#menu不是的后代，#header因此您不能简单地使用后代选择器。

它是下一个兄弟姐妹的孩子#header

header#header:target + nav#primary_nav > ul#menu { }
于 2013-03-22T09:27:12.927 回答
1

将href按钮的#home

所以以下

<a href="#header"> <div id="nav_btn"> </div> </a>

变成

<a href="#home"> <div id="nav_btn"> </div> </a>

并使用这个 CSS

#home:target #menu {
      height:100%;
}

例子

于 2013-03-22T09:29:36.597 回答
0

是的，我们可以做，但不是您尝试的方式，

这是示例

http://jsfiddle.net/MarmeeK/svu5z/2/

选择器将像这样工作

#div2{height:100px;width:100px;background:red}//original color is red
#link1:hover ~ #div2{background:green} on link hover div color become green

我相信这也适用于身高:)

于 2013-03-22T09:28:25.130 回答
0

你#menu不是 的直接孩子#header，所以你应该改变这个：

HTML

<a href="#menu"><div id="nav_btn"> </div></a>

CSS

#menu:target {
  height: 100%;
}

工作示例

于 2013-03-22T09:29:05.433 回答