Karl`s PC Help Forums

Navigation bars
Quaver - 7-1-2008 at 08:03

I have a simple webpage, but would like to add a navigation bar.
I'd like something like the bar which this site uses:http://www.kingshotelnewport.co.uk/

Where it says 'things to do', when I place my mouse over it, a dropdown menu appearskewl_glasses

Is there places where I could copy & paste something like this?
I tried creating this with Fireworks 4 and inserting the html to Dreamweaver 4, but the dropdown appeared at top left of the page instead of straight under the barconfused2

There must be a simpler way of doing this...


Topcat - 7-1-2008 at 09:22

This might help

http://www.w3schools.com/

Topcat


dr john - 7-1-2008 at 09:49

That particular page is using a lot of unnecessary javsacript to run its entire menu system.

Most web designers now use CSS and unordered lists to create their menus, with a tiny bit of javascript to overcome a problem in IE6 (it only understands hover on links, unlike several other browsers which understand it on other things too).

Fireworks is a graphic program, not a web development program. I'll bet you added the text for the menu using Fireworks, which is wrong. You should create your background image for the normal state and the hover state and use the same images for all the menu links, and plain text in the unordered list for the textual link. Using Firework, you'd have to edit the image if you changed your mind on what text to use or wanted another link in the menu.

If you want some free cut and paste menus which you can later very easily, try stu nicholl's legendary http://www.cssplay.co.uk (his site is supported by google ads...) or the the simpler, smaller and less spectacular http://www.dynamicdrive.com/style/ Finally Listomatic explains and gives lots of examples on how css list menus are created. http://css.maxdesign.com.au/listamatic/

Then when you get stuck, get back to me and I'll sort it for you.

(If you have to ask for help, w3schools will not be enough to help you.)

EDIT I've had a quick check at the dynamic drive site, and they only seem to offer one drop-down menu called suckertree, whicis basically a copy of the original suckerfish style of menu from http://www.htmldog.com which I forgot to mention. Son of Suckerfish is one of the commonest types of drop-down or pop-out menus systems.

The very smooth action of the drop-down on the site you mention needs a lot of javascript to get the effect. Most non-javascript menus aren't as gradual a reveal as that. but are very much simpler to use.

PS shouldn't this be in the webhelp section
"Internet,Telecomms and Webhelp
Post any problems with internet issues, web design or telecommunications here."


Quaver - 7-1-2008 at 13:57

Thank you Topcat & Dr.Johnwaveysmiley

Quote:
Originally posted by dr john
I'll bet you added the text for the menu using Fireworks, which is wrong.

redface (But I did keep a PNG original so that I can change the text...)
Quote:
You should create your background image for the normal state and the hover state and use the same images for all the menu links, and plain text in the unordered list for the textual link.

kewl_glasses
Quote:
Son of Suckerfish

What a name:o
Quote:
PS shouldn't this be in the webhelp section
"Internet,Telecomms and Webhelp
Post any problems with internet issues, web design or telecommunications here."

Oooopslips_sealed


dr john - 7-1-2008 at 16:37

The suckerfish menu system was first demonstrated on a set of demo pages about suckerfish. So the name stuck.
Then they made a better version, so naturally it was called son of suckerfish.


Re "but I still have the png originals" Yes, but you still have to use a graphics program to edit the text or to add a new menu item...
waggyfinger