CSS Library

CSS Vertical List Menu

Description:
This is a lean CSS vertical menu. The markup is entirely based on an ordinary HTML list, with support for 1 level of nested lists. The nested lists are transformed into 2nd level drop down menus that appears dynamically onmouseover. The entire menu interface is styled via the external CSS, even the arrow image that appears
automatically
beside menu items that carry a 2nd level. Enjoy!

Example:

Directions:

Step 1:
Add the following code to the section of your page: 

<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />
<script type="text/javascript" src="cssverticalmenu.js">
</script>

It references two external files and 3 images. Download them below (right click, and select "save as"):

Step 2:
Add the below HTML to your page, which contain your menu links: 

<ul id="verticalmenu" class="glossymenu">
<li><a href="http://cssvertical.com/css-library">CSS Library</a></li>
<li><a href="http://cssvertical.com/CSS-Vertical-List-Menu" >CSS Vertical List Menu</a></li>
<li><a href="http://cssvertical.com/css-vertical-text">CSS Vertical Text</a></li>
<li><a href="#">CSS Advanced</a>
    <ul>
    <li><a href="http://cssvertical.com/CSS-classification">CSS classification</a></li>
    <li><a href="http://cssvertical.com/CSS-dimension">CSS dimension</a></li>
    <li><a href="http://cssvertical.com/CSS-Image-Gallery">CSS image gallery</a></li>
    </ul>
</li>
<li><a href="http://cssvertical.com/css-simple" >CSS Simple</a></li>
<li><a href="http://cssvertical.com/CSS-HowTo">CSS How To</a></li>
<li><a href="#" >Helpful Resources</a>
    <ul>
    <li><a href="http://cssvertical.com/CSS-background">CSS background</a></li>
    <li><a href="http://cssvertical.com/css_vertical">CSS vertical</a></li>
    <li><a href="http://cssvertical.com/CSS-border">CSS border</a></li>
    <li><a href="http://cssvertical.com/css_display">CSS display</a></li>
    <li><a href="http://cssvertical.com/CSS-font">CSS font</a></li>
    <li><a href="http://cssvertical.com/css_image">CSS image</a></li>
    </ul>
</li>
</ul>

That's it! You may want to take a peek inside
cssverticalmenu.js
for optional subtle tweaks to the menu.

CSS Vertical Text

Introduction

Very simply, this guide shows how to make your text vertical using some simple CSS. If the examples below are not vertical then you are not using IE. This technique makes use of "Visual Filters" which are an IE only technology at present.

Tested in
IE6 Icon



CSS Code

You can easily make vertical text with the following css:



In to the section put your CSS:

<style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style>

And into the body:

 <div class="verticaltext">Test-1</div>

The result, if it works in your browser, should be:

vertical1 (1K)

If we want to play with this a little we can, for example, change the filter from 'flip vertical - flip hotizontal' to 'flip vertical - flip vertical'. Combining this with the first example we can have the following:

vertical2 (1K)



It is also advised to specify the width otherwise you may get word wrap.



It's not entirely useful but what the
heck
...






Glossy Vertical Menu

This is a CSS vertical menu that uses a thin, repeating background image that changes when the mouse moves over a link. The image is glossy looking with an indent at the bottom to create a nice separation between links.

Demo:

The two images used:


Dashed Vertical Menu

Author:

A simple vertical menu in the from of the list where each item is followed by a thin dashed border. When hovering a mouse over a link, the link area will change its color.

The CSS:

<style type="text/css">
 
#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}
 
#vertmenu h1 {
display: block;
background-color:#FF9900;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}
 
#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}
 
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}
 
</style>

<div id="vertmenu">
<h1>Navigation</h1>
<ul>
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>

Syndicate content