How to edit this nav to make it a click nav instead of a hover nav?

Question

This is the following snippet I want to edit. http://www.cssscript.com/simple-accordion-menu-with-css3-transitions/

heres the demo http://www.cssscript.com/demo/simple-accordion-menu-with-css3-transitions/

I want to click to dropdown and it stays dropped down until I click on another menu or the same one again.

Any idea on how I would be able to do this?

I dont have a code. Im pretty new at this and I have no idea how to even begin. Im not asking people to do my work but any pointers will do. — Bearsaurus, Jun 22 '15 at 23:41
Well CSS doesn't recognise a click event. The closest you'll get would be `#selector:active`. But this will only apply the css for as long as the mouse button is held down. The menu would dissappear as soon as it's released. So you'll have to work with Javascript instead. Since you're a beginner, I guess using a library like jQuery would be easiest. — icecub, Jun 22 '15 at 23:47
It's not that I mind writing a working solution for you. But you wouldn't learn anything from that. The code to make something like this isn't all to difficult, yet it's probebly quite complicated for an absolute beginner. Basicly what you want is catching a click event with jQuery, apply css that's currently in hover and remove it again if clicked a second time. — icecub, Jun 22 '15 at 23:53
As @icecub mentioned, you need to post the code you are trying to work with and let us know what you have tried. See [How do I ask a good question](http://stackoverflow.com/help/how-to-ask) in the Help section. I understand you are new and are trying to get started but if you put some more effort into helping us understand what you have tried (even if it's totally wrong), you will be more likely to get answers. Also, just a heads up that it's better to post code (even if it's from another website) instead of putting a link to it. If that website ever goes dead, your link will be useless. — Dhaust, Jun 23 '15 at 00:02
Like people have said, the idea is you should do this with JavaScript. What should work, but does not, unfortunately, is this`.menu li:focus + ul li a{ styles here}` — Radu Andrei, Jun 23 '15 at 00:31

score 0 · Answer 1 · answered Jun 23 '15 at 01:07

0

Got a solution.

Here you go: fiddle

.menu li a:focus + ul li a{ styles here}

I've also added a jQuery equivalent of a JavaScript return false on links (anchors) - because by default, an anchor with a # link will reload the page if it can't find that jump point. If your code allows for it, you can use at the first level of the menu some other element besides an anchor and not have need for the JavaScript.

answered Jun 23 '15 at 01:07

Radu Andrei

1,075
10
19

This breaks if there is something else on the page able to take focus, e.g. a form field: https://jsfiddle.net/jnwy8pyq/4/ – Jon P Jun 23 '15 at 01:43
@JonP It was a solution offered for that markup. The target idea is neat, but you need to add jump points and point the links to them. There's also the added issue that in a vertical type menu it scrolls to the jump point. Props for the solution though, i rarely remember the `:target` pseudo-class. – Radu Andrei Jun 23 '15 at 01:48
Adding meaningful links is never a bad thing, much better than a blind "#". With a small menu there would probably be no noticeable jump and as you pointed out this could be eliminated via javascript if needed. I liked the concept of using focus, I just thought I'd point out it's flaw. Certainly not worthy of a down vote. – Jon P Jun 23 '15 at 01:58
@JonP I didn't down vote nor did i upvote anything on this page. – Radu Andrei Jun 23 '15 at 02:02

Jon P · Answer 2 · 2015-06-23T01:37:42.013

Use the target pseudo-class in place of hover. Note I've added an ID to each sub-menu and used the top level nav item to link to that section.

.menu {
  margin: 0 auto;
  padding: 0;
  width: 350px;
}

.menu li { list-style: none; }

.menu li a {
  display: table;
  margin-top: 1px;
  padding: 14px 10px;
  width: 100%;
  background: #337D88;
  text-decoration: none;
  text-align: left;
  vertical-align: middle;
  color: #fff;
  overflow: hidden;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}

.menu > li:first-child a { margin-top: 0; }

.menu li a:hover {
  background: #4AADBB;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.menu li ul {
  margin: 0;
  padding: 0;
}

.menu li li a {
  display: block;
  margin-top: 0;
  padding: 0 10px;
  height: 0;
  background: #C6DDD9;
  color: #1F3D39;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}

/*This selector has changed*/
.menu > li > ul:target li a { 
  display: table;
  margin-top: 1px;
  padding: 10px;
  width: 100%;
  height: 1em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

/*This selector has changed*/
.menu > li > ul:target li a:hover {
  background: #A4CAC8;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

<nav id="menu_box">
  <ul class="menu">
    <li> <a href="#sub1">Menu 1</a> <!-- Note the href change here -->
      <ul id="sub1"><!-- Note the ID here -->
        <li><a href="#">Menu 1.1</a></li>
        <li><a href="#">Menu 1.2</a></li>
      </ul>
    </li>
    <li> <a href="#sub2">Menu 2</a>
      <ul id="sub2">
        <li><a href="#">Menu 2.1</a></li>
        <li><a href="#">Menu 2.2</a></li>
        <li><a href="#">Menu 2.3</a></li>
      </ul>
    </li>
    <li> <a href="#sub3">Menu 3</a>
      <ul id="sub3">
        <li><a href="#">Menu 3.1</a></li>
        <li><a href="#">Menu 3.2</a></li>
        <li><a href="#">Menu 3.3</a></li>
        <li><a href="#">Menu 3.4</a></li>
      </ul>
    </li>
    <li> <a href="#">Menu 4</a> </li>
  </ul>
</nav>

thanks Jon P, this was helpful. I understand how they link together, but what if i want menu 1 to also link to another page? Is it possible to anchor this to two links? — Bearsaurus, Jun 23 '15 at 18:44
Not really, one link on action. The only way to do it would be an additional linke like a "+" to expand the menu and the text to navigate to the page. That is why a hover nested menu works better in this instance. You could go with a javascript menu that expands on hover, and only collapses if another navigation mode is hovered. If you want that ask a new question, basing it off this one (and don't forget to include some code and a javascript attempt) — Jon P, Jun 23 '15 at 22:26

How to edit this nav to make it a click nav instead of a hover nav?

2 Answers2

Linked