hey guys

ive been looking for code to make menu's like these sites for example
http://afterdeath.dkpsystem.com/news.php
http://tnb.dkpsystem.com/forum.php

but i can't figure out where to look

thanks
bork

Afterdeath is using something called fsmenu.js. I wasn't able to find that online (there are lots of menus called that but I didn't find one that was javascript and worked the way theirs did). For that style menu you could try this: Try this: http://www.twinhelix.com/dhtml/popupmenu/

The one on TNB is one that I created way back when and then was improved on with cookies by carlpalmer of tnb. The thread discussing that was here: http://www.dkpsystem.com/viewthread.php?threadid=2270

I just said way back when and realized it was only 3 months ago.

Note: If you do use the tnb style menus make sure your title doesn't depend on the elements matching up. I have had serious trouble with my title because the menu elements that load can change width which messes it all up... and don't look at the site in IE. It's horrific.

But I don't care.

I'll fix it at some point.

THANKS man really apreciated

The one menu in your example is of a slide down menu which is very complext to build. The other has a gradual fade in. Both are complex and require use of time functions and the first requires building a simulated motion function.

But if you looking for a simple drop down menu (pop up) here's how you can do it.

Style and Javascript:

<style type="text/css">
#m2 {display: none; }
</style>

<script type="text/javascript" language="javascript">
function popUp(obj) {
obj.style.display="block";
}
function popDown(obj) {
obj.style.display="none";
}
</script>


HTML nested in tables or divs:

<td width="20%" valign="top" align="center">
<div id="Mmenu" onMouseover="popUp(m2)" onMouseout="popDown(m2)">
<a onMouseover="newcolor(this)" onMouseout="oldcolor(this)" class="menu1" href="#"><b>Menu</b></a>
</div>
<table width="155" cellpadding="0" cellspacing="0" border="0" id="m2" onMouseover="popUp(m2)" onMouseout="popDown(m2)">
<tr>
<td valign="top" align="center">
<table width="155" cellpadding="0" cellspacing="0" border="0" class="menu2">
<!--System:IfRank:4-->
<tr>
<td class="menu3">
<a id="dmenulink" href="admin.php">Admin</a>
</td>
</tr>
<!--System:EndIfRank-->
<tr>
<td class="menu3">
<a id="dmenulink" href="news.php">News</a>
</td>
</tr>
<tr>
<td class="menu3">
<a id="dmenulink" href="forum.php">Forum</a>
</td>
</tr>
<tr>
<td class="menu3">
<a id="dmenulink" href="gallery.php">Gallery</a>
</td>
</tr>
<tr>
<td class="menu3">
<a id="dmenulink" href="availability.php">Raid Availability</a>
</td>
</tr>
<tr>
<td class="menu3">
<a id="dmenulink" href="professionlist.php">Professions</a>
</td>
</tr>
<tr>
<td class="menu3">
<a id="dmenulink" href="app.php">Online Application</a>
</td>
</tr>
<tr>
<td class="menu3">
<a id="dmenulink" href="dynpage.php?id=1">Instance Checker</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>


Obviously the html part is one menu that can be multiplied to make several menus. Make sure you change the m2 ID for each new menu. Also make sure you assign each new ID it's dispaly : none; style.

Now there is some argument over positioning technique. Just so that you know you could replace the table structure with divs. My reason for not doing it that way is I have ran into ocationall problems on differnt browsers.

Also be aware that any content below the menu (or left if the menu is on the left) will be shifted down as if the menus were there so you will need to absolute position the elements below the menu. Also then for the menu to appear over top of that lower element you need to assign a z-index to the menus and the elements below it (note: only positioned elements can use z-index).

This is a very basic explanation if you have questions feel free to ask. But I think you will find it a lot simpler that setting up the above examples if you are not very proficient in javascript.

EDIT: noticed the closing bracets was missing for one of the functions

krik i can't seem to get this working i got it on the demo site but i think theres some flaw in it because mouseover does nothing...



its ok i got other javascripts menu's to work find them here

but anyway didn't get your code to work maybe a bug in it?

I am sure it works I copied and pasted exactly what you see from my guilds site.

I really is a very simple concept. I set the "display" style of each menus list of links to "none" so they are not visible by default. And when someone mouses over a given menus header a javascript function is run that changes the "display" style to "block" which shows the the associated menu list. And on mouse out it runs a function that changes it back.

So in the example above when someone mouses over "Menu" it runs the function "popDown(m2)" the "m2" references the hidden table with an id of "m2". Now to keep the menu from disappering once the pointer moves into that list of menus I also assign that function to the menu lists table.

One note most people are unaware of with styles. The page applies the last style that is assigned to an object. So if you put the style #m2 {display: none; } after the javascript it will not work. Also if you are using separate javascript or CSS pages they have to load in the correct order for this to work. And you definatly can not assign the style directly to the object that is being moused over. Also the style has to be assigned via and ID tag or it will not work.

Really this is just a dumb trick of changing the a style attribute using a javascript function. I have been using this exact function for over 5 years on other websites that I have done (it's amazing what people have payed to have me do, just, this to their menus on their web sites).

You can however apply other styles to the Object directly in HTML, via a Style Tag, or even Javascript... as long as they aren't conflicting styles. In other words... If I set the Style tag inside my Head tags, and set the text of an object to
Font-Weight: bold (using the object Class or a global TagType style)

I can also do an inline HTML style that sets the Color of the object. The inline HTML style trumps all... however, any style not explicitly declared in the inline HTML style can be set via a Class style in the Head tag/CSS Sheet, etc.



EXAMPLE:


<html>
<head>
<style>
.MyDiv {
Font-Weight: bold;
Text-Decoration: underline;
}
</style>
</head>
<body>
<div id="divMyText" class="MyDiv" style="Color: #FF0000; Text-Decoration: none">This is my text. It is Red, and Bold, but not underlined.</div>
</body>
</html>


In the above example I use both a Class, and inline HTML. The inline HTML trumps the Class CSS... so the text will be Red (#FF0000), and the text will NOT be underlined. However, I didn't contradict the Class CSS of Font-Weight... so my text will also be Bold.

Final Result will look like this:

This is my text. It is Red, and Bold, but not underlined.

That's all true but has nothing to do with what I was explaining.

To get the popup menus to work you have to assign the display: none; in the "head" via the "style" tags or as an included CSS page. So that when the onMouseover="popUp(m2)" calls the "popUp" function it works. Now in some browsers you may be able to set the "display: none;" inline but in others it would cause problems.

Not to mention it is alot easier to set the "display: none;" in the "head" for multiple id's than inline for each of them.


#m2,#p2,#r2,#l2,#d2 {display: none;}


On a side note. W3C standards recommed against using capitalization in the style properties. Now in most browsers it will work fine, but that is just because they know that they may have to drop them down to lowercase. It just not a good thing to waste processing on something like that.

True enough...

I was just trying to add a little clarity to the overall discussion for those who aren't familiar with CSS.