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

Groups > comp.lang.javascript > #20869

Enhancing typical CSS drop menu with onclick event

Show all headers | View raw

Below is an old-fashioned dropdown method that can still be good for 
devices that support :hover but which works poorly on touch screen devices 
where :hover and onmouseover doesn't exist or isn't usable anymore. In this 
example there are two independent 'navmenu' class span blocks, which may 
appear in different places on a page, although more typically similar 
things may be done as a nested group of <ul> dropdowns in a holding <ul> in 
horizontal or vertical site navigation style (e.g. A List Apart, Son of 
Suckerfish etc.).

However, using a same html class for separate menus, I would like a 
javascript to apply 'left: auto' to the dropdown navmenu that is clicked on 
(instead of using hover as below). Or perhaps it could equally be done by 
'display' a previously 'hidden' html object.

Thereafter when either clicking the same node link a second time or another 
node link on the same page, the previously visible dropdown should become 
hidden again, so only one dropdown is visible at any one time.

How can this be done in Javascript? (I guess collecting the relevant 
classes and applying changes in combination with 'this' keyword).

<!DOCTYPE html>

<style>
.navmenu .dropdown{
left: -999em;
position: absolute;
display: block;
}

.navmenu:hover .dropdown{
left: auto;
}

</style>


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

For added usability an "x" could be included somewhere, maybe at the 
bottom-right or top-right of each dropdown span block, which could remove 
the current dropdown when clicked.

Any ideas, code bits or links to sites that have solved this already 
(although not by popular code libraries) would be much appreciated!

Tuxedo

Back to comp.lang.javascript | Previous | Next — 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