It is designed so that you can use it in your HTML documents easy. Just follow the instructions below:
Add these two lines in your
Make sure that you have downloaded these two files!
Add the borders and the containers:
<!-- Favorite Bar Starts Here --> <div class="outer" style="width: 180px; height: 280px;"> <div class="inner" style="width: 180px; height: 280px;">
You don't have to supply the height and width but it works better if you do!
Start the menu with a
DIV with the
ID is used for identefying the scrollbuttons later.
<div class="favMenu" id="aMenu">
Closing the menu! Here are the scroll buttons added as well.
</div><!-- for favMenu--> </div><!-- for inner--> </div><!-- for outer--> <div id="aMenuUp" class="scrollButton">5</div> <!-- These are the two --> <div id="aMenuDown" class="scrollButton">6</div> <!-- scroll buttons --> <!-- Favorite Bar Done -->
ID of the scroll buttons are the same as the favMenu with the addition of
The menu is built up of
<DIV>tags with the class describing what type of item it is. There are
five different class names in the favMenu. They are
sub. All folders need an unique
ID with a belonging
ID with the addition Sub. The top items are supposed to be at the root level and
the sub items are supposed to be lower in the tree (these have a lighter background color). I'll show you a topFolder
with a subItem:
<div class="topFolder" id="test">This is a folder</div> <div class="sub" id="testSub"> <div class="subItem">This is a sub item</div> </div>
To make a folder inside another folder just move this code inside a folder and change the
class="subFolder". To make a topItem just do as you did with the subItem but change the class name.
The icons are maybe one of the easiest part but it enhances the look a lot. Just add an image and add the
Adding links and actions. All you need to do is to add the attribute
href to the
topItem and the
You can as with all elements add the attribute
title to show a tooltip. I've modified the existing tooltip to show both the title and the
href as the tooltip
Here is a bigger sample code:
<div class="topFolder" id="sample_1"><img class="icon" src="/webfx/images/foldericon.gif">Internet Explorer</div> <div class="sub" id="sample_1Sub"> <div class="subFolder" id="sample_2"><img class="icon" src="/webfx/images/foldericon.gif">IE 5</div> <div class="sub" id="sample_2Sub"> <div class="subItem" href="http://www.microsoft.com/ie/ie5/"><img class="icon" src="/webfx/images/htmlicon.gif">MS IE5</div> </div> <div class="subItem" href="http://www.microsoft.com/ie/ie4/"><img class="icon" src="/webfx/images/htmlicon.gif">MS IE4</div> </div> <div class="subItem" href="http://www.microsoft.com/ie/"><img class="icon" src="/webfx/images/htmlicon.gif">MS IE</div>
Below is more complex menu. Open the "Documents" folder and any sub folder within to try the scroll bars
I've also added a way to display the favbar in a new window. It is used by calling the function
float(menuID, TitleString). The TitleString is optional!