CSS menu with onclick instead of hover

**Cyroq** · 08-28-2010 11:20 AM

Hi all,

I have created a simple css menu, which opens the submenu when the mouse hovers over the menu items. This goes a little too fast, so I want to change it into a click (onMouseUp I suppose) so the submenu items appear when one of the menu items is clicked. Is it possible with css to achieve this?

My css code:

Code:

#menu li {list-style-type: none;}
#menu li a {text-decoration: none; color: #000000;}
#menu ul li:hover {position:relative; list-style-image:url(images/list1.png);}
#menu ul { line-height: 35px; font-size: 22px;}

/*submenu*/
#menu ul ul {
	display: none;
	position: relative;
	line-height: 24px;
	font-size: 18px;
	list-style: disc;
}
#menu ul li:hover ul {display:block;}

**Fang** · 08-29-2010 02:26 AM

No. Use JavaScript to alter the css and add event handlers.

**tirna** · 08-29-2010 04:03 AM

Originally Posted by Cyroq

Is it possible with css to achieve this?

Not as far as I know.

Maybe use something like this as a guide using an onclick event handler.

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

<!--



ul {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

list-style-type: none}

 

.mainMenus li {

position: relative}

 

.subMenus {

display: none;

position: absolute;

top: 0px;

left: 120px}

 

-->

</style>

<script type="text/javascript">

<!--

 

window.onload=function() {

 subMenusO = getElementsByClassName(document,'ul','subMenus');

}

//-----------------------------------------------------------

 

function showSubMenu(elemId) {

 var dispStatus = (document.getElementById(elemId).style.display == 'block')? 'none' : 'block';

 //hide any visible submenus

 for(var i=0; i < subMenusO.length; i=i+1) {

     subMenusO[i].style.display = 'none';

    }

    //show/hide this menu id

    document.getElementById(elemId).style.display = dispStatus;

}

//--------------------------------------------------------------------------



function getElementsByClassName(oElm, strTagName, strClassName){

    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);

    var arrReturnElements = new Array();

    strClassName = strClassName.replace(/\-/g, "\\-");

    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");

    var oElement;

    for(var i=0; i<arrElements.length; i++)

    {

        oElement = arrElements[i];

        if(oRegExp.test(oElement.className))

        {

            arrReturnElements.push(oElement);

        }

    }

    return (arrReturnElements)

}

 

//-->

</script>



</head>

<body>

<ul class="mainMenus">

    <li onclick='showSubMenu("sm_item1")'> 

     Main menu 1

          <ul class="subMenus" id="sm_item1" >

                 <li>Sub menu 1 item 1</li>

                 <li>Sub menu 1 item 2</li>

                 <li>Sub menu 1 item 3</li>

                 <li>Sub menu 1 item 4</li>

          </ul>

    </li>

    <li onclick='showSubMenu("sm_item2")'> 

     Main menu 2

            <ul class="subMenus" id="sm_item2">

                  <li>Sub menu 2 item 1</li>

                   <li>Sub menu 2 item 2</li>

             </ul>

    </li>

</ul>

</body>

</html>

**Cyroq** · 08-29-2010 07:36 AM

Thanks a lot! Your code works fine to me, with some tweaks

**tirna** · 08-29-2010 07:47 AM

no problem - you're welcome

**Cyroq** · 08-29-2010 07:57 AM

Hmm, I spoke too soon. When testing offline, everything works fine. When I test it online (in Internet Explorer and Chrome) it 'blocks' other code that I use for a simple lightbox. The page jumps to the top but no lightbox appears. Internet Explorer also shows an error: 'subMenusO' is undefined.

This is the code for the lightbox, if it helps you.

Code:

var curr_lb_div; 
var is_modal = false; 
	 
function ShowLightBox(lb_div, isModal) 	{ 
	    document.getElementById(lb_div).style.display='block'; 
	    document.getElementById('fade').style.display='block'; 
	    curr_lb_div = lb_div; 
	    if (isModal) 
	        is_modal = true; 
	    else is_modal = false; 
	} 
	 
function HideLightBox() { 
	    if (document.getElementById(curr_lb_div)) 	    { 
	         document.getElementById(curr_lb_div).style.display='none'; 
	         document.getElementById('fade').style.display='none'; 
	         curr_lb_div = ''; 
	    } 
	}

Do you know what could be the problem?

EDIT: I noticed some other code also uses window.onload, so I merged them together. Now IE doesn't show the error anymore, but the lightbox still isn't showing...
Or shall I move this topic to the Javascript section?

**Cyroq** · 08-29-2010 09:26 AM

Nevermind, I solved it! I don't know how, but I guess something went wrong with uploading the files.

Thread: CSS menu with onclick instead of hover

Thread Tools

Display

CSS menu with onclick instead of hover

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions