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 Create a Square border Hover Effect Using CSS
- How to Control Adsense Width in CSS
- CSS Background Opacity
- How to Create a Hover Image Image Enlarger Popup in CSS
- How to remove blue border on image link
11 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 R3ALISTIC WEB - 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!
Hi,
Tutorial of CSS and HTML is good and it is beneficial to the Website
Development and designer professional.