Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS & Java Script Menu Functions

    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:
    Code:
    <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:
    Code:
    .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:
    Code:
       <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/direct...estheader2.php

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    1
    Thanked 1 Time in 1 Post
    wrong section. should be in javascript.

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS & Java Script Menu Functions

    I am still having a problem with this. Does anyone have a solution?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Lightbulb

    Quote Originally Posted by dmirsch View Post
    I am still having a problem with this. Does anyone have a solution?
    I had a similar problem until I found out that tablets don't really recognize the :hover of CSS.

    See this solution:
    http://www.webdeveloper.com/forum/sh...u&daysprune=30


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •