Jump to content


[Snippet] pro Dropdown Menu

Started by Cris D., Mar 08 2008 02:04 PM

28 replies to this topic

#21 bwoodsdesign

    Likes Etomite Forums!

  • Member
  • PipPip
  • 236 posts

Posted 19 July 2010 - 04:37 PM

Hi there

I am using this snippet at:
http://www.mnhumane.org/new

But my client wants to be able to have more drop-levels or fly-out levels on the menu. From the looks of the previous posts here, I should be able to do that.

I have tried messing with the snippet variables but don't see much difference. Is there someplace I can change this or not? I can't seem to get it to work.

The "Companion Animals" menu tab should also have a sub-item ("Cruelty & Abuse") which has children published under that, and should fly-out horizontally.

I'd love to see if anyone can help me figure this out ASAP, so I can either tell the client and let them deal with it, or find another menu snippet (which I do not really wanna do!).

Thanks,

-Bobbi Jo

Edited by bwoodsdesign, 19 July 2010 - 04:39 PM.

#22 katherholt

    Likes Etomite Forums!

  • Member
  • PipPip
  • 323 posts

Posted 19 July 2010 - 04:47 PM

Yes, this can be done using the //ProDropMenuV3 snippet.
Karen

View Postbwoodsdesign, on 19 July 2010 - 04:37 PM, said:

Hi there

I am using this snippet at:
http://www.mnhumane.org/new

But my client wants to be able to have more drop-levels or fly-out levels on the menu. From the looks of the previous posts here, I should be able to do that.

I have tried messing with the snippet variables but don't see much difference. Is there someplace I can change this or not? I can't seem to get it to work.

The "Companion Animals" menu tab should also have a sub-item ("Cruelty & Abuse") which has children published under that, and should fly-out horizontally.

I'd love to see if anyone can help me figure this out ASAP, so I can either tell the client and let them deal with it, or find another menu snippet (which I do not really wanna do!).

Thanks,

-Bobbi Jo

#23 bwoodsdesign

    Likes Etomite Forums!

  • Member
  • PipPip
  • 236 posts

Posted 19 July 2010 - 04:53 PM

View Postkatherholt, on 19 July 2010 - 04:47 PM, said:

Yes, this can be done using the //ProDropMenuV3 snippet.
Karen

OK - I got it sorted - I had those child items set as "hide in menus". Now I just have to figure out how to adjust my CSS to add the fly-out classes & styles.

Thanks!

#24 katherholt

    Likes Etomite Forums!

  • Member
  • PipPip
  • 323 posts

Posted 19 July 2010 - 05:16 PM

Take a look at this:
http://www.visitrosw...new/prodrop.css

View Postbwoodsdesign, on 19 July 2010 - 04:53 PM, said:

OK - I got it sorted - I had those child items set as "hide in menus". Now I just have to figure out how to adjust my CSS to add the fly-out classes & styles.

Thanks!

#25 bwoodsdesign

    Likes Etomite Forums!

  • Member
  • PipPip
  • 236 posts

Posted 20 July 2010 - 04:32 PM

View Postkatherholt, on 19 July 2010 - 05:16 PM, said:

Take a look at this:
http://www.visitrosw...new/prodrop.css

This has been helpful, but the problems I'm now having are:

- The fly-out (sub down) css is not working as I want it to - rather the sub-items of the 2nd level UL (Cruelty & Abuse) are popping up above the moused-over menu item rather than flying out horizontally.

- The css I tried to replace with my own (navi.css) makes it difficult to combine with the prodrop css because the prodrop version uses images for hovering states, etc. and my menu css only uses pure css with colors, etc. and I can't seem to combine them without gobbeldy-gook in my code

Here is the site
http://www.mnhumane.org/new

CSS
http://www.mnhumane....draft2/navi.css
http://www.mnhumane....ft2/prodrop.css

#26 katherholt

    Likes Etomite Forums!

  • Member
  • PipPip
  • 323 posts

Posted 20 July 2010 - 05:24 PM

See if this will help:

example: http://www.bikeroswell.com

put snippet in div tags in your template:

<div class="nav2">[!prodrop2!] </div>

attached are 2 files from this website (the snippet and the css)

make sure you are using this DOC TYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>




View Postbwoodsdesign, on 20 July 2010 - 04:32 PM, said:

This has been helpful, but the problems I'm now having are:

- The fly-out (sub down) css is not working as I want it to - rather the sub-items of the 2nd level UL (Cruelty & Abuse) are popping up above the moused-over menu item rather than flying out horizontally.

- The css I tried to replace with my own (navi.css) makes it difficult to combine with the prodrop css because the prodrop version uses images for hovering states, etc. and my menu css only uses pure css with colors, etc. and I can't seem to combine them without gobbeldy-gook in my code

Here is the site
http://www.mnhumane.org/new

CSS
http://www.mnhumane....draft2/navi.css
http://www.mnhumane....ft2/prodrop.css

Attached Files


#27 youngboy815

    Etomite Forum Newbie

  • Member
  • 3 posts

Posted 30 July 2010 - 03:11 PM

Looks great Cris - that is some real excellent work, and thanks to Stu at CSSPlay as well. Just give me a holler when you need design work!

Knowing that Stu is now a full-time freelance like me, I certaily hope that everyone who uses this snippet on any commercial website pays attention to the copyright notice with this snippet and sends a donation his way

#28 masdfjodss

    Etomite Forum Newbie

  • Member
  • 1 posts

Posted 11 March 2011 - 02:45 PM

is access keys working in this version?

#29 Cris D.

    Loves Etomite Forums!

  • Developers
  • PipPipPipPip
  • 1,104 posts
  • Gender:Male

Posted 13 March 2011 - 09:50 AM

View Postmasdfjodss, on 11 March 2011 - 02:45 PM, said:

is access keys working in this version?
Sure is. See an example here: http://www.artimenta.../pro_drop2.html Try clicking "ALT + "a" and to select the "email link" page and hit "Enter" to go there. Access keys in this menu can be set in the snippet configuration.
Back to Completed Snippets · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users