Chrome CSS Drop Down Menu onClick, instead of Mouse Over

[jessyhanley]

1) Script Title: Chrome CSS Drop Down Menu (v2.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:
I use the Chrome CSS Drop Down Menu on our site, however.... i would like to launch the menu OnClick instead of OnMouseOver.

I thougth this would work :

<a href="#" onClick="cssdropdown.dropit(this,event,'dropmenu1')">Options</a>

But nothing happens when I click.

Ideally I would like the menu to show up when the user clicks on the link, and then stay in the on state just the way it does for the OnMouseOver version... just until the user mouses off of the menu completely.

Any help would be really appreciated... I'm pulling my hair out!

[jessyhanley]

I keep getting the following js error

Error: e has no properties
Line: 23

[dmcclurg]

Hey Jessy,

Just wondering if you had any luck with this?

Thanks
D

[ddadmin]

A few changes need to happen within chrome.js, instead of inside the HTML of your page. Just use the below modified chrome.js file to get the menu to drop down onclick instead of onmouseover.

[jessyhanley]

This is great, but I can only get it to work for one "menu" per page....

PLEASE NOTE THIS USES THE edited chrome.js above (for onClick instead of mouseOver)

The first one works fine:

<div class="chromestyle" id="chromemenu">
  <ul>
	<li><a href="/order_prints.php" title="order prints">Prints</a></li>
	<li>|</li>
	<li><a href="/gifts/products.php" rel="dropmenushop" title="create photo gifts">Photo Gifts ▼</a></li>
	<li>|</li>
	<li><a href="/gifts/books/book_explain.php" title="create photo books">Photo Books</a></li>
	<li>|</li>
	<li><a href="/join_club.php" title="join the myphotoalbum club">The Club</a></li>
</ul>
</div>	
		
<div id="dropmenushop" class="dropmenudiv">
	<a href="">cards &amp; invitations</a>
        <a href="">photo books</a>
	<a href="">mugs &amp; mousepads </a>
	<a href="">home &amp; office</a>
	<a href="">apparel</a>
	<a href="">games &amp; sports</a>
	<a href="">personalized DVDs</a>
	<a href="">prints &amp; posters</a>
	<a href="">picture frames</a>
	<a href="">club membership</a>
	<a href="">view all products</a>
     </div>
</div>

and then further down the page this one nothin happens

<div id="chromemenu"><a href="#" rel="dropmenuitem1" title="options">Different Link ▼</a></div>	
	<div id="dropmenuitem1" class="dropmenudiv">
		<a href="">Link1 </a>
		<a href="">link2</a>
	</div>

[jessyhanley]

Hi guys... thanks I did figure this out. I was trying to have 1 chrome menu with links in multiple places. I didn't want to have to have 1 long string generate in my code. However... this is how I made it work.....

For each menu I did the following:

<div id="chromemenuNAME1"><a href="#" rel="dropmenuNAME1" title="options">Link ?</a></div>	
	<div id="dropmenuNAME1" class="dropmenudiv">
		<a href="">Link1 </a>
		<a href="">link2</a>
	</div>
	
<script type="text/javascript">
cssdropdown.startchrome("chromemenuNAME1")
</script>



<div id="chromemenuNAME2"><a href="#" rel="dropmenuNAME2" title="options">Different Link ?</a></div>	
	<div id="dropmenuNAME2" class="dropmenudiv">
		<a href="">Link1 </a>
		<a href="">link2</a>
	</div>
	
<script type="text/javascript">
cssdropdown.startchrome("chromemenuNAME2")
</script>