?
Solved

what is they navigation functionality called

Posted on 2014-07-11
10
Medium Priority
?
213 Views
Last Modified: 2014-07-17
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
0
Comment
Question by:nsitedesigns
  • 5
  • 4
10 Comments
 
LVL 41

Accepted Solution

by:
Kyle Abrahams earned 1000 total points
ID: 40191557
It's called accordion.

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

Expert Comment

by:Scott Fell, EE MVE
ID: 40191748
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
 

Author Comment

by:nsitedesigns
ID: 40194525
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1000 total points
ID: 40194598
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
 

Author Comment

by:nsitedesigns
ID: 40194628
i missed the faux part !
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40194678
It must be my lack of french accent.
0
 

Author Comment

by:nsitedesigns
ID: 40194695
Pronouned "fox"   ha ha ha!
0
 

Author Comment

by:nsitedesigns
ID: 40202259
Scott, where do I find out info on the faux accordian?  I tried doing a search for it and found nada.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40202312
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
 

Author Comment

by:nsitedesigns
ID: 40202363
THanks for the info!  You get appointed faux bonus points!
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question