..::amici::..

everything, anything
 
HomeCalendarPortalFAQGalleryMemberlistUsergroupsSearchRegisterLog in

Share | 
 

 make ur 0wn dr0p down menu

Go down 
AuthorMessage
Admin
Admin
Admin
avatar

Female
Number of posts : 294
Age : 30
Location : italy
Registration date : 2007-11-17

PostSubject: make ur 0wn dr0p down menu   Tue Dec 11, 2007 10:12 am

3 steps.. 2 make dis..
1st Arrow
HTML Code
PASTE THE CODE IN YOUR MEDIA BOX..
Idea HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.
Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout:
Code:
<ul id="sddm">
    <li><a href="#"
        onmouseover="mopen('m1')"
        onmouseout="mclosetime()">Home</a>
        <div id="m1"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">EDIT DIS</a>
        <a href="#">EDIT DIS</a>
        <a href="#">EDIT DIS</a>
        <a href="#">EDIT DIS</a>
        <a href="#">EDIT DIS</a>
        </div>
    </li>
    <li><a href="#"
        onmouseover="mopen('m2')"
        onmouseout="mclosetime()">Download</a>
        <div id="m2"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <a href="#">EDIT DIS</a>
        <a href="#">EDIT DIS</a>
        <a href="#">EDIT DIS</a>
        <a href="#">EDIT DIS</a>
        </div>
    </li>
    <li><a href="#">EDIT DIS</a></li>
    <li><a href="#">EDIT DIS</a></li>
    <li><a href="#">EDIT DIS</a></li>
</ul>
<div style="clear:both"></div>
👍 FAQ:
Quote :
you must edit EDIT DIS with ur own.. dis part is d part that you can see the DROP DOWN MENU
CSS CODE
Arrow paste t0 ur css section and edit the hex color...
Code:
#sddm
{ margin: 0;
 padding: 0;
 z-index: 30}
#sddm li
{ margin: 0;
 padding: 0;
 list-style: none;
 float: left;
 font: bold 11px arial}
#sddm li a
{ display: block;
 margin: 0 1px 0 0;
 padding: 4px 10px;
 width: 60px;
 background: #5970B2;
 color: #FFF;
 text-align: center;
 text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
 visibility: hidden;
 margin: 0;
 padding: 0;
 background: #EAEBD8;
 border: 1px solid #5970B2}
 #sddm div a
 { position: relative;
  display: block;
  margin: 0;
  padding: 5px 10px;
  width: auto;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  background: #EAEBD8;
  color: #2875DE;
  font: 11px arial}
 #sddm div a:hover
 { background: #49A3FF;
  color: #FFF}

JS CODE

Arrow paste and edit t0 ur EXT JS CODE..
Code:
// Copyright 2006-2007 brattgurl
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
 // cancel close timer
 mcancelclosetime();
 // close old layer
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 // get new layer and show it
 ddmenuitem = document.getElementById(id);
 ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
 closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
 if(closetimer)
 {
  window.clearTimeout(closetimer);
  closetimer = null;
 }
}
// close layer when click-out
document.onclick = mclose;
SAMPLE IMAGE

Thatís it! All you have to do now is add some hover styles and make it your own. Enjoy!
:midfinger: f0r more c0des..???>>> CLICK ME

_________________
SHARE ME

Back to top Go down
View user profile http://amici.forummotion.com
 
make ur 0wn dr0p down menu
Back to top 
Page 1 of 1
 Similar topics
-
» How to make yourself look like a smurf.
» Brand New Menu Items!
» How do you make a mmv ?
» How do you make your fantage character, your avatar?
» Make money with Swagbucks and Bing and others?

Permissions in this forum:You cannot reply to topics in this forum
..::amici::.. :: friendster Adds On-
Jump to: