 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
VegUISiteKit - Dropping Down Some Menus
written by vegu on 09 Apr, 2007 06:38:41
In this tutorial i will show you how to implement the vsk dropdown menu into your website. We will take a look at menu styling and nested menus also.Make sure the necessary vsk libraries are included in your html page. You can check what dependencies the vsk dropdown menu script has in the online documentation or the on this page.
If you're not sure on how to use vsk in your web project at all please read this tutorial before continuing on here.
We begin with the HTML code that builds the elements of the menus.
code: html<div class="ddmenu" id="ddmenu_1">
<a href="somewhere.html">Option 0</a>
<a vsk_nested="ddmenu_4" href="somewhere.html">Option 1</a>
<a href="somewhere.html">Option 2</a>
<a vsk_nested="ddmenu_2" href="somewhere.html">Option 3</a>
<a href="somewhere.html">Option 4</a>
</div>
<div class="ddmenu" id="ddmenu_2">
<a href="somewhere.html">Sub Option 0</a>
<a vsk_nested="ddmenu_3" href="somewhere.html">Sub Option 1</a>
</div>
<div class="ddmenu" id="ddmenu_3">
<a href="somewhere.html">Sub Option 0</a>
<a href="somewhere.html">Sub Option 1</a>
</div>
<div class="ddmenu" id="ddmenu_4">
<a href="somewhere.html">Sub Option 0</a>
<a href="somewhere.html">Sub Option 1</a>
</div>
<div class="ddmenu" id="ddmenu_5">
<a href="somewhere.html">Sub Option 0</a>
<a href="somewhere.html">Sub Option 1</a>
</div>
Each menu is actually a DIV element, and each menu option is an A element. Again simplistic design is in the foreground above all else.
We set an id on each menu so we can find it later when we initialize them all and we also set a css class on each menu.
The vsk_nested attribute you see set on some of menu options defines that the option is linked to another menu which will then open as a nested menu. The value of the attribute should be the id of the menu that you want to link to the option.
So in the example above we are setting up two menus with the first menu having three nested menus and the second menu having none.
The important thing with css class is that that you can define the css classes to use for the menu options (a tags) as well.
Yes i said classes because there will be a hover and a normal class and both classes should be prependend with the class name of the menu.
Confused yet? Let me show you what i mean
code: css/* the class for the menu */
div.ddmenu {
background-color: #ababab;
border: 1px #000 solid;
visibility: hidden;
width: 100px;
}
/* the class for a normal menu item in a menu that uses the ddmenu class */
a.ddmenu_item {
font: 10px Arial, Verdana, Helvetica;
padding: 5px;
}
/* the class for a hovered menu item in a menu that uses the ddmenu class */
a.ddmenu_item_hover {
font: 10px Arial, Verdana, Helvetica;
padding: 5px;
background-color:#000;
color: #fff;
}
Now we need away to open the two root menus (ddmenu_1 and ddmenu_5). Some simple links ill do in this example:
code: html<a onmousedown="v(this).ddmenu_open('ddmenu_1','b',15,5);">Open 1st Menu</a>,
<a onmousedown="v(this).ddmenu_open('ddmenu_5','b',15,5);">Open 2nd Menu</a>,
We set the onmousedown event on the element and have it create a VSK_Node object controlling the element via the v() function. Then the ddmenu_open method is called. The first argument submitted to the method is the id of the menu the link is supposed to open, the second argument defines the alignment of the menu.
- 'b' - bottom alignment, menu will be opened below element
- 't' - top alignment, menu will be opened above element
- 'l' - left alignment, menu will be opened left of the element
- 'r' - right alignment, menu will be opened right of the element
The last two arguments are option values of the x and y offset of the menu. Setting them allows you finer positioning of the menu.
Initializing the menu
The last thing we need to do is to initialize the menu
code: jsddmnu_init(
['ddmenu_1', 'ddmenu_2', 'ddmenu_3', 'ddmenu_4', 'ddmenu_5'],
-10, 'morph', 200, 1, 5, 5, '#000', 20
);
Okay, lets take it slow :) The first argument is an array. This array holds all menus that you want to be befriended and initialized in the same call. Befriended menus cannot be open at the same time unless they are displayed as nested menus.
So this argument both defines which menus cannot be open at the same time and which menus should be initialized with the same settings. The second argument is the space between nested menus, careful here because a negative value means positive space and a positive value means negative space.
Everything past the second argument is optional. The third argument defines which effect should be used when a menu is opened. Note that the respective effect library needs to be loaded for this to work.
Possible values for this argument are 'morph', 'fade' and null. If null is submitted no effect will be used. The fourth argument is the effect time in milliseconds.
Argument five is a boolean argument that if true will enable the shadow effect on the menu. If true argument six and seven are the shadow effect's offset values (x,y), argument eight is the shadow color (css value) and the last argument is the shadow effect's opacity value (1-100).
That's it :)
Multiple menus with different behaviors
If you want to have to differently behaving menu sets simply call the ddmnu_init function more than once. One time for each menu set.
Marking nested menus
You could also mark nested menus with little arrow icons. All in all i left the design options pretty open, its all up to you. To add arrows to menu options that lead to nest menus you could simply to this:
code: html<a href="somewhere.html">Option 0 <img src="arrow.gif" /></a>
Related Posts
- No related posts
Your Comment
Comments to this post: (4)
RSS Feed for commentsAlphonso
on 07 May, 2007 - 03:41:50
how can i add a drop down menu in a html website
without css file
Report this comment
CharnX
on 07 May, 2007 - 05:40:02
You do not need to put the css code into its own .css file, you can simply put it between <style> tags in the HTML files <head>
Report this comment
zan
on 29 May, 2007 - 09:29:22
That title is hilarious
Report this comment
Tek
on 12 Feb, 2010 - 16:55:47
I'm using this with onmouseover, but if the mouse leaves the area without touching the menu, the menu sticks instead of vanishing. I want it to disappear on mouseout. Is there any way to do this?
Report this comment
