Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help with horizontal column navigation

    Hi everyone,

    I'm not actually sure what the correct term for the navigation layout I'll be referring to is so please let me know if there is one.

    What I would like to do is create a multi-level navigation using columns with each level of navigation creating a new column.


    1. The website will start with the primary navigation column.

    |xxxx|
    |xxxx|
    |xxxx|
    |xxxx|
    |xxxx|
    |xxxx|
    |xxxx|

    2. When a menu item is clicked the sub menu appears in a column to the right. This is not a rollover effect, the sub menu will simply stay there until a different menu item is selected.

    |xxxx| |xxxxxx|
    |xxxx| |xxxxxx|
    |xxxx| |xxxxxx|
    |xxxx| |xxxxxx|
    |xxxx| |xxxxxx|
    |xxxx| |xxxxxx|
    |xxxx| |xxxxxx|

    3. This effect will continue the further you progress in the levels (realistically I don't see there being any more than 3-4 levels). The below is an example of 2 levels.

    |xxxx| |xxxxxx| |xxxxxx|
    |xxxx| |xxxxxx| |xxxxxx|
    |xxxx| |xxxxxx| |xxxxxx|
    |xxxx| |xxxxxx| |xxxxxx|
    |xxxx| |xxxxxx| |xxxxxx|
    |xxxx| |xxxxxx| |xxxxxx|
    |xxxx| |xxxxxx| |xxxxxx|

    Columns can contain sub menus, information or a combination of both. I know that this is an unorthodox setup but for the purpose of the website (an intranet for Client Details) it is much easier to navigate than a standard vertical website. The idea is to retain as much of an overview of the site as possible no matter what level of navigation the user is on, an expansion of the breadcrumbs concept.

    Any help would be greatly appreciated even if it is just to clarify the term for this sort of layout/navigation so that I can do further research.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    This is called linked dropdowns or cascading dropdowns. It's done with a database, a server side language (PHP or ASP) and javascript AJAX. You can find out more with google or search this site or go to youtube.
    Evolution - The non-random survival of random variants.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello bradbd,
    That looks like a verticle menu to me... just sayin .

    Have a look at a Stu Nichols solution here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    This is called linked dropdowns or cascading dropdowns. It's done with a database, a server side language (PHP or ASP) and javascript AJAX. You can find out more with google or search this site or go to youtube.
    Excellent. Thank you.

  • #5
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello bradbd,
    That looks like a verticle menu to me... just sayin .

    Have a look at a Stu Nichols solution here.
    It's true, they are vertical menus but the navigation/content expands horizontally, I realise now that the title is confusing.

    The Stu Nichols example is sort of the right idea but between that and the information Sunfighter provided I should be on the right track.

    Thank you.


  •  

    Posting Permissions

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