Css: target selector of one link targeting two divs?

I'm trying to make a simple mobile menu toggle with CSS only. By showing and hiding two buttons with two different class references that show or hide the navigation menu.

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

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

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

Now I want them to show and hide the menu as well. What I changed from the tutorial is that the toggle buttons are not in the same div and now I cannot get them to target the navigation. So this is the HTML / CSS markup problem I have.

This is what I have so far, I think it's simple, 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>

      

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 the Fiddle

Smal update, the manual uses the: target selector, this is w3school's description: C # urls followed by the anchor name, a link to a specific element within the document. The item associated with it is the target item. The: target selector can be used to style the currently active target element. w3schools.com/cssref/sel_target.asp

+3


source to share


3 answers


You could really simplify your code. You don't need a div for this example. 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>
      

Run codeHide result


Here is a violin

+1


source


Are you interested in creating a dropdown menu

(This only creates a regular dropdown css menu and uses regular transitions in 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 the menu?

(This checkbox uses transitions and HTML checkboxes to create a 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;}

      

0


source


As always, the answer is simpler than you might first think. So I am targeting an element that contains the goals for which I want to target. See Code and script.

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 the link

0


source







All Articles