Full CSS Vertical Menu Effects Tutorial
{ Posted on Aug 12 2009 by Ryan Montilla }
If you are looking for a full CSS vertical menu for your site, this article will help you understand a lot. This tutorial is very basic so I know you can follow my tutorial easily. If you have questions, please message me on the comment section and I will answer it soon.
Enjoy with the tutorial.
Your CSS
.menu{
width:184px;
}
a.rollover {
display: block;
width: 184px;
color:#fff;
text-decoration: none;
font-size:12px;
background-color:#fe7e03;
padding:7px 0px 7px 0px;
}
width:184px;
}
a.rollover {
display: block;
width: 184px;
color:#fff;
text-decoration: none;
font-size:12px;
background-color:#fe7e03;
padding:7px 0px 7px 0px;
}
a.rollover:hover {
width: 184px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#333;
text-align:left;
text-indent:10px;
text-decoration:none;
padding:7px 0px 7px 0px;
background-color:#fecd00;
}
Your HTML
<html>
<title>Sample CSS Menu</title>
<head><link href=”mystyle.css” rel=”stylesheet” type=”text/css” /></head>
<body><div class=”menu”>
<div><a href=”aboutus.html”>About OCN </a> </div>
<div><a href=”ocncardprograms.html”>OCN Card Programs </a> </div>
<div><a href=”productandservices.html”>Products and Services </a> </div>
<div><a href=”howtos.html”>User Guide </a> </div>
</div>
</body>
</html>
<title>Sample CSS Menu</title>
<head><link href=”mystyle.css” rel=”stylesheet” type=”text/css” /></head>
<body><div class=”menu”>
<div><a href=”aboutus.html”>About OCN </a> </div>
<div><a href=”ocncardprograms.html”>OCN Card Programs </a> </div>
<div><a href=”productandservices.html”>Products and Services </a> </div>
<div><a href=”howtos.html”>User Guide </a> </div>
</div>
</body>
</html>
That’s It! You made your first Vertical Menu Effects
| Subscribed with my site for more tutorial updates |
Possibly Related Posts:
- How to remove blue border on image link
- PNG IE Browser Issue Solution
- .PNG Fix in Internet Explorer using CSS
- Download CSS Video Tutorials for Free
- 2 Column CSS List Sample Code
10 Responses
to “Full CSS Vertical Menu Effects Tutorial”
8 Trackback(s)
- Aug 12, 2009: Full CSS Vertical Menu Effects Tutorial | aasighee.com
- Aug 12, 2009: Graphic Design Links and Tutorials
- Aug 12, 2009: zabox.net
- Aug 13, 2009: 20 Great Fresh User Links for Designers and Developers | tripwire magazine
- Aug 13, 2009: You are now listed on FAQPAL
- Aug 13, 2009: Full CSS Vertical Menu Effects Tutorial | Design Newz
- Aug 14, 2009: Full CSS Vertical Menu Effects Tutorial - Programming Blog
- Sep 1, 2009: 網站製作學習誌 » [Web] 連結分享
Hello guys! My name is Ryan S. Montilla - a.k.a "R3" . I am fulltime / freelance web designer and blogger wanna be from the Philippines. R3ALISTIC is a blog site all about tutorials, design, ideas, and daily web trends. 
That’s great. i’m big fan your site.
Thanks!