Navigation bar & css

[mac_shinobi]

So far I have come across this nav bar which I quite like and am struggling to implement it correctly so that when I click on said tab, said tab becomes high lighted and displays the sub items

 

CSS Tabs :: Adam Kalsey

 

The above is the original site / demo that the author created and the attached is what I have done so far and am stuck on - something to do with the id of the body element or something - not sure how to add this in correctly so that it loads each correct page

Archive.zip

[mossj]

Your href links are wrong...

 

i.e change

 

../csstabs/aboutus/aboutus.htm

 

to

 

aboutus/aboutus.htm

 

 

To be honest the script is fairly weak, it should really be using classes to setup the navbar and ID's to decided whats active or not.

Edited July 1, 2010 by mossj

[mac_shinobi]

Your href links are wrong...

 

i.e change

 

../csstabs/aboutus/aboutus.htm

 

to

 

aboutus/aboutus.htm

 

 

To be honest the script is fairly weak, it should really be using classes to setup the

 

 

navbar and ID's to decided whats active or not.

 

Any chance you could fix it and upload a working copy, I was not specifically liking to anything yet I just wanted the navigation bar to have 2 levels / layers and work correctly so that each tab was highlighted when selected and when you hover over each tab it shows you the set of sub tabs for that tab you are hovered over ( same for the other tabs )

 

First set of tabs being the main tabs and the second set being the sub tabs ( one sub set of tabs for each main tab) and all horizontal across the top of the page

 

Thanks

Edited July 1, 2010 by mac_shinobi

[pythondave]

Have you seen Stu Nicholls | CSSplay | CSS only menus

 

e.g. Stu Nicholls | CSSplay | Professional drop line menu #7

 

I've used stuff from this site a number of times.

[mac_shinobi]

Have you seen Stu Nicholls | CSSplay | CSS only menus

 

e.g. Stu Nicholls | CSSplay | Professional drop line menu #7

 

I've used stuff from this site a number of times.

 

Yes I have seen them but even the downloaded versions have tons of code in them and are confusing I just want one that I understand without all the javascript, jquery or whatever else - the I posted above aside from not understanding why the selected tab is not being high lighted seems to be what I am after where by there is a number of unordered lists in the html and the css does the rest

 

I have googled and binged and am finding examples as per stu's website but nothing that is like the one I posted in the question above

 

Unless you can help me implement one of stu's examples then I will forget about his examples as overly complex for my liking.

 

Most of stu's examples or at least a good proportion require a fund / donation and yes they look good and I can understand why they have done that but I want something that is

 

* cross browser compatable

* free so using html and css ( and xhtml if need be )

* is neat and professional looking

 

The link I posted covers the above 3 points very well and I can easily enough change the colours as I wanted which will be light shades of

 

* green

* brown

* silver / grey

 

I don't need website demos / links unless it

 

* Has a demo along with full code for html and full code for css without any extra gumph or code that confuses the matter

Edited July 1, 2010 by mac_shinobi

[mossj]

I'll tell you how to change it when I get home tonight... I won't do it for you

[mac_shinobi]

I'll tell you how to change it when I get home tonight... I won't do it for you

 

Either way as long as I can get it to work. Thanks

[mossj]

Okay I've had a proper look at the code... I guess this is just a average peice of code that would of been unworthy of being on the internets, however it is rather unique in one way...

 

Where you have

 

in the index, if you change this to

 

 

It will select a different set of navigation options and make the about us options active. So by just changing the body class you change the "Active" navigation options, to me this seems over complex but it may do what you require.

 

If you want to add aditional top level options you have to modify the CSS and add the relevent bits, so where it says

 

body.section-1 #menu li#nav-1 a, 
body.section-2 #menu li#nav-2 a,
body.section-3 #menu li#nav-3 a,
body.section-4 #menu li#nav-4 a {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}

 

You just need to add another body class to make it

 

body.section-1 #menu li#nav-1 a, 
body.section-2 #menu li#nav-2 a,
body.section-3 #menu li#nav-3 a,
body.section-4 #menu li#nav-4 a,
body.section-5 #menu li#nav-4 a {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}

 

You have to do this on every CSS decleration where it follows the same sort of rules I.E

 

body.section-1 #menu ul#subnav-1, 
body.section-2 #menu ul#subnav-2,
body.section-3 #menu ul#subnav-3,
body.section-4 #menu ul#subnav-4 {
display : inline;
left : 10px;
position : absolute;
top : 95px;
}

 

This is the bit that seems overcomplex (traditionally you shouldn't have to edit the CSS when adding a menu item).

[mac_shinobi]

Messing around with the code I attached - not sure if I goofed it up but when I change the body id as suggested the sub menu links are loading at the very bottom, not directly under the main tabs.

 

What gives ?

 

In the body id I have put section-2 which works ref selecting the correct tab but it is loading the sub tabs under everything

 

I have attached one that I have done but not sure if this is the correct way to do a 2 layered css / html navigation bar

 

any chance of some confirmation / guidance ?

 

EDITED

2 layers.zip

Edited July 20, 2010 by mac_shinobi

[mossj]

Not really the correct way, as sub navigation should really be nested in the main nav, so it structured properly (although this is being picky).

 

If you give me what you have in that picture I will tweek it for you. I assumed from the picture in the 2 layers you want the nav centered in the page?

[mac_shinobi]

thanks

 

Any chance you can put comments in the css file so I know which block of css code does what

 

It is already attached - the zip file contains the source code etc - navbar.html is the html file and there is only one css file

 

edited