This favorite bar works just like the favorite bar in Internet Explorer 4.0. (Explorer 5 changed the scroll mechanism to ordinary scrollbars). It is written entirely in HTML, or to be exact in HTML, CSS and Javascript for Explorer 4 or better.

It is designed so that you can use it in your HTML documents easy. Just follow the instructions below:

  1. Add these two lines in your <HEAD>:

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

    Make sure that you have downloaded these two files!

  2. 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!

  3. Start the menu with a DIV with the class="favMenu". The ID is used for identefying the scrollbuttons later.

    <div class="favMenu" id="aMenu">
  4. Building the menu!

  5. 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 -->

    The ID of the scroll buttons are the same as the favMenu with the addition of Up and Down

Building the Menu

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 topFolder, topItem, subFolder, subItem and sub. All folders need an unique ID with a belonging DIV with the same 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>

To make a folder inside another folder just move this code inside a folder and change the class="topFolder" to 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 class="icon"

Adding links and actions. All you need to do is to add the attribute href to the topItem and the subItem!

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=""><img class="icon" src="/webfx/images/htmlicon.gif">MS IE5</div>
	<div class="subItem" href=""><img class="icon" src="/webfx/images/htmlicon.gif">MS IE4</div>
<div class="subItem" href=""><img class="icon" src="/webfx/images/htmlicon.gif">MS IE</div>

See this menu in action

Below is more complex menu. Open the "Documents" folder and any sub folder within to try the scroll bars

Favorite Bar
<BLINK> Behavior (IE5)
Resizeable DIV
DHTML Editor
more Docs
even more Docs
doc 3.1
doc 3.2
doc 2.1
doc 2.2
doc 1
doc 2
more Docs
doc 2.1
doc 2.2
even more Docs
doc 3.1
doc 3.2
doc 3
doc 4
The Dynamic Duo
To Do!
Upload a lot of files and write documentation to them as well
Back to

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!

Author: Erik Arvidsson