Web Development

How to create shrink/grow and sliding navigation menus with jQuery, CSS3, and HTML5 Word

Ryan Boudreaux shows two more examples of navigation menu effects that you can build with jQuery, CSS3, and HTML.

In the first part of this tutorial on creating navigation menus with jQuery, CSS3, and HTML5, I demonstrated how to create the accordion menu effect and the fading menu effect. In this final part, I will show how to create the grow/shrink menu effect and the sliding menu effect. All files used in these demonstrations are available as a download.

For this tutorial you will need a basic knowledge of HTML, CSS, and JavaScript functionality. These final two sample navigations make use of the following functions:

  • Grow and Shrink: jQuery toggleClass function
  • Sliding Menu: jQuery slide toggle function

The CSS3 code in our styles.css file (included in the download) is listed here and 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 classes 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.

Grow/Shrink menu

The grow and shrink menu uses several other jQuery functions that I have reviewed in past jQuery segments including the show function .show(), the hide function .hide(), and toggle class, .toggleClass(), add class .addClass(), parent function .parent(), and remove class .removeClass().

The jQuery code included within the document ready function in the index.html file for the grow and shrink menu effect:

$('#growShrinkMenu > li > a.expanded + ul').show('normal');
$('#growShrinkMenu > li > a').click(function() {
                   $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').toggle('normal');
});
$('#example3 .expand_all').click(function() {
      $('#growShrinkMenu > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').show('normal');
});
$('#example3 .collapse_all').click(function() {
      $('#growShrinkMenu > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').hide('normal');
});

The HTML code within the index.html file for the grow and shrink menu effect:

<nav id="navGrowShrink">
  <h2>Grow/Shrink</h2>
    <ul id="growShrinkMenu" class="exampleMenu">
      <li><a class="collapsed">Grow/Shrink 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 grow and shrink menu stepped, as displayed in Chrome 18.0.1:

Figure B

Slide menu

The slide menu uses similar effects used by the accordion menu effect. The jQuery used in this effect includes the slide toggle .slideToggle(), toggle class .toggleClass(), .parent(), add Class .addClass(), remove class .removeClass(), and the slide up .slideUp(), and slide down .slideDown() functions. The code as it appears in the index.html file:

$('#slideMenu > li > a.expanded + ul').slideToggle('medium');
$('#slideMenu > li > a').click(function() {
                              $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
});
$('#slideMenu .expand_all').click(function() {
      $('#slideMenu > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
});
$('#slideMenu .collapse_all').click(function() {
      $('#slideMenu > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
});
The HTML code as it appears for the slide menu in the index.html file:
<nav id="slideMenu">
  <h2>Slide</h2>
    <ul id="slideMenu" class="exampleMenu">
      <li><a class="collapsed">Slide 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>

And the menu displayed in action:

Figure C

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

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...

0 comments

Editor's Picks