css :target selector one link targeting two div's?

Question

I am trying to make a simple mobile menu toggle with only CSS. By showing and hiding two buttons with both different links to classes that either show or hide the navigation menu.

It is a edit of this tutorial link , but now I want to have the close and open buttons to be in a saperate div (header div) and I have problems targetting the navigation to show or hide.

Somehow I can't get the links right to target the menu.

So the working part is that I have a div wich contains two links that show and hide eachother like a toggle button link

Now I want them to allso show and hide the menu. What I changed from the tutorial is that the toggle buttons aren't in the same div anymore and now I can't get them to target the navigation. So it is a HTML/CSS markup problem that I have.

This is what I've got so far, I guess it's a simple thing but any help would be appreciated.

Thanks in advance!

<style>
#header {
    width: 100%;
    height:100px;
}
/* Hide Menu*/
#mainmenu{
    display: none;
}
#buttons-container a.close-menu-primary{
    display: none;
}

/* Display Menu Items */
#header:target #mainmenu{
    display: block;
}
#buttons-container a.close-menu-primary{
    display: none;

}
/* Hide Open Toggle Link */
#header:target #buttons-container a.open-menu-primary{
    display: none;
}
/* Show Close Toggle Link */
#header:target #buttons-container a.close-menu-primary{
    display: block;
}
</style>

The HTML code

<div class="header-div" id="header">
<div id="buttons-container" >
            <a href="#header" class="open-menu-primary"><span>menu</a>
            <a href="#" class="close-menu-primary"><span>close</span></a>
</div>
</div>
  <nav class="navigation" id="navigation">
  <ul class="mainmenu" id="mainmenu">
    <li><a href="">main1</a></li>
    <li><a href="">main2</a>
      <ul id="submenu">
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2/a></li>
      </ul>
    </li>
    <li><a href="">main3</a></li>
  </ul>
</nav>

Here is a Fiddle

Smal update, the tutorial is making use of the :target selector here is the w3school discription: URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element. w3schools.com/cssref/sel_target.asp

Answer 1

You really could do with simplifying your code. For this instance you don't need the divs. and you only need one link to toggle the menu - why put one link in a div? See below

 label { cursor: pointer; } #menu { display: none; /* hide the checkbox */ } .mainmenu { display: none; } #menu:checked + .mainmenu { display: block; } nav{display:none;} label{color:blue;text-decoration:underline;} 

 <label for="menu">Menu</label> <input type="checkbox" id="menu"> <ul class="mainmenu" id="mainmenu"> <li><a href="">main1</a> </li> <li id="hover-sub"><a href="javascript:void(0)">main2</a> <ul id="submenu"> <li class="menu-item"><a href="#">sub1</a> </li> <li class="menu-item"><a href="#">sub2</a> </li> </ul> </li> <li><a href="" class="con">main3</a> </li> </ul> 

Here is a fiddle

Answer 2

Are you interested in making a dropdown menu

(This one creates just a regular css dropdown menu and uses regular transitions in the CSS:)

* {transition:all 0.3s;-webkit-transition:all 0.3s;font-family: 'Roboto', sans-serif;}
.header-nav {position:relative;float:left;margin:0 auto;}
.header-nav ul {position:absolute;float:left;list-style:none;margin:0;padding:0;}
.header-nav ul li {position:relative;float:left;border-left:4px solid rgba(224, 52, 106, 1);}
.header-nav ul li ul {margin-left:-4px;}
.header-nav > ul {position:relative;}
.header-nav > ul > li:last-child {border-right:4px solid rgba(224, 52, 106, 1);}

or a toggle button for a menu?

(This one uses transitions and HTML checkboxes to create the toggle button:)

.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {opacity: 0;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {transform:rotate(405deg);-webkit-transform:rotate(405deg);margin-top:10px;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {transform:rotate(-405deg);-webkit-transform:rotate(-405deg);margin-top:-16px;}

Answer 3

As allways the answer is more simple then you think of in the first place. So I target the element that contains both the targets I want to target. See the code and the Fiddle.

CSS code:

.wrap {
    width:100%;
    height:100%;
}
}
.header {
    width: 100%;
    height:100px;
}
#buttons-container {
    background-color: #006cad;
    text-align:right;
    padding:16px;
}
/* Hide Menu*/
#mainmenu{
    display: none;
}
#buttons-container a.close-menu-primary{
    display: none;
}
/* Display Menu Items */
#wrap:target .navigation #mainmenu{
    display: block;
}
#buttons-container a.close-menu-primary{
    display: none;

}
/* Hide Open Toggle Link */
#wrap:target #buttons-container a.open-menu-primary{
    display: none;
}
/* Show Close Toggle Link */
#wrap:target #buttons-container a.close-menu-primary{
    display: block;
}

HTML code:

<div id="wrap">
<div class="header" id="header">
<div id="buttons-container" >
                <a href="#wrap" class="open-menu-primary"><span>menu</a>
                <a href="#" class="close-menu-primary"><span>close</span></a>
</div>
</div>
      <nav class="navigation" id="navigation">
      <ul class="mainmenu" id="mainmenu">
        <li><a href="">main1</a></li>
        <li id="hover-sub"><a href="javascript:void(0)">main2</a>
          <ul id="submenu">
                <li class="menu-item"><a href="#">sub1</a></li>
                <li class="menu-item"><a href="#">sub2</a></li>
          </ul>
        </li>
        <li><a href="" class="con">main3</a></li>
      </ul>
    </nav>
</div>

Here is a Fiddle link