How do I install a drop down menu?

rhino1616 · #1 29-Aug-2005, 15:19

Hi,

Im designing a webpage if FP2000 & I was looking around for some free drop down menus, & I was given a few links to look at.

http://gosu.pl/demo/mygosumenu/1.1/example1.html
http://www.udm4.com/

Some of the following menus looked quite nice but since im not a professional webdesigner or code writer, I need a little help installing the menus. Im not totally useless because understand a bit of code & I have an idea how they work, I know that the majority have javascript,css & html & they need to be stratiegically placed in the web pages IE: CSS in the <HEAD> tags...etc.
The ony problem is when I place them in the web page they dont seem to work. Below is the link on 1 menu I was given:

http://www.mywebstuff.com/02_css/css_07.html

I did just as the web page says & I highlighted, copy, & pasted the code into thier respected places. below is the example of what i did (highlighted in red)

I added this to the body:

HTML Code:

<ul class="topmenu" id="dmenu">
	<li class="topmenuli"><a href="" class="topmenutitle">Home</a>
	<ul class="submenuul">
		<li class="submenuli"><a href="">Frequently ...</a></li>
		<li class="submenuli"><a href="">Impressum ...</a></li>
		<li class="submenuli"><a href="">Links ...</a></li>
		<li class="submenuli"><a href="">Sitemap ...</a></li>
	</ul>

	</li>

	<li class="topmenuli"><a href="" class="topmenutitle">Perl</a>

	<ul class="submenuul">
		<li class="submenuli"><a href="">Trees, ...</a></li>
		<li class="submenuli"><a href="">Perl ...</a></li>
		<li class="submenuli"><a href="">XML ...</a></li>
		<li class="submenuli"><a href="">XML ...</a></li>
	</ul>

	</li>

	<li class="topmenuli"><a href="" class="topmenutitle">SVG</a>

	<ul class="submenuul">
		<li class="submenuli"><a href="">Interactive ...</a></li>
		<li class="submenuli"><a href="">Basic ...</a></li>
		<li class="submenuli"><a href="">Interactive ...</a></li>
		<li class="submenuli"><a href="">Animated ...</a></li>
		<li class="submenuli"><a href="">Clipart ...</a></li>
	</ul>

	</li>
</ul>


<div class="content">

I added this to the HEAD tag:

HTML Code:

<style type="text/css">
<!--

/* minimum menu requirements for functionality */

.topmenuul{
	list-style-type:none;
	margin:0;
	padding:0;
}

.topmenuli{
	list-style-type:none;
	float:left;
}

.topmenutitle{
	display:block;
	width:100px;
}

.submenuul{
	list-style-type:none;
	position:absolute;
	margin: 0;
	padding:0;
	display:none;
}

.submenuli a{
	display:block;
	width:250px;
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
	display: block;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
}

#content {
	clear: left;

}
-->
</style>

/* menu design */

#dmenu {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:12px;
}

.topmenuul {
	
}

.topmenutitle {
	text-indent:3px;
	text-decoration: none;
	border:1px solid #000000;
	padding:3px;
	line-height:14px;
}

.submenuul {
	margin-top:-1px;
	background-color:#E7F7FF;
	background-position: top left;
	background-repeat: repeat-x;
	border-top:1px solid #000000;
	border-bottom:2px solid #000000;
	border-right:2px solid #000000;
	border-left:7px solid #FF0000;

}

.submenuli a{
	padding:3px;
	text-decoration: none;
	color: #000000;

}

.submenuli a:hover{
	text-decoration: none;
	background:#336699;
	color: #FFFFFF;
}

,and I then added this to the BODY again:

HTML Code:

<script type="text/javascript">

startList = function() {
	if (document.all && document.getElementById) {
		navRoot = document.getElementById("dmenu");
		for (i=0; i < navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}

window.onload=startList;
//-->
</script>

I previewed it and it just displayed a bunch of code on the screen, does anyone know what I did wrong? Am I doing something wrong in FP 2000? Id like to have my menu to be as compatible with as many browsers as possible, & be simple & customizable like this page i saw:
http://www.pwww.com/

so if anyone could give me any advice, suggestions such as a better menu, or maybe you may think Im using to complex of menu please feel free to say so.

Thank you

PS: Am I just wasting my time?, someone else told I could make a nice menu in flash, but then im concered about loading times & etc...... any opinions appreciated

JdS · #2 30-Aug-2005, 05:22

Why do you have some CSS markup outside the <style> tags?

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Can someone suggestion a nice drop down menu?	rhino1616	Web Design Forum	4	22-Aug-2005 10:16
Photoshop Tutorial: Make An Inspirational/Mystical Picture	ToddSAFM	Graphics Forum	9	09-Aug-2005 20:32
Image on the unused Menu bar area ?	hemanth.balaji	C++ Forum	6	10-Jun-2005 13:39
javascript menu	dopee	Web Design Forum	7	30-Jul-2004 23:22
top menu bar trouble	chalaska	Web Design Forum	3	18-Jul-2002 21:11