flyout menu in drop down menu (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

seth007 -> 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 -> 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



c1sissy -> 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.



seth007 -> 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 -> 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)



seth007 -> 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 -> 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



Edge -> 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



Edge -> 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






seth007 -> 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 -> 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




Lazykatz -> RE: flyout menu in drop down menu (7/24/2006 21:37:52)

Here is alot of different css menus and styles.
http://www.alvit.de/css-showcase/css-galleries-tabs-navigation-showcase.php

Grizz



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125