12 replies [Last post]
bubblelyon
Offline
newbie
Last seen: 12 years 15 weeks ago
Joined: 2007-08-22
Posts: 10
Points: 0

Hi, I have been trying to find a tutorial online as to how to create a vertical menu that uses graphics instead of text and also has a single level flyout. Does anyone have any idea how to do this?

Thanks!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

This is for a horizontal

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

bubblelyon
Offline
newbie
Last seen: 12 years 15 weeks ago
Joined: 2007-08-22
Posts: 10
Points: 0

Thanks! I will give it a go!

Thanks! I will give it a go! Smile

Zygote76
Offline
Regular
Ohio
Last seen: 9 years 38 weeks ago
Ohio
Timezone: GMT-4
Joined: 2007-08-20
Posts: 25
Points: 3

Can he convert it to a

Can he convert it to a vertical menu by removing the float left from this portion of the code?

.nav li { float: left; padding-bottom: 10px; }

Zygote

bubblelyon
Offline
newbie
Last seen: 12 years 15 weeks ago
Joined: 2007-08-22
Posts: 10
Points: 0

Horizontal to Vertical

Hey Tyssen,

I am trying out this tutorial, but am having a hard time converting it to a vertical menu from the horizontal. I have managed to get all the links in fine but the rollovers are not working. Do you (or anyone else) know where I could look at a vertical version of this?

Thanks!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I just built a vertical

I just built a vertical flyout menu

http://www.anchordigital.net/abm/index.php

you can rip out the code from there.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

bubblelyon
Offline
newbie
Last seen: 12 years 15 weeks ago
Joined: 2007-08-22
Posts: 10
Points: 0

Thanks Deuce, thats really

Thanks Deuce, thats really nice of you!

Unfortunately I am looking for code that would allow me to use graphics instead of text for the links.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

then replace the text for

then replace the text for images. :?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

bubblelyon wrote:I have

bubblelyon wrote:
I have managed to get all the links in fine but the rollovers are not working.

Can you show us what you've got so far?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

bubblelyon
Offline
newbie
Last seen: 12 years 15 weeks ago
Joined: 2007-08-22
Posts: 10
Points: 0

Hmm, well I think if I just

Hmm, well I think if I just replace the text list with images I would have to use some kind of javascript to make the rollovers if I just use the current code that you have on your site wouldn't I? Again, I am a newbie so I really dont know all the short cuts or common sense solutions using CSS that is why I am asking all you experts Smile

I spose I just got take some time to understand it.

Thanks.

bubblelyon
Offline
newbie
Last seen: 12 years 15 weeks ago
Joined: 2007-08-22
Posts: 10
Points: 0

Well this is what I have so

Well this is what I have so far, I think I have the whole graphic link and rollover side of it down and converting to the vertical layout, but I dont know why it has that huge indent to the left and the flyout contains the main rollover graphic.

http://jannahlyon.com/testing/navigation.html

Thanks for th help all!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Take the em out of the

Take the em out of the submenus and set the margin and padding to all the <ul>s in the menu to 0.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

bubblelyon
Offline
newbie
Last seen: 12 years 15 weeks ago
Joined: 2007-08-22
Posts: 10
Points: 0

YOU ROCK!

Thanks Tyssen that totally worked! Thanks so much for all you help!