How to create a Navigational menu using a list | CSS tutorial


Transforming a list into a Navigational menu is one of the most popular technique used these days, by just using CSS we can easily transform a list in to visually attractive navigation menu.

Here is an Example:

HTML Code:

<body>
<div id="nav">
  <ul>
    <li><a href="you_url">Rock</a></li>
    <li><a href="you_url">Jazz</a></li>
    <li><a href="you_url">Pop</a></li>
    <li><a href="you_url">Hip-Hop</a></li>
    <li><a href="you_url">Metal</a></li>
  </ul>
</div>
</body>
 

CSS Code:

<style>
ul {
                border-left:#333 15px solid;
                padding:0;
}
ul li {
                list-style-image:url(tri.png);
                background:rgb(192,202,229);
                width:150px;
                height:35px;
                border-bottom:2px solid #0CF;
                padding:0;
                margin-left:25px;
                text-align:center;
}
ul li a {
                text-decoration:none;
                color:#666;
                font-family:Arial, Helvetica, sans-serif;
                font-size:14px;
                font-weight:bold;
}
ul li:hover {
                background:#00FFFF;
}
</style>
Navigation menu using CSS


Comments

Post a Comment

Popular posts from this blog

How to Open QR Codes

Image
I feel like it's been forever since I blogged... the beginning of the school year has been beyond crazy!  Well, I'm back to share with you a quick and easy tutorial: how to open up a QR code!  QR codes are all the rage today so I hope this help you feel more comfortable with starting to use them! Here is the poll! Now for the tutorial... You can download this tutorial as a PDF by clicking this picture! Note: This tutorial is hosted on Google Drive.  To save it from there, just open the file and click File > Download to save onto your computer! Of course, this intro QR code tutorial of course means that I'll be adding another QR code tutorial to the poll: how to make pretty QR codes (if you're going to take the time to do it, you might as well make it look good!)
Read more

Jim Henson predicted the end of the world

Or more accurately, Brian Henson did. But more on that in a second... I read an article today about the BP oil spill, and some analysts think the oil spill won't end until Christmas. Meaning 4 million barrels oil would be dumped in the Gulf. And (I'm quoting) "That much oil would wipe out all life in the Gulf and completely change the ecosystem." (read the full story here ) Let me repeat that:  That much oil would wipe out all life in the Gulf. In less than a year, those greedy bastards and their lack of foresight will probably lead to the destruction of an entire ecosystem.  Fish, crabs, eels, dolphins, sea turtles, and all the plant life. Here's a list of how and what animals are effected by this: here . This doesn't even mention the economic damage it will do to tourism and the jobs of people who thrived on fishing and dependency on the Gulf life. One more time: That much oil would wipe out all life in the Gulf. Let's put aside how devastating it is to ...
Read more

Mega Giveaway! (Today only!!!)

Image
Okay, I admit it... I have been slightly neglecting my blog, but not because I haven't been doing work!  I've been working hard to prep for the new school year and for the Phonics, Vocabulary, and Comprehension PD that Katie (over at Kdot's Learning Spot ) and I have been working on! Well of course, this big TPT sale coming up tomorrow has inspired me to post a few of the things I've been working on!  And of course, to repay all of you for continuing to follow me even though I'm posting less frequently... I think I'll give away ALL OF MY NEW ITEMS today! :) And of course, if you don't win, all of these products will be on super sale tomorrow and Monday! (Props to Krista  from  The Creative Chalkboard  for the amazing sign!!) Now... let's see what you can win! I'm going to start with the project that took me the most time.  I made videos that are about 5 minutes long each for each letter of the alphabet!  And even though the video itself is only about...
Read more