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
Your href links are wrong...
i.e change
toCode:../csstabs/aboutus/aboutus.htm
Code: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.
Last edited by mossj; 1st July 2010 at 02:18 PM.
mac_shinobi (1st July 2010)
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 )Originally Posted by mossj
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
Last edited by mac_shinobi; 1st July 2010 at 03:05 PM.
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
Last edited by mac_shinobi; 1st July 2010 at 06:06 PM.
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. ThanksI'll tell you how to change it when I get home tonight... I won't do it for you
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 toCode:<body class="section-1">
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.Code:<body class="section-2">
If you want to add aditional top level options you have to modify the CSS and add the relevent bits, so where it says
You just need to add another body class to make itCode: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 have to do this on every CSS decleration where it follows the same sort of rules I.ECode: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; }
This is the bit that seems overcomplex (traditionally you shouldn't have to edit the CSS when adding a menu item).Code: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; }
mac_shinobi (18th July 2010)
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
Last edited by mac_shinobi; 20th July 2010 at 05:54 PM.
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 (24th July 2010)
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
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
LinkBack URL
About LinkBacks