+ Post New Thread
Results 1 to 11 of 11
Web Development Thread, Navigation bar & css in Coding and Web Development; So far I have come across this nav bar which I quite like and am struggling to implement it correctly ...
  1. #1

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,216
    Thank Post
    2,766
    Thanked 935 Times in 875 Posts
    Rep Power
    343

    Navigation bar & css

    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
    Attached Files Attached Files

  2. #2
    mossj's Avatar
    Join Date
    Dec 2008
    Location
    Leicester
    Posts
    1,466
    Thank Post
    157
    Thanked 189 Times in 174 Posts
    Rep Power
    51
    Your href links are wrong...

    i.e change

    Code:
    ../csstabs/aboutus/aboutus.htm
    to

    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.

  3. Thanks to mossj from:

    mac_shinobi (1st July 2010)

  4. #3

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,216
    Thank Post
    2,766
    Thanked 935 Times in 875 Posts
    Rep Power
    343
    Quote Originally Posted by mossj View Post
    Your href links are wrong...

    i.e change

    Code:
    ../csstabs/aboutus/aboutus.htm
    to

    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.
    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
    Last edited by mac_shinobi; 1st July 2010 at 03:05 PM.

  5. #4

    Join Date
    May 2010
    Posts
    3
    Thank Post
    0
    Thanked 0 Times in 0 Posts
    Rep Power
    0

    cssplay

    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.

  6. #5

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,216
    Thank Post
    2,766
    Thanked 935 Times in 875 Posts
    Rep Power
    343
    Quote Originally Posted by pythondave View Post
    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.

  7. #6
    mossj's Avatar
    Join Date
    Dec 2008
    Location
    Leicester
    Posts
    1,466
    Thank Post
    157
    Thanked 189 Times in 174 Posts
    Rep Power
    51
    I'll tell you how to change it when I get home tonight... I won't do it for you

  8. #7

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,216
    Thank Post
    2,766
    Thanked 935 Times in 875 Posts
    Rep Power
    343
    Quote Originally Posted by mossj View Post
    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

  9. #8
    mossj's Avatar
    Join Date
    Dec 2008
    Location
    Leicester
    Posts
    1,466
    Thank Post
    157
    Thanked 189 Times in 174 Posts
    Rep Power
    51
    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
    Code:
    <body class="section-1">
    in the index, if you change this to

    Code:
    <body class="section-2">
    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

    Code:
    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

    Code:
    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

    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;
    }
    This is the bit that seems overcomplex (traditionally you shouldn't have to edit the CSS when adding a menu item).

  10. Thanks to mossj from:

    mac_shinobi (18th July 2010)

  11. #9

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,216
    Thank Post
    2,766
    Thanked 935 Times in 875 Posts
    Rep Power
    343
    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
    Attached Images Attached Images
    Attached Files Attached Files
    Last edited by mac_shinobi; 20th July 2010 at 05:54 PM.

  12. #10
    mossj's Avatar
    Join Date
    Dec 2008
    Location
    Leicester
    Posts
    1,466
    Thank Post
    157
    Thanked 189 Times in 174 Posts
    Rep Power
    51
    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?

  13. Thanks to mossj from:

    mac_shinobi (24th July 2010)

  14. #11

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,216
    Thank Post
    2,766
    Thanked 935 Times in 875 Posts
    Rep Power
    343
    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

SHARE:
+ Post New Thread

Similar Threads

  1. Navigation Pane ShowAllFolders
    By nibulon in forum Windows 7
    Replies: 0
    Last Post: 23rd February 2010, 01:50 PM
  2. Anyone up for a little challenge? (CSS & PHP)
    By Little-Miss in forum Web Development
    Replies: 5
    Last Post: 4th June 2009, 07:27 AM
  3. [PHP] & CSS coding - minishowcase gallery
    By Little-Miss in forum Web Development
    Replies: 8
    Last Post: 30th May 2009, 07:15 PM
  4. CSS & Styles
    By phillipmillward in forum EduGeek Joomla 1.5 Package
    Replies: 1
    Last Post: 28th September 2008, 07:30 PM
  5. CSS Basics & Demos
    By Diello in forum Web Development
    Replies: 14
    Last Post: 19th July 2005, 08:46 AM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •