Web Development

Fun with menus: Navigation using jQuery, CSS3, and HTML5

Ryan Boudreaux shows you the code examples for creating different effects in navigational menus, including an accordion effect and a fading effect.

Menu navigation comes in many styles, colors, flavors, and functionality, and it is one of the more important elements in web design, as it provides the visitor with a clear path to traverse the website. Since most visitors do not know the logical directory structure of your website, it is up to the content owners and web developers to provide intuitive and conventional solutions to menu navigation.

All files used in the examples for this tutorial are available for download so you can follow along.

For this tutorial, it will help to have a basic knowledge of HTML, CSS, and JavaScript functionality. This tutorial will incorporate innovative solutions to creating a collapsible navigation menu using the power of jQuery, CSS3, and HTML5 with four sample navigations. In today's post, I will show you how to create an accordion menu and a fading menu.

  • Accordion Menu features the jQuery slide toggle function among others.
  • Fading Menu uses the jQuery fade-in and fade-out functions among others.
The CSS3 code in our stylesheet file styles.css is listed belowand is applied for all navigation menu effects:
@charset "utf-8";
/* CSS Document */
body {
     font:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
a {
     text-decoration: none;
}
#slideMenu, #navFade, #navGrowShrink, #navAccordion {
     float: left;
}
.expand_all, .collapse_all {
     cursor: pointer;
}
.exampleMenu {
     font-size: 90%;
     list-style: none;
     margin: 0;
     padding: 0;
     vertical-align: top;
     width: 180px;
}
.exampleMenu ul {
     display: none;
     list-style: none;
     margin: 0;
     padding: 0;
}
#slideMenu, #fadeMenu, #growShrinkMenu, #accordionMenu {
     margin: 0;
}
#slideMenu li, #fadeMenu li, #growShrinkMenu li, #accordionMenu li, .exampleMenu li {
     background-image: none;
     margin: 0;
     padding: 0;
}
.exampleMenu ul ul {
     display: block;
}
.exampleMenu ul ul li a {
     padding-left: 20px;
     width: 154px;
}
.exampleMenu a {
     color: #000;
     cursor: pointer;
     display: block;
     font-weight: bold;
     margin-left: 0;
     padding: 9px 2px 2px 22px;
     width: 152px;
}
.exampleMenu a.expanded {
      background: #00d4d5 url('images/minus_25.png') no-repeat -2px 50%;
      -moz-border-radius: 7px 7px 1px 1px;
      border-radius: 7px 7px 1px 1px;
}
.exampleMenu a.collapsed {
     background: #00adaf url('images/plus_25.png') no-repeat -2px 50%;
     -moz-border-radius: 7px 7px 1px 1px;
     border-radius: 7px 7px 1px 1px;
}
.exampleMenu a:hover {
     text-decoration: none;
}
.exampleMenu ul a {
     background: #6db2ab;
     border-top: 1px solid #657c7c;
     color: #000;
     display: block;
     font-weight: normal;
     padding: 2px 2px 2px 10px;
     width: 164px;
}
.exampleMenu ul a:link {
     font-weight: normal;
}
.exampleMenu ul a:hover {
     background : #c1ebec;
     text-decoration: underline;
}
.exampleMenu li.active a {
     background: #fff;
}
.exampleMenu li.active li a {
     background: #e8e8e8;
}
#slideMenu li.footer, #fadeMenu li.footer, #growShrinkMenu li.footer, #accordionMenu li.footer, .exampleMenu .footer {
     border-top: 2px solid #657c7c;
     background: #657c7c;
     height: 9px;
     line-height: 17px;
     margin: 0px 0 10px 0;
     -moz-border-radius: 0px 0px 7px 0px;
     border-radius: 0px 0px 7px 0px;
     border: solid 2px #657c7c;
     width:172px;
}
.exampleMenu .footer span {
     display: none;
}

Several notes about the CSS and CSS3 styling

The example menu class for anchor expanded and collapsed styles each call a background URL image, for the expanded style it is sourcing the minus icon (minus_25.png) and for the collapsed style it is sourcing the plus icon (plus_25.png), both are displayed below and are included in the download.

Figure A

Both the expanded and collapsed menu class also style a border-radius which utilizes CSS3 in creating 7px rounded corners on the top left and top right corners, with a slight smoothed corner of the bottom right and bottom left corners with 1px each.

The footer styling for each menu section also utilizes the border-radius which adds in a 7px rounded right bottom corner. This gives a smooth tabbed effect for each of the navigation menu selections.

Most of the jQuery functions utilized in the navigation menu demonstrations in this blog post have already been reviewed in previous tutorials; this time, they are being applied and utilized for more practical purposes and in conjunction with CSS3 styling and HTML5 technology, specifically the <nav> element.

Accordion menu

The accordion effect has been around for some time and is quite popular, especially with question and answer (Q&A) and frequently asked questions (FAQ) pages; however, it also has a place as an option in menu navigation. The core jQuery utilized for the accordion effect includes the toggle class .toggleClass() and slide toggle .slideToggle() functions for both expanded and collapsed menus; also utilized are the parent function .parent() and click function .click(function(). The speed of the slideToggle can also be adjusted depending on your preferences including ‘slow', ‘medium', or ‘fast'.

The accordion menu is well suited for use as a sidebar menu and also has options for making specific sections expanded by default on page load by indicating the section class as ‘expanded' or ‘collapsed'.

The jQuery code below for the accordion effect is included within the document ready function in the index.html file (included in the download):

$('#accordionMenu > li > a.expanded + ul').slideToggle('medium');
$('#accordionMenu > li > a').click(function() {
   $('#accordionMenu > li a.expanded').not(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
   $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
});

And here is the HTML code, which is also in our index.html file for the accordion effect:

<nav id="navAccordion">
 <h2>Accordion</h2>
   <ul id="accordionMenu" class="exampleMenu">
      <li><a class="collapsed">Accordion Section 1</a>
      <ul>
            <li><a href="#">Menu Item 1</a>
      <ul>
            <li><a href="#">Menu Item 1-A</a></li>
            <li><a href="#">Menu Item 1-B</a></li>
      </ul>
      </li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
      </ul>
      </li>
            <li class="footer"><span> </span></li>
            <li><a class="collapsed">Accordion Section 2</a>
      <ul>
            <li><a href="#">Menu Item 1</a>
      <ul>
            <li><a href="#">Menu Item 1-A</a></li>
            <li><a href="#">Menu Item 1-B</a></li>
            <li><a href="#">Menu Item 1-C</a></li>
      </ul>
      </li>
            <li><a href="#">Menu Item 2</a>
      <ul>
            <li><a href="#">Menu Item 2-A</a></li>
            <li><a href="#">Menu Item 2-B</a></li>
      </ul>
      </li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
      </ul>
      </li>
            <li class="footer"><span> </span></li>
            <li><a class="collapsed">Accordion Section 3</a>
      <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
      </ul>
      </li>
            <li class="footer"><span> </span></li>
   </ul>
</nav>

Here is the default view of the accordion menu as displayed in Chrome 18.0.1:

Figure B

Change the class of "Accordion Section 1" anchor to "expanded" and the default view upon page load expands the first section as displayed in Chrome 18.0.1. Notice the list item "Accordion Section 1" is now active and the background color has changed to indicate the action:

Figure C

Now, click anywhere inside the "Accordion Section 2" list item and the first section collapses while the second section becomes active and expands; this is the accordion effect in action during the transition:

Figure D

And with the accordion transition fully completed:

Figure E

If you want to play around with the speed settings in the jQuery code where you see ‘medium' indicated for the slide toggle settings, change those to either ‘slow' or ‘fast', and then refresh your browser and test the sections again. Click on any collapsed section and notice how a previously expanded section will close. If you wanted to have all sections expanded upon document load, then you would need to change all the classes to ‘expanded'.

Fading menu

The fading menu utilizes several more jQuery functions including fade in .fadeIn(), fade out .fadeOut(), toggle class .toggleClass(), add class .addClass(), and remove class .removeClass(), and uses an if, else function for the fade in and fade out effect, depending on whether the state is collapsed or expanded.

The jQuery code contained within the document ready function in our index.html file for the fading menu effect is displayed below:

$('#fadeMenu > li > a.expanded + ul').fadeIn();
$('#fadeMenu > li > a').click(function() {
      var el = $(this).parent().find('> ul');
      if($(this).hasClass('collapsed'))
            $(el).fadeIn();
      else
            $(el).fadeOut();
      $(this).toggleClass('expanded').toggleClass('collapsed');
});
$('#example2 .expand_all').click(function() {
$('#fadeMenu > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').fadeIn();
});
$('#example2 .collapse_all').click(function() {
$('#fadeMenu > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').fadeOut();
});

Here is the HTML included within the index.html file for the fading menu effect:

<nav id="navFade">
   <h2>Fade</h2>
      <ul id="fadeMenu" class="exampleMenu">
            <li><a class="collapsed">Fade Menu</a>
      <ul>
            <li><a href="#">Menu Item 1</a>
      <ul>
            <li><a href="#">Menu Item 1-A</a></li>
            <li><a href="#">Menu Item 1-B</a></li>
      </ul>
      </li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
      </ul>
      </li>
            <li class="footer"><span> </span></li>
      </ul>
</nav>

The fade menu in action, stepped through as displayed in Chrome 18.0.1; initially, the menu is collapsed:

Figure F

Each of the collapsible menu options can be changed to fit your own color scheme and dimensions by modifying the styles.css. Play around with the code and see what new variations you can come up with on your own.

In our next segment, we will review the grow and shrink menu and the slide menu using more jQuery functions. In the second part, I will also walk you through the creation of a navigation menu that grows and shrinks and one that has a sliding effect.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

3 comments