Results 1 to 6 of 6

Thread: Chrome CSS Drop Down Menu onClick, instead of Mouse Over

  1. #1
    Join Date
    Jul 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Chrome CSS Drop Down Menu onClick, instead of Mouse Over

    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 :
    Code:
    <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!

  2. #2
    Join Date
    Jul 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Still Stuck...

    I keep getting the following js error

    Error: e has no properties
    Line: 23

  3. #3
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Did you have any luck

    Hey Jessy,

    Just wondering if you had any luck with this?

    Thanks
    D

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  5. #5
    Join Date
    Jul 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:
    Code:
    <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

    Code:
    <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>
    Last edited by jessyhanley; 01-22-2008 at 11:29 PM. Reason: formatting

  6. #6
    Join Date
    Jul 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:
    Code:
    <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>

Bookmarks

Posting Permissions

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