Cool Navigation Bars

During the last few “crits”, several people mentioned that they would like to see me use a less-simplistic navigation bar for my website so I decided to look into that possibility.

I was pretty skeptical at first because my website is meant to be informational and I didn’t want to over-do it.  But I found some cool drop-down nav. bars that would actually be really helpful for my website because some of my videos and sound pieces are difficult to locate.

Here’s how you do it…

Step 1: set out your HTML using a nab body and provide an id of “top”

Example 1: 

<nav id="top">

Step 2: create a few lists with a href of “#”, and give your link a class of “toplink”

Example 2: 

    <li> <a href="#">Item One</a>
        <li><a href="#">Drop Menu 1</a></li>
        <li><a href="#">Drop Menu 2</a></li>
        <li><a href="#">Drop Menu 3</a></li>

Now we will edit the CSS… 

Step 3:  set the z-index (for stacking), width, line-height, padding and background color for the navigation box (#top)

Example 3: 

#top {
  z-index: 2;
  width: 200px;
  line-height: 2em;
  background: #222222;
  padding: 30px;

Step 4: Adding color and padding to boxes

Example 4: 

 #top li li, #top li li a {
  margin-top: -10px;
  text-align: center;
  color: rgba(255,255,255,.0);
  text-decoration: none;
  -webkit-transition:all .7s ease-in-out;

Step 5: Remove bullet points and underlines

Example 5: 

 li {
  list-style: none;
{text-decoration: none; }

And you’re done!

-Sarah Cinski


~ by sec86 on March 25, 2013.

%d bloggers like this: