CODEWITHSUNDEEP
htmlcss
Jefferson
Jefferson

Reputation: 991

if div:target change css of another div

I'm trying to build a responsive mobile first navigation, trying to teach myself progressive enhancement.

What I want to do is target my #header by clicking a menu icon, and thus setting my #menu to height 100%. Basicly making it show on clicking the icon.

I tried the following:

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

Wich didn't work. Anyone got any suggestions on how to change the #menu height if the #header is targeted?

jsFiddle

Edit: Since I'm building this nav using progressive enhancement, I don't want to use any Jquery or JavaScript. The point is making it compatible with all devices before adding a next level of UX. So it needs to work WITHOUT 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>

Upvotes: 3

Views: 2649

Answers (4)

user2985029
user2985029

Reputation:

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

Upvotes: 1

nd_macias
nd_macias

Reputation: 812

Your #menu is not a direct child of #header, so you should change this:

HTML

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

CSS

#menu:target {
  height: 100%;
}

working example

Upvotes: 0

MarmiK
MarmiK

Reputation: 5775

Yes we can do but not the way you are trying,

here is the example

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

and the selector will work like this

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

I am sure this will do for height also :)

Upvotes: 0

Quentin
Quentin

Reputation: 943686

#menu is not a descendant of #header so you can't simply use a descendant selector.

It is the child of the next sibling of the #header

header#header:target + nav#primary_nav > ul#menu { }

Upvotes: 2

Related Questions