SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : WebFX DHTML Demos : DHTML Favorite Bar

This favorite bar enables you to create a user-interface just like the Internet Explorer 4.0 favorite bar. (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.

The favorite bar is designed so that you can quickly and easily it in your HTML documents easy. Just follow the instructions below:

  1. First, 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. Now you are ready to build the menu! When you are finished, return here to close up all your DIVs.
  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>
</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="images/foldericon.gif">Internet Explorer</div>
<div class="sub" id="sample_1Sub">
	<div class="subFolder" id="sample_2"><img class="icon" src="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="images/htmlicon.gif">MS IE5</div>
	</div>
	<div class="subItem" href="http://www.microsoft.com/ie/ie4/"><img class="icon" src="images/htmlicon.gif">MS IE4</div>
</div>
<div class="subItem" href="http://www.microsoft.com/ie/"><img class="icon" src="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 UI Demonstration requires Internet Explorer 4.0 or later

Discuss and Rate this Article

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.