 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
VegUISiteKit: Dropdown Menu
This library brings a dropdown navigation menu to your site. Similar to the menus of your general computer application it also supports nested menus. Optionally the VSK shadow effect and either the fade or morph effect can be applied to the menus. In the example below i chose to use the vsk morph effect in order to grow each menu into view when it is called. This is a search engine friendly menu as the menu elements are built by the user in HTML (look for code examples below) and then the script takes over and does the rest.Demonstration
Click the links below to open the drop down menuOpen Menu 1 | Open Menu 2
Code: CSS
div.ddmenu {
position:absolute;
background-color: #fff;
border: 1px #647caa solid;
visibility: hidden;
top: 0px;
}
a.ddmenu_item {
font: 10px Verdana, Arial, Helvetica;
padding: 5px;
font-weight: bold;
text-decoration: none;
position: relative;
padding-right: 15px;
color: #647caa;
}
img.ddmenu_arrow {
position: absolute;
right: 5px;
top: 7px;
}
a.ddmenu_item_hover {
font: 10px Verdana, Arial, Helvetica;
padding: 5px;
background-color:#647caa;
text-decoration: none;
font-weight: bold;
position: relative;
padding-right: 15px;
color: #fff;
}
Code: HTML
<br /><br />
<a style="cursor:pointer" onmousedown="v(this).ddmenu_open('ddmenu_1','b', 15, 5);">
Open Menu 1</a> |
<a style="cursor:pointer" onmousedown="v(this).ddmenu_open('ddmenu_5','b', 15, 5);">
Open Menu 2</a>
<br /><br />
<div class="ddmenu" id="ddmenu_1">
<a href="/site/vsk_dropdown_menu">Option 0</a>
<a vsk_nested="ddmenu_4" href="site/vsk_dropdown_menu">Option 1
<img src="<?=$img_path;?>/menu_arrow.gif" class="ddmenu_arrow" alt="sub menu" /></a>
<a href="/site/vsk_dropdown_menu">Option 2</a>
<a vsk_nested="ddmenu_2" href="site/vsk_dropdown_menu">Option 3
<img src="<?=$img_path;?>/menu_arrow.gif" class="ddmenu_arrow" alt="sub menu" /></a>
<a href="/site/vsk_dropdown_menu">Option 4</a>
</div>
<div class="ddmenu" id="ddmenu_2">
<a href="/site/vsk_dropdown_menu">Sub Option 0</a>
<a vsk_nested="ddmenu_3" href="site/vsk_dropdown_menu">Sub Option 1
<img src="<?=$img_path;?>/menu_arrow.gif" class="ddmenu_arrow" alt="sub menu" /></a>
</div>
<div class="ddmenu" id="ddmenu_3">
<a href="/site/vsk_dropdown_menu">Sub Option 0</a>
<a href="/site/vsk_dropdown_menu">Sub Option 1</a>
</div>
<div class="ddmenu" id="ddmenu_4">
<a href="/site/vsk_dropdown_menu">Sub Option 0</a>
<a href="/site/vsk_dropdown_menu">Sub Option 1</a>
</div>
<div class="ddmenu" id="ddmenu_5">
<a href="/site/vsk_dropdown_menu">Sub Option 0</a>
<a href="/site/vsk_dropdown_menu">Sub Option 1</a>
</div>
Code: Javascript
/* Initialize the menu */
ddmnu_init(
['ddmenu_1', 'ddmenu_2', 'ddmenu_3', 'ddmenu_4', 'ddmenu_5'],
-10, 'morph', 200, 1, 5, 5, '#acb9d2', 100
);
Help spread the word
If you like working with this library and want to help get it some exposure, please go over to hotscripts.com and Rate It. Thanks for your help, it is appreciated ;)
Dependencies:
Instead of downloading all packages and dependencies manually it is recommended that you use the new compiled download script, as it will automatically compile all selected libraries - including dependencies - into one compact javascript file for you to download.This library is dependent on at least one other VSK library so make sure you download the libraries in the list below.
| file-name | description |
|---|---|
| vegui.sk.std.js | VSK Core Library |
| Optional, for full functionality | |
| vegui.sk.ani.js | VSK Effect Framework |
| vegui.sk.ani.morph.js | VSK Effect: Morph |
| vegui.sk.ani.fade.js | VSK Effect: Fade |
| vegui.sk.ani.shadow.js | VSK Effect: Shadow |
Download
This package contains the code in both commented and compressed forms. The compressed version has had it's comments and unnecessary whitespace removed in order to reduce it's size.| download | version |
|---|---|
|
tar.gz (4,4 KB), zip (6,6 KB) |
0.1.3 (beta) |
|
tar.gz (4,5 KB), zip (6,8 KB) |
0.1.2 (beta) |
|
tar.gz (4,3 KB), zip (6,5 KB) |
0.1.1 (beta) |
Tutorials on using this library
BETA notice
While this library is in BETA phase YOU can help get it out of there quicker by submitting any bugs you may find to the bug database. Thanks for helping ;)Changelog
2007.06.09 - vegu@vegui.rg
* version 0.1.3
* fixed: calling the function ddmenu_open on a menu that is already
opening or closing will no longer mess up the menu's proportions.
2007.05.20 - vegu@vegui.org
* version 0.1.2
* fixed: height of the menu will now longer be messed up when the
css border or padding attributes were set.
2007.04.09 - vegu@vegui.org
* version 0.1.1
* fixed: you can now even use the menu to navigate (DUHHHH)
2007.04.05 - vegu@vegui.org
* version 0.1.0
