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" />
<ul class="transmenu"> <li> <a href="#" class="transli"> <span class="home"></span> Home element </a> </li> </ul>
<ul class="transmenu"> <li> <a href="#" class="transli"> <span class="home"></span> Home element </a> <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
<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.
The stylesheet structure is really simple.
@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.
After this is represented the CSS reset for the demo. If you have it defined you can delete this one.
All elements after this are used only in the demo. For your own site you can delete them.
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.
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>