Drop Down menu!

Jseb · 03-02-2005, 12:58 AM

Hi well i am trying to create a new layout for a fan site and all the layout and content is almost complited :p However the menu is different and i was wondering what was the code or how to make a menu such as www.bizkitshow.com I will really love to know how to make this kind of menu to had that new layout!

iRoss · 03-02-2005, 11:09 AM

It's Javascript Mate, It's Actually Quite Hard, Because You Have 2 Cover Up Some Of The Text For Example If Nothing Was Covering It Before It Droped Down, It Will Look Like This...

(On The Way I Do It, I Don't Think It Does On Bizkit)

Links
Guides
Staff
Habbo Newsie

So When The Mouse RollsOver It, It Kind Of Falls Down... But Like I Said You Have 2 Cover It Up E.g A Banner. Therefore Covering Up The Other Options Until They Dropdown... You Can Bring Things 2 The Front Of The Page By Using The "Bring 2 Front" Tool By Using Ms Frontpage 2000 And Onwards.

Here Is The HTML For A Basic Menu, You Will Need 2 Fiddle Around With The Colours Etc Etc.

<HTML>
<HEAD>
<TITLE>Using DHTML to Create Sliding Menus (From JavaScript For Dummies, 4th Edition)</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

<STYLE TYPE="text/css">


</STYLE>

</HEAD>

<BODY BGCOLOR="white">

<div id="resMenu" class="menu" onmouseover="displayMenu('resMenu',-5)" onmouseout="displayMenu('resMenu',-90)"><br />
<a href="http://channels.netscape.com/ns/browsers/default.jsp">JavaScript doc (Nav)</a><br />
<a href="http://www.microsoft.com/windows/ie/default.htm">JavaScript doc (IE)</a><br />
<a href="http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html">DOM (Nav)</a><br />
<a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/objects.asp">DOM (IE)</a><br />
<a href="http://www.scriptsearch.com/JavaScript">ScriptSearch</a><br />
<b><a href="javascript:displayMenu('resMenu')">JavaScrip t Resources</a></b>
</div>

<div id="bookMenu" class="menu" onmouseover="displayMenu('bookMenu',-5)" onmouseout="displayMenu('bookMenu',-90)"><br />
<a href="http://www.dummies.com">Dummies</a><br />
<a href="http://www.powells.com">Powells</a><br />
<a href="http://www.amazon.com">Amazon</a><br />
<a href="http://www.ebay.com">eBay</a><br />
<a href="http://www.bn.com">Barnes & Noble</a><br />
<b><a href="javascript:displayMenu('bookMenu')">JavaScri pt Books</a></b>
</div>

</BODY>
</HTML>

I Got This From Javascript For Dummies, So That's Why It Has All Of Those Lame Links

But You Will See If You Move It Around In Frontpage/Dreamweaver It Has The Options Piled On Top Of It.

It Appears If You Try And Cover It Up, It Moves Back 2 It's Original Place...

P.s I Think I Have Done It Wrong, I Looked At Bizkits HTML And I Couldn't Really Figure It Out... I Will Look Into It Some More...

Hope This Helped In A Strange Way :eusa_doh:

Oh, Maybe Try Dynamic Drive

Ross :eusa_shif

~~Certificate~~ · 03-02-2005, 12:33 PM

i made a script my self to do it like BizkitShow if u want this one it will Charge im afraid

iRoss · 03-02-2005, 03:35 PM

I Gave My Advice For Free, And Your Charging Him! :eusa_doh:

Jseb · 03-02-2005, 04:10 PM

lol yeah its quite funny to heard

But yeah well i find the best way and it was close to u simplesimon12. but yeah i simply took a code on dynamicdrive after i relook at it and i found it so now i am going to give it away

lol because paying for script is insane i could create one if i would!

You put this in the header:
<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a><br>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a><br>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a><br>'
menu1[3]='<a href="http://builder.com">Builder.com</a><br>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a><br>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a><br>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a><br>'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';backg round-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWid th-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeig ht-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeigh t
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHe ight
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

Then after you put it were u want it on ur site:

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">
<font color="#ECECFF">Web Design</font></a><font color="#ECECFF"> | </font>

The line below:
onMouseover="dropdownmenu(this, event, menu1, '150px')"

is the main line were you must support your link with it !

have fun a really nice navigator!

iRoss · 03-02-2005, 04:26 PM

at least there is someone consideret enough not charge us for it xP

Mentor · 03-02-2005, 07:37 PM

Bizcat show actaly usees http://www.udm4.com or ultmate drop down menu, just get the personaly non commesal use version, and ist easy to install, plus im gussing it would come with instrutions to help as well

-JT- · 03-02-2005, 08:46 PM

dude, thats such a help!

Azela · 03-02-2005, 08:49 PM

All this stuff really escapes me, you really are pure genius's aren't you?

iRoss · 03-02-2005, 09:19 PM

Originally Posted by Azela

All this stuff really escapes me, you really are pure genius's aren't you?

Well You Know, We Serve Our Time

Cool, Thanks Mentor

Thread: Drop Down menu!

Thread Tools

Drop Down menu!

Posting Permissions