CSS & Java Script Menu Functions

[mrswenner]

Background: using CSS and Java Script to make a menu function on Hover (CSS) and onClick (Java). Originally the menu just used the hover functionality, but then it was requested that the code be more SmartPhone/iPad happy. Since it is my plan to later create mobile templates for this, I wanted to simply apply Java Script to appease the requestor.

 

Issue: what now works for the SmartPhone/iPad, causes funkiness with the screen version -- when a menu item is clicked, the submenu drops-down, but when the user hovers OFF the menu item, the submenu disappears; however the onclick event is not triggered, so when the user hovers back onto that menu item, the submenu reappears. The requestor feels that this would confuse the user because a submenu may be expected to appear on hover and since it does not, then the user may not think there is a submenu.

 

Expected Outcome: since this is a temporary fix, I would simply like to remove the hover action in the CSS, but whenever I do this nothing works. Please help!

 

Code - Java Script:

<script language="JavaScript" type="text/javascript">

<!--

function ToggleDisplay(id)

  {

    var elem = document.getElementById('d' + id);

    if (elem) 

    {

      if (elem.style.display != 'block') 

      {

        elem.style.display = 'block';

        elem.style.visibility = 'visible';

      } 

      else

      {

        elem.style.display = 'none';

        elem.style.visibility = 'hidden';

      }

    }

  }

//-->

</script>

 

Code - CSS:

.dropdown_1column, 

.dropdown_2columns {

margin: auto;

float:left;

position:absolute;

left:-999em; /* Hides the drop down */

text-align:left;

padding: 0;

/* Gradient background */

background-image: url("../images/z_menuBackground.png");

background-repeat: repeat;

background-position: 0% 0%;

VISIBILITY: hidden;

DISPLAY: none;

}

.dropdown_1column {width: 170px;}

.dropdown_2columns {width: 340px;}

 

#menu li:hover .dropdown_1column, 

#menu li:hover .dropdown_2columns {

left:0px;

top:auto;

padding: inherit;

}

 

Code - Menu Item:

  <li class="menu" onclick="ToggleDisplay('1')"><a href="#" class="drop">Coming Events</a>

        <div class="dropdown_2columns" id="d1" onclick="ToggleDisplay('1')"><!-- SubMenu Item code follows -->

 

To view the working test, go to http://www.myalaskacenter.com/directions/testheader2.php