3

私はレスポンシブなモバイル ファースト ナビゲーションを構築しようとしており、プログレッシブ エンハンスメントを自分自身に教えようとしています。

私がやりたいことは、メニュー アイコンをクリックして #header をターゲットにし、#menu を高さ 100% に設定することです。基本的に、アイコンをクリックすると表示されます。

私は次のことを試しました：

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

うまくいきませんでした。#header がターゲットになっている場合に #menu の高さを変更する方法について何か提案はありますか?

jsフィドル

編集: プログレッシブ エンハンスメントを使用してこのナビゲーションを構築しているため、Jquery や JavaScript は使用したくありません。ポイントは、次のレベルの UX を追加する前に、すべてのデバイスと互換性を持たせることです。したがって、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

change the href of the button to #home

so the following

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

becomes

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

and use this css

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

example

于 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 に答える