Simple Navigation Bar

This is helpful if you need a simple navigation bar across a page.  Note: I left the header for the page in there but can be removed as the outer div and span.

      <div class="HeadingCell">
       <span class="HeadingText">Release Home</span><br/>
       <div id="navbar">
        <ul>
         <li><a href="home.aspx">Home</a></li>
         <li><a href="wb.aspx">Workbooks</a></li>
         <li><a href="ccb.aspx">CCB</a></li>
         <li><a href="dev.aspx">Development</a></li>
        </ul>
       </div>
      </div>
CSS:

.HeadingCell {width:100%; text-align:center; display:block; background-color:black;}
.HeadingText {padding-bottom:10px; white-space:nowrap; font-family:Calibri; font-size:34px; font-weight:bold; letter-spacing:2px; color:#CCC;}

/* NAVIGATION BAR STYLING */

/* Sets the dimensions and background color of the div that contains the navigation bar links. */
div#navbar {height: 30px; width: 100%; border-top: solid #000 2px; border-bottom: solid #000 2px; background-color: #336699;}

/* Includes margin and padding declarations to override the default spacing assigned to unordered lists and sets the general text formatting.  The white-space:nowrap declaration keeps the list on one horizontal line, even if the browser window is too narrow to display the whole line. */
div#navbar ul {margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight:bold; color: #FFF; line-height: 30px; white-space: nowrap;
}

/* The list-style-type:none declaration removes the bullets that normally mark each list item.  The display:inline declaration causes the list items to flow from left-to-right across the page instead of each item appearing in a separate line. */
div#navbar li { list-style-type: none; display: inline;}

/* The text-decoration:none declaration removes the underscore that is normal for links, and the padding:7px10px declaration controls the spacing of the links in the navigation ba00r.  The left and right padding controls the horizontal spacing, while the top and bottom padding is needed to make the colored background of the rollover effect (and the clickable area of the button) extend the full height of the navigation bar.  */
div#navbar li a { text-decoration: none; padding: 7px 10px; color: #FFF;}
div#navbar li a:link { color: #FFF;}
div#navbar li a:visited { color: #FFF;}
div#navbar li a:hover { color: #FFF; background-color: #3366FF;}

Comments

Popular posts from this blog

SharePoint Designer 2013 Approval Workflow with Comments

Change SharePoint server hostname and Web Application Names

SharePoint Search - Content Processing Pipeline Failed to Process the Item