CSS dropdown menu problems

unitedcraig · #1 (**permalink**) Apr 2nd, 2008, 15:20

I am not sure if this is possible, and sorry if it doesn't make that much sense

http://craigmoran.co.uk/home.php

What I want to do is instead of having a navigation bar, is just to have one link and have this as dropdown linking to the other pages.

What I need is

1. Help on a decent dropdown, I can hide the second links, it's just getting them to appear again that i struggle with

2. Is there a way through CSS to have the current dropdown display where it says home now if you get what i mean, for example, when the secondary links are hidden and dropping down, when i click on contact, is there a way through CSS to get this to appear where home is now, or would i need JS for this?

Sorry if this is a little confusing

thanks in advance

Craig

Ps. here's a link to my CSS

http://craigmoran.co.uk/style.css

Bocaj · #2 (**permalink**) Apr 2nd, 2008, 21:49

like this one do you mean?

Link

unitedcraig · #3 (**permalink**) Apr 2nd, 2008, 22:33

Thanks mate

Anyone have any ideas on question 2 lol?

Jack Franklin · #4 (**permalink**) Apr 3rd, 2008, 18:30

Number 2 would require manual updating or *maybe* a PHP script.

unitedcraig · #5 (**permalink**) Apr 3rd, 2008, 19:22

Thanks mate, will look into it

moojoo · #6 (**permalink**) Apr 3rd, 2008, 21:15

For # 2 Do this

1. Append an ID to the <body> tag of each page i.e. <body id="contactPage"> then in your CSS you duplicate say your CSS hover state and name it

#contactPage #nav ul li#contact a {
style here
}

I did that on my page http://mevans76.com so each nav highlights based on the page you are on. No PHP/JS needed. And its all in the CSS so no changes to your actual pages are required to update.

for example my page has a very basic nav no menus so my CSS looks like this to cover them all in the CSS in a single declaration.

Code: Select all

/* states based on page ID */
#homePage #nav li#homeNav a, #contactPage #nav li#contactNav a, #aboutPage #nav li#aboutNav a, #playgroundPage #nav li#playgroundNav a, #downloadsPage #nav li#downloadsNav a, #sitemapPage #nav li#sitemapNav a, #archivesPage #nav li#archivesNav a, #blogPage #nav li#blogNav a, #photoPage #nav li#photoNav a {
    border-top:solid 2px #FFF;
}

as for #1 it is as simple as

Code: Select all

#nav ul li:hover ul {
style for nested UL's here
}

And to hide the nested UL's you just do

Code: Select all

#nav ul li ul {
display:none;
}

Of course you will need a .htc file like Whatever Hover to make it work for IE, but that is no biggie at all either. Its well documented.

unitedcraig · #7 (**permalink**) Apr 3rd, 2008, 22:31

Thanks for that

, will defo take a look at all ideas

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Dropdown menu from logo	freddylaval	JavaScript Forum	3	Jan 13th, 2008 16:27
menu, dropdown	everland	Flash & Multimedia Forum	2	Aug 21st, 2007 14:58
CSS dropdown menu problem in IE	Tino	Web Page Design	2	Jun 3rd, 2007 08:48
New window from dropdown menu	magiccupcake	JavaScript Forum	5	Jan 2nd, 2007 01:10
Dropdown menu	Jorgerb	Flash & Multimedia Forum	6	May 17th, 2005 08:29

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS dropdown menu problems