Iv got this idea in my mind but am unsure if it can be done. Basically I want a horizontal navigation bar that dosnt change at all. Then each parent <LI> will have a several child <LI>'s. For example Products(parent)>>>TV's, Cameras, Phone's(childs).

 

These child <LI>'s will drop down in a horizontal format. Now if the user clicks TV's I want the page to load, but I want the nav bar to show what route the user has taken still displaying the Products child <LI>'s. Is this at all possible?

Iv got this idea in my mind but am unsure if it can be done. Basically I want a horizontal navigation bar that dosnt change at all. Then each parent <LI> will have a several child <LI>'s. For example Products(parent)>>>TV's, Cameras, Phone's(childs).

 

These child <LI>'s will drop down in a horizontal format. Now if the user clicks TV's I want the page to load, but I want the nav bar to show what route the user has taken still displaying the Products child <LI>'s. Is this at all possible?

Google breadcrumb navigation, is that the sort of thing your after?

not really...dont breadcrumbs just show your path rather than keep a list item highlighted on page reload?

This is the sort of thing im after...

 

How is this done?

 

My link

Edited July 22, 201214 yr by dpuk44

These child <LI>'s will drop down in a horizontal format. Now if the user clicks TV's I want the page to load, but I want the nav bar to show what route the user has taken still displaying the Products child <LI>'s. Is this at all possible?

 

Do you mean a dropline menu like this?

http://www.cssplay.co.uk/menus/dd_valid_2.html'>http://www.cssplay.co.uk/menus/dd_valid_2.html

Have a look at others here

http://www.cssplay.co.uk/menus/

 

but I don't think you can combine a dropline menu with breadcrumbs.

thats half of what im after, but once a sub list item has been selected i want that to stay and show it has been selected after the new page has loaded like in the Rovio website

It's probably using conditional code that basically says "Are you on this page? If so, show this sub menu" and then the sub menu does the same and adds a class to the item that you're currently on that is then styled by the CSS.

Mike are there any examples or tutorials on this?

Not off the top of my head but it should just be as simple as targeting the menu item on the page you're on.

 

Are you building a static site or a CMS site?

static site

any tutorials on targeting menu items?

If it's a static site are you using includes (good) for your menus or are you coding them separately on every page (bad)?

im using includes. the menu itself is stored in a header.php which i include in each page

You'll need to identify which page you're on at which moment.

 

You using PHP?

 

If so, include a variable at the top of each page (before the header include, so actually put it in the page) that's unique to the page and use it to conditionally call classes in the menu to highlight what page you are on.

ok Mike, im gonna work on my menu and get back to you with my code and hopefully I will get a better understanding. thanks for your time, much appreciated

No problem, get a built and styled version up and we'll take it from their and get the variables functioning.

Out of interest Mike, why do you say coding menus individually on each page, i.e. not using includes, is bad? I accept includes are quicker and more maintainable for larger sites but if I'm building something up to say, 10 pages I'll just do the menus manually, mostly because PHP scares me.

What happens when you want to add/delete/edit one little thing? That suddenly becomes ten things and more the larger the site is.

Yep it certainly is more of a pain on the maintenance front I just wandered if you thought there was any other reasons, i.e. one's that effect the user. I suppose the extra work I potentially give myself is my own fault, I should really get into the habit of using an include at least for the navigation, it's quite simple really but as I say I tend to avoid PHP wherever possible.

For the end user there's always the fact that the site will respond quicker as they've already cached that include so they'll never have to load it again when they browse the site.

hi Mike, here is my styled menu that I have so far:

 

<ul id="ddmenu">
		<li><a href="#">ABOUT US</a>
			<ul>
				<li><a href="#">Company</a></li>
				<li><a href="#">Team</a></li>
				<li><a href="#">Careers</a></li>
			</ul>

		</li>
		<li><a href="#">OUR WORK</a>
			<ul>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Upcoming</a></li>
			</ul>
		</li>
		<li><a href="#">WHATS NEW</a>
			<ul>
				<li><a href="#">News</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</li>
		<li><a href="#">PRODUCTS</a>
			<ul>
				<li><a href="#">Websites</a></li>
				<li><a href="#">Add Ons</a></li>
			</ul>
		</li>
		<li><a href="#">CONTACT</a></li>
	</ul>		

 

 

* {
border: none; 
margin: 0; 
padding: 0;
}

body {
background: #fff; 
}

/*Drop Down Menu Styles*/
#ddmenu {
background: url(images/darkheader.png) repeat-x;
height: 92px;
width: 750px;
}

#ddmenu li {
list-style: none;
font: 18px Tahoma;
font-weight: bold;
float: left;
}

#ddmenu li a {
display: block;
width: 120px;
padding: 12px 12px;
text-decoration: none;
color: #000;
text-transform:uppercase;
white-space: nowrap;
text-align:center;
}

#ddmenu li:hover > a {
color: #a22c1f;
text-decoration: underline;
}

#ddmenu li ul {
margin: 14px 0 0 20px;
padding: 0;
position: absolute;
visibility: hidden;
}

#ddmenu li ul li {
display:inline;
}

#ddmenu li ul li a {
width: auto;	
display: inline;
color: #fff; 
font-size: 16px;
padding: 3px 10px;
}

#ddmenu li ul li a:hover {
color: #fff;
background: #a22c1f;
padding: 12px;;
}

 

where do I go from here?

and I can only seem to find similar tutorials but based on word press like here