Karl`s PC Help Forums Last active: Never
Not logged in [Login ]
Go To Bottom

In memory of Karl Davis, founder of this board, who made his final journey 12th June 2007

Printable Version | Subscribe | Add to Favourites   Post new thread Poll:
Author: Subject: Navigation bars
The Q


Posts: 9960
Registered: 5-4-2007
Location: U.K.
Theme: KPCH Default Blue
Member Is Offline

[*] Post 315050 posted on 7-1-2008 at 08:03 Reply With Quote
Navigation bars

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...
View User's Profile View All Posts By User
Custom User Title

Posts: 755
Registered: 28-1-2003
Location: Portsmouth, UK
Theme: KF Blue
Member Is Offline

Mood: Hopeful.

[*] Post 315051 posted on 7-1-2008 at 09:22 Reply With Quote

This might help


View User's Profile View All Posts By User
dr john
Custom User Title

Posts: 1443
Registered: 8-12-2002
Location: Kent
Theme: KF Blue (Default)
Member Is Offline

Mood: I want to go soaring

[*] Post 315053 posted on 7-1-2008 at 09:49 Reply With Quote

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."
View User's Profile Visit User's Homepage View All Posts By User
Post new thread Poll:

Guest Notice
You are a guest, as a guest you can only see a maximum of 3 posts per thread.

If you want to see the rest, please click here to register.