Pop Up Menu Code

xirokx · 27 Sep 2006 at 12:09

Hey Guys,

I am seeking some code for a nav bar...

That basically gives you a menu of more pages when you hover over the main nav buttons..

I believe its called a pop up menu...

Can you guys kindly point me in the right direction towards a tutorial of some kind please?

Something like on this page:

Pop it menu I think its called

Take a look under the "demo section"

Please help....

Thanks

Augmented · 27 Sep 2006 at 12:17

http://www.htmldog.com/articles/suckerfish/dropdowns/ might be what you're after.

xirokx · 27 Sep 2006 at 12:27

http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

that is precisely what im after....

how do I extract the code?

"view, source"?

or is there an easier way?

as I would like to incorporate this code into my website and use my current buttons, so where would i add my button image?

thanks mate

Augmented · 27 Sep 2006 at 12:31

Yes, just view source or extract the relevant bits from the tutorial page.

To use your button graphics, add them using the CSS background-image property e.g

Code:

#nav li {
background: transparent url(button_background.png) no-repeat top left;}

xirokx · 27 Sep 2006 at 12:33

lovely

thank you very much

do you know of any other similar links? for more options? or in your experience is it all pretty much the same style of code?

Augmented · 27 Sep 2006 at 12:44

The markup generally doesn't change in most examples of this type. The CSS can be dramatically different depending on the style or complexity of the design.

There are lots of list styling examples over at http://css.maxdesign.com.au/listamatic/ .

xirokx · 27 Sep 2006 at 13:07

excellent thats really handy...

could u kindly clarify whether javascript is required for pop up menus of the sort I require? Its only that I have seen the same thing achieved with css and html as well

thanks mate

p.s. this second link you suggested is great but it doesnt have example of veritcal popup menus

help?

thanks

Augmented · 27 Sep 2006 at 13:35

In these examples, Javascript is required for the hover to work in IE as it doesn't support the :hover psuedo-class on anything other than <a> elements. Otherwise the dropdown behaviour can be done with just CSS and HTML.