#top-bar

Description

Defines the top navigation bar.

Containers
Outline
Image Unavailable
Click to view in closer detail!

Details

The #top-bar selector defines the entirety of the top bar. The top bar usually appears at the top of every page according to how it is defined in the Site Manager or CSS. This bar is analogous to the #side-bar in how it is used for navigational purposes, except it does so in a drop-down menu sort of fashion. This is done through nested unordered lists (<ul> and <li> tags in HTML), and getting the looks of the top bar to appear just right can be tricky. For more details on this, see Top Bar Guide.

Otherwise, in general the structure is as follows:

  • <div id="top-bar">
    • <ul>
      • <li>
        • <a></a>
      • </li>
      • <li>
        • <a></a>
        • <ul>
          • <li>
            • <a></a>
          • </li>
        • </ul>
      • </li>
    • </ul>
  • </div>

Examples

On this page, the list items of the top bar will change into a shade of red when you hover over them using the below code. Notice how we had to pass through much of the above page structure in order to accurately define the needed part of the top bar.

#top-bar li ul li a:hover{
    background-color: #E88;
}

Try It on the CSS Zone Sandbox!

Base CSS

#top-bar{
    position: absolute;
    right: 1em;
    bottom: 0px;
    z-index:0;
}
#top-bar ul{
    display: block;
    margin:0; padding:0;
    list-style:none;
}
#top-bar li{
    list-style: none;
    float:left;
    margin: 0 5px;
    padding:0;
 
}
#top-bar li ul{
    padding: 0;
    margin: 0;
    width: 12em;
    border: 1px solid #EEE;
}
#top-bar  li ul li{
    padding: 0;
    margin: 0;
    display: block;
    float: none;
}
#top-bar li a{
    text-align: center;
    display: block;
    margin: 0;
    padding: 1px 1em;
    text-decoration: none;
}
#top-bar a:hover {
    background-color: #FFF;
    text-decoration: underline;
}
#top-bar li ul li a{
    width: 10em;
    text-align: left;
    background-color: #FFF;
    border: none;
}
#top-bar li ul li a:hover{ }
#top-bar li ul {
    position: absolute;
    visibility: hidden;
}
#top-bar li:hover ul, #top-bar li.sfhover ul {
    visibility: visible;
}

Not defined in Base CSS.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License