/    Sign up×
Community /Pin to ProfileBookmark

CSS menu with onclick instead of hover

Copy linkTweet thisAlerts:
Aug 28.2010

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;}[/CODE]

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangAug 29.2010 — No. Use JavaScript to alter the css and add event handlers.
Copy linkTweet thisAlerts:
@tirnaAug 29.2010 —  Is it possible with css to achieve this?

[/quote]

Not as far as I know.

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

[code=php]
<!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>
[/code]
Copy linkTweet thisAlerts:
@CyroqauthorAug 29.2010 — Thanks a lot! Your code works fine to me, with some tweaks ?
Copy linkTweet thisAlerts:
@tirnaAug 29.2010 — no problem - you're welcome ?
Copy linkTweet thisAlerts:
@CyroqauthorAug 29.2010 — 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 = '';
}
}[/CODE]
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?
Copy linkTweet thisAlerts:
@CyroqauthorAug 29.2010 — Nevermind, I solved it! I don't know how, but I guess something went wrong with uploading the files.
×

Success!

Help @Cyroq spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...