CSS - Multilevel Navigation Bar

From NoskeWiki
Jump to navigation Jump to search
Drop down navigation system

About

NOTE: This page is a daughter page of: CSS


Large websites often offer "drop down" navigation with multiple rollover levels to help you navigate to the page you need with fewer clicks. Here's a nice 4 level navigation bar. Notice that you can use JavaScript to change which links get the extra selected class to show breadcrumbs (letting you know which page is currently selected).


Colored Navigation Tabs

Here's the HTML (nav_bar.html):

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Drop Down Navigation Bar in HTML and CSS with 4 Levels</title>
  <link rel="stylesheet" href="nav_bar.css" />
</head>
<body>

<div class="nav-bar">
  <ul class="nav-menu">
    <li><a href="#">Section 1</a></li>
    <li><a href="#">Section 2 ▾</a>
      <ul>
        <li><a href="#">Section 2.1</a></li>
        <li><a href="#">Section 2.2</a></li>
        <li><a href="#">Section 2.3</a></li>
      </ul>
    </li>
    <li><a href="#" class="selected">Section 3 ▾</a>
      <ul>
        <li><a href="#" class="selected">Section 3.1</a></li>
        <li><a href="#">Section 3.2 ▸</a>
          <ul>
            <li><a href="#">Section 3.2.1</a></li>
            <li><a href="#">Section 3.2.2</a></li>
            <li><a href="#">Section 3.2.3 ▸</a>
              <ul>
                <li><a href="#">Section 3.2.3.1</a></li>
                <li><a href="#">Section 3.2.3.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Section 3.3</a></li>
      </ul>
    </li>
  </ul>
</div>

Current section: <b>Section 3.1</b><br>
Rollover the menu above.

</body>
</html>

And here's the CSS (nav_bar.css):

body { margin: 0; padding: 0;  background: #eee; }

/* Navigation Bar */

.nav-bar {
  background: linear-gradient(to bottom, #57b759, #007a00);  /* Green gradient - light to dark. */
  font-size: 14px;
  font-family: Arial, sans-serif;
  text-align: left;  /* May want to align center */
}
.nav-menu a {
  color: #fff;  /* White font for link color. */
}
.nav-menu,
.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu li {
  position: relative;
}
.nav-menu a {
  padding: 5px 10px;
  margin: 5px 10px;
  display: block;
  text-decoration: none;
  border-radius: .2em;  /* Nice little rounded corners. */
}
.nav-menu a:hover {
  opacity: 1.0;
  background: rgba(0, 0, 0, 0.8);  /* Solid black rollover for all items. */
}

/* Selected Menu Item */

.selected {
  opacity: 1.0;
  background: rgba(255, 255, 255, 0.5);  /* Transparent white selected item. */
  color: #000 !important;                /* Black font. */
  border-radius: .2em;
}

/* Navigation Bar - Level 1 Drop Down Menu */

.nav-menu > li {
  display: inline-block;
  vertical-align: top;
  margin-left: -4px;
}
.nav-menu > li:first-child {
  margin-left: 0;
}
.nav-menu > li > a {}
.nav-menu > li > a:hover {}

/* Navigation Bar - Level 2 */

.nav-menu > li > ul {
  text-align: left;
  width: auto;  /* Change auto value with 200px if you want a bigger menu */
  display: none;
  background: #007a00;  /* Dark green. */
  position: absolute;
  top: 100%;
  left: 0;
  padding-bottom: 5px;
  min-width: 150px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}
.nav-menu > li:hover > ul {
  display: block;
}
.nav-menu ul li a {}
.nav-menu ul li a:hover {}

/* Navigation Bar - Level 3 */

.nav-menu > li > ul > li > ul {
  text-align: left;
  display: none;
  background: #57b759;  /* Light green. */
  position: absolute;
  left: 100%;
  top: 0;
  padding-bottom: 5px;
  min-width: 150px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}
.nav-menu > li > ul > li:hover > ul {
  display: block;
}
.nav-menu ul ul li {}
.nav-menu ul ul li a {}
.nav-menu ul ul li a:hover {}

/* Navigation Bar - Level 4 */

.nav-menu > li > ul > li > ul > li > ul {
  text-align: left;
  display: none;
  background: #57b759;  /* Light green. */
  position: absolute;
  left: 100%;
  top: 0;
  padding-bottom: 5px;
  min-width: 250px;
  border-radius: 0 0 .5em .5em;
  z-index: 9999999;
}
.nav-menu > li > ul > li > ul > li:hover > ul {
  display: block;
}
.nav-menu ul ul ul li {}
.nav-menu ul ul ul li a {}
.nav-menu ul ul ul li a:hover {}


Links


Acknowledgements: Dan Doicaru for the code on which I started building this: http://html-tuts.com/drop-down-menu-html-css-3-levels-deep/