|
| |
|
|
seth007
Posts: 4
Joined: 7/21/2006
Status: offline
 |
flyout menu in drop down menu - 7/21/2006 7:05:25
how do i put a fly out menu into a drop down menu,
at present i'm working on this dropdown menu www.grooming-health.com/zztest.htm but some of the drop down menus have become so long they extend beyond the bottom of the page
can anybody offer any advice
thanks in advance
Seth
|
|
|
|
Nicole
Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline
|
RE: flyout menu in drop down menu - 7/21/2006 7:27:13
Hi Seth, Welcome to Outfront!
This may not answer your question, or be a solution to what you're trying to do, but personally If I had a site with that many options within each menu item, I'd be trying to use a horizontal menu structure rather then a vertical one. Using a horizontal menu may also reduce the risk of sub menus droping off the bottom of the screen in lower resolutions.
The other thing I've read somewhere is that the optimal number of main navigation options is 7 or 8, so maybe if you gould group some items together?
I know that didn't really answer your specific question, but it's what I'd be looking at anyway.
Nicole
Edit: Stu Nicolls site has a lot of different menu options.
http://www.cssplay.co.uk/menus/index.html
_____________________________
". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?
| |
|
|
|
c1sissy
Posts: 5094
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: flyout menu in drop down menu - 7/21/2006 8:34:19
I woud suggest grouping your menu as well.
Leave the customer service on the menu as it is, then figure out what products you could leave on the home page, place a more products link to the next page and create a menu sub menu item.
You have a good deal of products that you are offering. Another good idea is to view sites that sell products such as yours and see how they group items together.
Nice job on the menu, it looks really good. I also like your color choice.
Just make sure to
validate your page You have a good deal of errors at this point that you might want to deal with before going any further with your page.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://cssinfo.debsplace.org
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
seth007
Posts: 4
Joined: 7/21/2006
Status: offline
|
RE: flyout menu in drop down menu - 7/21/2006 9:48:51
a horizontal menu could be a solution, its just i would have to redesign my site completely, i already have a site www.grooming-health.com, unfortunately i made it using tables etc and its not very search engine friendly, i was hoping to copy the look only using CSS
to be honest i've ended up using javascript for the drop down menu aspose to pure CSS, am i right in thinking that is the only way to do it and have it compatibale with most browsers
| |
|
|
|
c1sissy
Posts: 5094
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: flyout menu in drop down menu - 7/21/2006 10:04:39
quote:
to be honest i've ended up using javascript for the drop down menu aspose to pure CSS, am i right in thinking that is the only way to do it and have it compatibale with most browsers
You need to think about those who have javascript turned off.
If you are thinking about compatibility you also need to think about accessability as well.
If there is no javascript on, can people get around your site? (just a thought process for you, I'm not sure how many people do or do not have JS on or off)
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://cssinfo.debsplace.org
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
seth007
Posts: 4
Joined: 7/21/2006
Status: offline
|
RE: flyout menu in drop down menu - 7/21/2006 10:45:36
you make a good point, looking at my user stats people who cant use javascript are rare but whats the point in trying to make a site compatible to every browser if those who dont like javascript cant use it.
also Google cant see javascript, but is it possible to make internet explorer work with CSS drop down menu
| |
|
|
|
caz
Posts: 3779
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: flyout menu in drop down menu - 7/21/2006 11:09:32
As Nicole said, Stu Nicholls has a selection of CSS menus and this one
Vertical slide
may do the trick for you. It's based on an unordered list and should incorporate into your existing design fairly well. I used it in a similar situation because a) I didn't have the space to do horizontal flyouts and b) I didn't want to use js.
Cheers
Carol
PS It's fine in IE
_____________________________
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
Edge
Posts: 164
Joined: 10/12/2004
From: South Carolina
Status: offline
|
RE: flyout menu in drop down menu - 7/21/2006 12:48:04
http://www.edgesz28.com/edgesz28/website-tools/menus/zztest-h.htm
The only problem I see is in IE6 the dd hover background color only extends the length of the word. I cannot figure out how to make it extend the full width like in FF and Opera.
Ed
_____________________________
Time is short, are you ready?
| |
|
|
|
Edge
Posts: 164
Joined: 10/12/2004
From: South Carolina
Status: offline
|
RE: flyout menu in drop down menu - 7/21/2006 16:06:08
Here's one that works okay in IE, FF and Opera.
http://www.edgesz28.com/edgesz28/website-tools/menus/zztest-h2.htm
I had to define five different dropdown box widths. You can look at the external css sheet to see what I mean, but here is the code below:
.submenuli a{
display: block;
width: 275px;
}
.submenuli2 a{
display: block;
width: 200px;
}
.submenuli3 a{
display: block;
width: 250px;
}
.submenuli4 a{
display: block;
width: 300px;
}
.submenuli5 a{
display: block;
width: 125px;
}
To avoid what I did above, I tried setting the width to auto for the original .submenuli. That works great in FF and Opera, but produces wide vertical spaces between dd items.
You could also just define the widest possible dd item, but that looks odd (IMO).
If you wanted to use this, you could link to a stand alone style sheet for the menu part instead of putting it in the head.
The javascript is in the head and for IE purposes. I do not know how all that works, only that it is needed.
Goodl luck, Ed
_____________________________
Time is short, are you ready?
| |
|
|
|
seth007
Posts: 4
Joined: 7/21/2006
Status: offline
|
RE: flyout menu in drop down menu - 7/24/2006 5:09:25
wow Edge thanks, how long did it take to do that, i got a bit of a shock when i saw it, i had all these hits in my stats that came from edgesz28.com, got a nice suprise when i saw what they were
| |
|
|
|
Edge
Posts: 164
Joined: 10/12/2004
From: South Carolina
Status: offline
|
RE: flyout menu in drop down menu - 7/24/2006 9:02:49
quote:
ORIGINAL: seth007
... how long did it take to do that, ...
A couple of hours. That was the first time I tried anything like that, but I have a habit lately of trying to expand my abilities. 
For the first example I came up with (zztest-h), what I did was study the difference between the two menus linked below and then worked your colors, layout, etc. to the CSS. You will notice that the code concept between your vertical menu (zztest) and the two below are similar.
http://tutorials.alsacreations.com/modelesmenus/hd1.htm
http://tutorials.alsacreations.com/modelesmenus/vd2.htm
Also, notice that your menu is missing the "dl" element.
For the first example (zztest-h), I added
#menu dl {float: left; }
Then I surrounded each main menu section (main title "dt" and submenu "dd") with the "dl" element.
But I was not satisfied with the way IE displays the hover background color change (partial length). And since I could not resolve this problem, I tried another approach.
In my second example (zztest-h2), I used this as a model: http://www.mywebstuff.com/02_css/css_07.html
But again, I was getting the partial hover coverage in IE. Then it hit me that I can just set up as many ".submenuli" classes as needed to make it work.
I think my second example would work in your site fine. But you may need to widen the home page.
I hope it helps. I like the challenge of figuring this stuff out. And once I do, I have templates to use for future projects.
Best of luck, Ed
_____________________________
Time is short, are you ready?
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 