1. Start
  2. Installation and Usage
  3. Additional Icons
  4. Stylesheet Structure

TransMenu

CSS3 Vertical Navigation


Installation and Usage


› Include the stylesheet to your document

For the dark style use: transmenu-dark.css

<link rel="stylesheet" href="css/transmenu-dark.css" type="text/css" media="screen" />

And for light one use: transmenu-light.css

<link rel="stylesheet" href="css/transmenu-light.css" type="text/css" media="screen" />

 

› Additional you can copy the 'images/' directory to use the icons

 

› To use the menu use this structure

<ul class="transmenu">
<li>
<a href="#" class="transli"> 
<span class="home"></span> Home element 
</a>
</li>
</ul>

 

› You can easly add a submenu

 

<ul class="transmenu">
<li>
<a href="#" class="transli"> 
<span class="home"></span> Home element 
</a>
<ul>
<li><a href="#"><span class="rss"></span> RSS element</a></li>
<li><a href="#"><span class="comment"></span> Comment element</a></li>
</ul>

</li> </ul>

Make sure you've added <ul> tags just after the closing </a>

The element used to create icons

<span class="rss"></span>

Where .rss class is a 32px x 32px transparent icon

Additional Icons


Structure

<li>
<a href="#">
<span class="rss"></span> RSS element
</a>
</li>

The <li> tags open the menu row, but the menu element is created by <a> tags and the <span> tags after the <a> one determines the icon that you will use.

Sample icons

<span class="rss"></span>
<span class="comment"></span>
<span class="email"></span>
<span class="facebook"></span>
<span class="cost"></span>
<span class="home"></span>
<span class="user"></span>
<span class="free_for_job"></span>
<span class="phone"></span>
<span class="lock"></span>

.. and so on. You can see all the icons in
 

/images/icons/dark

for dark icons and

 

/images/icons/light

for the light one.

The folder that is used deppends on the stylesheet.

Stylesheet Structure


The stylesheet structure is really simple.

Custom font

@import url(http://fonts.googleapis.com/css?family=Oswald);

The font that is used is from Google Fonts Api. You can change it by importing other font or using your site's one.

CSS Reset

/*
CSS Reset
v2.0 | 20110126
License: none (public domain)
*/

After this is represented the CSS reset for the demo. If you have it defined you can delete this one.

The Demo CSS

/*
Global CSS
*/

All elements after this are used only in the demo. For your own site you can delete them.

TransMenu CSS

/*
Transparent menu - Light
v0.3
License: none (public domain)
*/

After this is the main CSS that creates the menu. Please notice that they are different 

Transparent menu - Light

Transparent menu - Dark

If you plan to edit this part please make sure you know what you are doing.

Additional Icons CSS

/*
Sample icons
Dusseldorf Icon Pack by Patricia Clausnitzer
License: none (public domain)
*/

There you can find all the icons we've added. Depending on the stylesheet there are dark and light icons.

Adding icons is easy
.transmenu li .transli span.YOURCLASS, .transmenu li ul li a span.YOURCLASS {background: url("PATH_TO_YOUR_IMAGE") no-repeat;}

YOURCLASS - can be named by you
PATH_TO_YOUR_IMAGE - is the absolute or relative path to a 32 x 32 px icon. Better use transparent icons

After you've added your icon you can call it easy by adding new element to the menu:

<li>
<a href="#">
<span class="YOURCLASS"></span> User element
</a>
</li>