Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #20875

Re: Enhancing typical CSS drop menu with onclick event

Show all headers | View raw

JJ wrote:

Thanks, it works. I tested on most current browsers as well as on IE8.

I added <a href="javascript:void(0);"> in the node links and removed the 
hover CSS:
.navmenu:hover .dropdown{
left: auto;
}

Your solution is a nice and short procedure without need for special HTML 
IDs for each drop down, etc. magically working on any number of independent 
structures on a page:

<span class="navmenu"><a href="javascript:void(0);">Node ...</a>
<span class="dropdown">
<ul>
<li><a href="sub...html">Sub ...</a></li>
</ul>
</span>
</span>

It's particularly useful if showing more than one drop down at the time is 
a good feature.

Alternatively, can your script easily be made to show only one dropdown at 
any one time?

For example, if Node 1 is clicked and directly thereafter Node 2 is clicked 
without first closing Node 1, can the dropdown for Node 1 close by the 
action of clicking/opening Node 2  (or any other node)? I guess it could be 
done somehow by closing the dropdown of any/all other open dropdowns, if 
there are, just before opening the latest clicked node/dropdown?

Yes, the idea is to hide the bullets. The HTML/CSS example is a skeleton, 
just to keep the code short in the original post.

Many thanks again for your script!

Tuxedo

> On Mon, 5 Aug 2013 19:35:08 +0200, Tuxedo wrote:

[...]

> 
> Use this.
> 
> <script>
> (function() {
>   function init() {
>     function navClick(ev) {
>       var ev = ev || event;
>       var node = ev.target || ev.srcElement;
>       var dropdown = node.parentNode.querySelector(".dropdown");
>       dropdown.style.left = dropdown.style.left === "" ? "auto" : "";
>       return false;
>     }
>     var navs = document.querySelectorAll(".navmenu");
>     for (var i = 0; i < navs.length; i++) {
>       var node = navs[i].querySelector("a");
>       node.onclick = navClick;
>     }
>   }
>   if (window.addEventListener) {
>     addEventListener("DOMContentLoaded", init, false);
>   } else {
>     attachEvent("onload", init);
>   }
> })();
> </script>
> 
> > <style>
> > .navmenu .dropdown{
> > left: -999em;
> > position: absolute;
> > display: block;
> > }
> > 
> > .navmenu:hover .dropdown{
> > left: auto;
> > }
> > </style>
> 
> Remove the CSS for ".navmenu:hover .dropdown" since it's no longer used.
> 
> > <span class="navmenu">
> > <a href="node1.html">Node 1</a>
> > 
> > <span class="dropdown">
> > <ul>
> > <li><a href="sub1.html">Sub 1</a></li>
> > <li><a href="sub2.html">Sub 2</a></li>
> > </ul>
> > </span>
> > 
> > </span>
> > 
> > <hr>
> > 
> > <span class="navmenu">
> > <a href="node2.html">Node 2</a>
> > 
> > <span class="dropdown">
> > <ul>
> > <li><a href="sub3.html">Sub 3</a></li>
> > <li><a href="sub4.html">Sub 4</a></li>
> > </ul>
> > </span>
> > 
> > </span>
> 
> Consider adding this CSS rule to hide the list bullets.
> 
> .dropdown {
>   list-style: none;
> }

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Enhancing typical CSS drop menu with onclick event Tuxedo <tuxedo@mailinator.com> - 2013-08-05 19:35 +0200
  Re: Enhancing typical CSS drop menu with onclick event JJ <duh@nah.meh> - 2013-08-06 15:59 +0700
    Re: Enhancing typical CSS drop menu with onclick event Tuxedo <tuxedo@mailinator.com> - 2013-08-06 16:46 +0200
      Re: Enhancing typical CSS drop menu with onclick event JJ <duh@nah.meh> - 2013-08-07 03:23 +0700
        Re: Enhancing typical CSS drop menu with onclick event Tuxedo <tuxedo@mailinator.com> - 2013-08-09 21:23 +0200

csiph-web