How to Write HTML or JavaScript for Drop-Down Tabs for Web Pages
Drop-down tabs are menus on a Web page that expand to display sub-menus when a mouse hovers over a main menu item. This functionality is usually built using a Javascript framework library that provides advanced GUI (Graphical User Interface) facilities using CSS (Cascading Stylesheets) and XML handling functions known as AJAX (Asynchronous Javascript XML). The three main Javascript framework libraries are JQuery, MooTools and Scriptaculous. The advantage of using Javascript framework libraries is they are cross-browser compatible and open source and enable developers to build sophisticated websites more quickly using standardized pre-built components. The javascript language also enables quicker rendering of Web pages because javascript is processed within a Web browser, instead of on a Web server.
There are extensions to these frameworks that provide special features to the drop-down tab. These are available from sites such as Knallgrau, LWIS, Droppy, and Superfish.
Building a basic HTML/Javascript webpage for drop-down tabs using the JQuery framework can be accomplished quickly. A basic understanding of HTML and Javascript coding is required.
Other People Are Reading
Instructions
-
-
1
Open your Web browser at the JQuery download page (see Resources below). Look for the "Current Release" section, and right-click on the "Minified" link. Select "Save As...," and save the javascript file named "jquery-1.4.2.js" to your local C:\ folder.
-
2
Open your text editor, and copy and paste the following code into a file called C:\mydropdownmenu.html. Save the file.
<html>
<body>
<style type="text/css">
#ddt {margin:0;padding:0;list-style:none;}
#ddt li { float:left; width:100px; background:#EFEEA0; position:relative; }
#ddt li a { display:block; padding:10px 10px 0px 10px; height:40px;
text-decoration:none; color:#444444; text-align:center; }
#ddt ul{ left:0; display:none; padding:0; list-style:none;}
#ddt ul li{ width:100px; float:left; border-top:2px solid #ffffff;}
#ddt ul a {display:block; height:40px; padding: 8px 5px;color:#333333}
</style>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$ltimedelay=100;
$(document).ready(function (){
$('#ddt li').hover(
function () {
$('ul', this).slideDown($ltimedelay);},
function () {
$('ul', this).slideUp($ltimedelay);}
);
});
</script>
<input type=hidden><ul id='ddt'>
<li><a href='http://www.example.com'>Main Option A</a>
<ul>
<li><a href='http://www.example.com'>Submenu Option A1</a></li>
</ul>
<li><a href='http://www.example.com'>Main Option B</a>
<ul>
<li><a href='http://www.example.com'>Submenu Option B1</a></li>
</ul>
</body>
</html>
-
-
3
Open your Web browser at C:\mydropdownmenu.html. Hover your mouse over the menu items "Main Option A" and "Main Option B" to view the drop-down sub-menus.
-
4
Press "Alt+Tab" to return to the text editor. Near the bottom of the file, copy and paste the following code above the line "</body>". This will create a third main menu option with two sub-menus. Then save the file.
<li><a href='http://www.example.com'>Main Option C</a>
<ul>
<li><a href='http://www.example.com'>Submenu Option C1</a></li>
<li><a href='http://www.example.com'>Submenu Option C2</a></li>
</ul>
-
5
Press "Alt+Tab" to return to the Web browser. Press F5 to refresh the page. It will now display "Main Option C" with two submenus, C1 and C2.
-
1
References
Resources
- Photo Credit hypertext transfer protocol image by Pei Ling Hoo from Fotolia.com
