Jump to content


[Snippet] pro Dropdown Menu


28 replies to this topic

#16 jon

    Etomite Forum Newbie

  • Member
  • 39 posts

Posted 10 October 2008 - 01:01 AM

View Postjon, on Oct 8 2008, 02:26 PM, said:

my only concern is relatively minor: if you have Wide top level Menu and/or a Narrow Window, the menu does not scroll horizontally as you might expect. Everything sort of breaks down at that point, i.e. - text in one place and background in another.

Of course, I'd be interested in hearing if anyone has solved that minor annoyance. If I come up with a solution, I'll let you know.
OK, I've found a solution: enclose the menu in a fixed size table at least as large as the menu bar.

<center>
<table width=1000>
<tr>
<td>

</td>
</tr>
</table>
</center>
where 1000 is the approximate (slightly greater than) pixel width of the menu bar.

I also added the <center> because menu bars have to be centred on wide screens on my web sites or they look "odd", as I centre the titles above the menu bar, and some of the pages have pictures centred for most of the page.

#17 Tonyb

    Etomite Forum Newbie

  • Member
  • 5 posts

Posted 30 March 2009 - 08:13 PM

Hi guys

I am trying out this menu and I can't see any drop down items only top level items. I have tried varoius different Doc Type's as mentioned here already, but it has made no difference.

If anyone can shed some light on this for me that would be great as I would like to use this menu system if possible. By the looks of this support thread there has not been many problems with this snippett, so hopefully it may be just something silly that I haven't done,

Cheers

#18 Cris D.

    Loves Etomite Forums!

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

Posted 30 March 2009 - 08:32 PM

Do you have published children of the top level?
[edit] there are only 2 variables that can be set in the snippet or in snippet calls to control what is displayed, the default is to show all for the whole site if it is published and selected to "show in menu". Have you hcanged or added any variables to the snippet or snippet call?

Otherwise, have a look at the source code and see if the tables and child pages are being outputted. If they are, the css might be to blame.

Edited by Cris D., 30 March 2009 - 08:36 PM.


#19 katherholt

    Likes Etomite Forums!

  • Member
  • PipPip
  • 323 posts

Posted 30 March 2009 - 09:17 PM

Are you calling the snippet as:
[!prodrop2!]
I use this menu a lot and love it, if you need css help, or code, let me know.

View PostTonyb, on Mar 30 2009, 03:13 PM, said:

Hi guys

I am trying out this menu and I can't see any drop down items only top level items. I have tried varoius different Doc Type's as mentioned here already, but it has made no difference.

If anyone can shed some light on this for me that would be great as I would like to use this menu system if possible. By the looks of this support thread there has not been many problems with this snippett, so hopefully it may be just something silly that I haven't done,

Cheers


#20 Tonyb

    Etomite Forum Newbie

  • Member
  • 5 posts

Posted 31 March 2009 - 01:04 PM

View Postkatherholt, on Mar 30 2009, 09:17 PM, said:

Are you calling the snippet as:
[!prodrop2!]
I use this menu a lot and love it, if you need css help, or code, let me know.


Thanks guys it would seem it was the css side of things. I have everything working ok now.

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


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.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users