what is they navigation functionality called

How do I do this type of left nav functionality where you click on a main button (dishwashing sanitation) and it "opens up" to review categories?  Once I know what this is called, I can then try and find tutorial sites or if you can provide a tutorial site that would be great!

http://centralrestaurant.com/Dishwashing+Sanitation-cy29.html
nsitedesignsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle AbrahamsSenior .Net DeveloperCommented:
It's called accordion.

jQuery has a nice one:
http://jqueryui.com/accordion/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Well, if you look at the way your sample is created, it is really a faux accordion.   What Kyle is pointing out is what I would think of as an accordion.    Your favorite bootstrap calls it collapse http://getbootstrap.com/javascript/#collapse  and foundation has one as well http://foundation.zurb.com/docs/components/accordion.html

The sample you show is probably how things were done 15 years ago when each page had it's own navigation.  If you look, each page opens up a new accordion but it is not really dynamic like these other samples.
0
nsitedesignsAuthor Commented:
Huh, I thought something like this (header navigation to right of logo) was called accordian.
http://www.plymouth.k12.wi.us/

And this,
Click on staff names to view bio
http://www.embracecaremanagement.com/team.html
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Yes, and notice how no page refresh.  What I was simply saying is the link http://centralrestaurant.com/Dishwashing+Sanitation-cy29.html has a faux accordion because each page is separate and hard coded.  The samples  you just linked to are moving freely on every page.
0
nsitedesignsAuthor Commented:
i missed the faux part !
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It must be my lack of french accent.
0
nsitedesignsAuthor Commented:
Pronouned "fox"   ha ha ha!
0
nsitedesignsAuthor Commented:
Scott, where do I find out info on the faux accordian?  I tried doing a search for it and found nada.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That's my term.

Basically if you have your home page nav looks like this
<ul>
<li>Main</li>
<li>Link 1</li>
<li>Link 2</li>
</ul>

Open in new window

Your Link 1 page
<ul>
<li>Main</li>
<li>Link 1
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
   </ul>
</li>
<li>Link 2</li>
</ul>

Open in new window

And your link 2 page
<ul>
<li>Main</li>
<li>Link 1</li>
<li>Link 2
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
   </ul>
</li>
</ul>

Open in new window

You can see no js required but it will be awkward to manage because the navigation is different on every page.  

You are much better off doing this in js so you can simply have the same code on every page and let the js open and close based on use clicking or the current page.  
<ul>
<li>Main</li>
<li>Link 1
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
   </ul>
</li>
<li>Link 2
    <ul>
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
        <li>sub 4</li>
   </ul>
</li>
</ul>

Open in new window

See if any of these meet your needs
http://www.jqueryscript.net/menu/Sticky-Sidebar-Navigation-Menu-with-jQuery-Vertical-Navigation.html
http://vadikom.github.io/smartmenus/src/demo/
http://www.berriart.com/sidr/#usage
http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
0
nsitedesignsAuthor Commented:
THanks for the info!  You get appointed faux bonus points!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.