Vertical reveal menu

Discussion in 'Javascript' started by phatnugs@gmail.com, Aug 4, 2007.

  1. Guest

    Hi all, I've been working on a vertical reveal menu. Right now it
    works ok with CSS. But what i'd like it to do is when you mouse over,
    reveal the menu and have that menu stay open until the user mouses
    over another menu item. Right now it's a bit jumpier than i'd like it
    and would like to basically have it stay open on a mouse out event,
    again until it hits another menu item. Is this possible? Any direction
    would be great.

    sample menu: http://www.mikepetruna.com/menu.html

    thanks!
    Mike
    , Aug 4, 2007
    #1
    1. Advertising

  2. Guest

    Here's how I would modify your code to do what you want. I haven't
    checked it for syntax. Hopefully you have enough javascript knowledge
    to know how to fix any syntax errors below.


    <style>
    dd { display: none };
    </style>

    <script>
    var activeMenuParent = null;
    function setDisplay ( parent, display ) {
    if ( ! parent ) return; // parent not set, do nothing

    var els = parent.getElementsByTagName ( 'dd' );
    for ( var i = 0 ; i < els.length; i ++ )
    els.style.display = display;
    }

    function hideMenu ( parent ) {
    setDisplay ( parent, 'none' );
    }
    function showMenu ( link ) {
    hideMenu ( activeMenuParent ); // hide menu if showing
    var parent = link.parentNode.parentNode; // a, dt, dl
    setDisplay ( parent, 'block' );
    this.activeMenuParent = parent;
    }
    </script>

    <html>
    <div id="dlmenu">

    <ul id="menu">
    <li>
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="gallery">
    <dt><a href="#" class="menu" onmouseover="showMenu(this)">Menu</a></
    dt>
    <dd><a href="#">SubMenu 1</a></dd>
    <dd><a href="#">SubMenu 2</a></dd>
    <dd><a href="#">SubMenu 3</a></dd>

    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="gallery">
    <dt><a href="#" class="menu" onmouseover="showMenu(this)">Menu 2</a></
    dt>
    <dd><a href="#">SubMenu 1</a></dd>
    <dd><a href="#">SubMenu 2</a></dd>
    <dd><a href="#">SubMenu 3</a></dd>

    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>
    </div>
    </html>
    , Aug 4, 2007
    #2
    1. Advertising

  3. David Mark Guest

    On Aug 4, 12:15 pm, "" <> wrote:
    > Hi all, I've been working on a vertical reveal menu. Right now it
    > works ok with CSS. But what i'd like it to do is when you mouse over,


    There are so many things wrong with it that I don't know where to
    begin. Won't work without a mouse. The selector "a:visted" should
    obviously be "a:visited". Why use definition lists for a navigation
    menu? There's a CSS "*" hack that is presented to all browsers, when
    it is clearly targeted at IE6 and under. And presenting IE6 with a
    table inside an anchor is nuts. The good news is that a CSS solution
    won't do what you want anyway.

    > reveal the menu and have that menu stay open until the user mouses
    > over another menu item. Right now it's a bit jumpier than i'd


    You'll need script for this. Something like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
    www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Vertical Menu</title>
    <style type="text/css">
    #menu {list-style-type:none;margin:0;padding:0;width:10em;background-
    color:#ffcc66;color:black;font-weight:bold;font-size:100%;font-
    family:Arial,Helvetica,sans-serif}
    #menu ul {list-style-type:none;margin:0;padding:0}
    #menu li.gallery {border-top:1px solid #000000;padding:.25em 0 .25em
    0}
    #menu li a, #menu li a:visited {display:block;text-
    decoration:none;width:auto;margin:0 0 0 0;padding:0}
    #menu ul li ul {padding:0 0 0 1em}
    #menu ul li ul li {margin:0;padding:.25em 0 .25em 0}
    #menu ul li ul li a:hover, #menu ul li ul li a:focus, #menu ul li ul
    li a:active {background-color:inherit;color:#993300}
    </style>
    <!--[if IE]>
    <style type="text/css">
    #menu li a, #menu li a:visited {width:100%}
    </style>
    <![endif]-->
    <script type="text/javascript">
    //<![CDATA[
    var currentMenu;

    function getMenu(el) {
    var p = el.parentNode;
    if (p) {
    var list = p.getElementsByTagName('ul');
    if (list && list.length) return list[0]
    }
    }

    function showMenu() {
    var el = getMenu(this);
    if (el && el.style) {
    if (currentMenu && currentMenu.style && currentMenu != el)
    currentMenu.style.display = 'none';
    el.style.display = 'block';
    currentMenu = el
    }
    }

    function toggleMenu() {
    var el = getMenu(this);
    if (el && el.style) {
    if (currentMenu && currentMenu.style && currentMenu != el)
    currentMenu.style.display = 'none';
    el.style.display = (el.style.display == 'none')?'block':'none';
    currentMenu = (el.style.display == 'none')?null:el
    }
    }

    if (document.getElementById && document.getElementsByTagName &&
    document.getElementsByTagName('html') &&
    document.getElementsByTagName('html')[0].style &&
    typeof(document.getElementsByTagName('html')[0].style.visibility) ==
    'string') {
    document.write('<style type="text/css">#menu {visibility:hidden}<\/
    style>');
    window.onload = function() {
    var el = document.getElementById('menu');
    if (el && el.style) {
    var links = el.getElementsByTagName('a');
    if (links) {
    var lists;
    for (var i = links.length - 1; i >= 0; i--) {
    if (!links.href && links.parentNode) {
    links.tabIndex = 0;
    links.onmouseover = showMenu;
    //links.onfocus = showMenu;
    links.onclick = toggleMenu;

    lists = links.parentNode.getElementsByTagName('ul');
    if (lists && lists.length && lists[0].style) {
    if (lists[0].id) links.href = '#' + lists[0].id; else
    links.href = '#';
    lists[0].style.display = 'none'
    }

    }
    }
    }
    el.style.visibility = 'visible'
    }
    };
    }
    //]]>
    </script>
    </head>
    <body>
    <div id="menu">
    <ul>
    <li class="gallery"><a>Menu 1</a>
    <ul id="menu1">
    <li><a href="#">SubMenu 1</a></li>
    <li><a href="#">SubMenu 2</a></li>
    <li><a href="#">SubMenu 3</a></li>
    </ul>
    </li>
    <li class="gallery"><a>Menu 2</a>
    <ul id="menu2">
    <li><a href="#">SubMenu 1</a></li>
    <li><a href="#">SubMenu 2</a></li>
    <li><a href="#">SubMenu 3</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>

    Notice I commented out the onfocus assignment in favor of onclick
    (which will also work without a mouse.) If you want to use onfocus,
    don't use onclick as the results of both together are unpredictable.

    Also, for better accessibility with screen readers, when showing a
    menu, set the focus to the first link.

    One other note. I suggest you switch to HTML. You are serving your
    XHTML as text/html and this script won't work when and if you decide
    to serve XHTML properly. To make it work as such, you can remove the
    one instance of document.write as it exists only to prevent the menus
    from flashing during page load.
    David Mark, Aug 5, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Squall

    Vertical menu link to iframe

    Squall, Aug 2, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    795
    Curt_C [MVP]
    Aug 2, 2005
  2. Dean Clowe

    Vertical Menu Bar

    Dean Clowe, Oct 28, 2003, in forum: Java
    Replies:
    0
    Views:
    499
    Dean Clowe
    Oct 28, 2003
  3. Nico Schuyt

    CSS menu vertical

    Nico Schuyt, Oct 16, 2004, in forum: HTML
    Replies:
    8
    Views:
    1,141
    brucie
    Oct 16, 2004
  4. Gregory Brown

    Question about BlankSlate.reveal

    Gregory Brown, Jan 25, 2009, in forum: Ruby
    Replies:
    7
    Views:
    174
    Gregory Brown
    Jan 26, 2009
  5. ATS

    Hide/reveal DHTML

    ATS, Nov 23, 2004, in forum: Javascript
    Replies:
    11
    Views:
    155
    Robert
    Dec 3, 2004
Loading...

Share This Page