[REQ] Codes I need..

[Sean]

Hello!

I was seeing if anyone had codes for "Drop Down Menu Box". I have searched, but I cannot find exactly what I am looking for. Everything I find is an image > drop down.

I was looking for a code that will allow plain text > drop down.

(Hover over the text & a drop down menu will appear).

Either that, or a code for sub navigation. (Click on plain text (top navigation) > sub navigation will appear in a text box. Anyone willing to help me?

Thank you,
Sean

 

[GeNyaa]

HTML:

<ul id="sddm">
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()""mclosetime()">example 1</a>
        <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">sub 1</a>
        <a href="#">sub 2</a>
        <a href="#">sub 3</a>
        </div>
        </li>
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()""mclosetime()">example 2</a>
        <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">sub 1</a>
        <a href="#">sub 2</a>
        <a href="#">sub 3</a>
        <a href="#">sub 4</a>
        </div>
        </li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()""mclosetime()">example 3</a>
        </li>
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()""mclosetime()">example 4</a>
        <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">sub 1</a>
        <a href="#">sub 2</a>
        <a href="#">sub 3</a>
        <a href="#">sub 4</a>
        </div>
        </li>
</ul>

CSS

#sddm {
	margin: 0;
	padding: 0;
	z-index: 30;
	}

#sddm li {
	margin: 0;
	padding: 0;
	margin-right:0px;
	list-style: none;
	float:left;
	font: bold 11px arial;
}

#sddm li a {
	display: block;
	margin: 0 1px 0 0;
	padding: 0px 0px;
	width: auto;
	background: #1287b3;
	color: #000;
	text-align: center;
	text-decoration: none;
}

#sddm li a:hover {
	background: #FFF;
}

#sddm div {	
	position:absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #1287b3;
	border: 1px solid #000;
	text-align:center;
}

#sddm div a {
	position: relative;
	display: block;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	background: #1287b3;
	color: #FFF;
	font: 12px arial;
}

#sddm div a:hover {
	background: #045371;
	color: #FFF;
}

Javascript

//menu
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; 
function movepic(img_name, img_src)
   {
   document[img_name].src = img_src;
   }

Example:

You must be registered to see links

(let me clean up the codes for you...) done...

 

[Sean]

D: Thanks, but that's what I keep finding..but I don't need that. I need plain HTML drop down. I will try and draw a picture.

 

[GeNyaa]

Well plain HTML will never happen.
Since there needs to be some javascript to trigger to show the dropdown + some CSS to hide the divs and later show them.
Well an plain dropdown menu is:

<ul style="list-style:none;">
<li>example 1
<ul style="list-style:none;"><li>sub 1</li><li>sub 2</li><li>sub 3</li><li>sub 4</li></ul></li>
<li>example 2
<ul style="list-style:none;"><li>sub 1</li><li>sub 2</li><li>sub 3</li><li>sub 4</li></ul></li>
<li>example 3</li>
<li>example 4
<ul style="list-style:none;"><li>sub 1</li><li>sub 2</li><li>sub 3</li><li>sub 4</li></ul></li>
</ul>

 

[foxx]

Sure you can do it with css only, simply do somrthing like li ul { display: none; } li:hover ul { display: block; } on the other hand, why wouldn't you want to use js, much more neat/compatible/dynamic

 

[GeNyaa]

Sure you can do it with css only, simply do somrthing like li ul { display: none; } li:hover ul { display: block; } on the other hand, why wouldn't you want to use js, much more neat/compatible/dynamic

This is true but old IE is not supporting this.
And you have to think about IE users

 

[Sean]

Here is the picture I came up with (Attachment).

It's like saying this;

Hovering over the link to this section (on forum.ragezone.com ~ index) and a drop down menu would appear. That's basically what I need. I've searched for it but couldn't find anything. The buttons look really ugly on my site.

Either that type of code or sub navigation code.

Basically what I'm saying here is; click on the plain HTML text then the sub navigation would appear down below in it's own content box.

 

[GeNyaa]

Here is the picture I came up with (Attachment).

It's like saying this;

Hovering over the link to this section (on forum.ragezone.com ~ index) and a drop down menu would appear. That's basically what I need. I've searched for it but couldn't find anything. The buttons look really ugly on my site.

Either that type of code or sub navigation code.

Basically what I'm saying here is; click on the plain HTML text then the sub navigation would appear down below in it's own content box.

Does it need to be clicking or hovering over is good as well?

 

[Sean]

Does it need to be clicking or hovering over is good as well?

Hovering over, seems cooler.

 

[GeNyaa]

Hovering over, seems cooler.

Give me some time... add me on msn: adj107adj@msn.com it will be some easyer to talk.

 

[gunnerone]

It is quite easy if Nyaa can't help I might be able to. It's all in the css of the site you need a hover state that drops the box for the nested list display as a block and style it.

 

[GeNyaa]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drop-down menu</title>
<style type="text/css" >
#sddm {
	margin:0px;
	padding:0px;
	z-index: 30;
	}

#sddm li {
	margin:0px;
	padding:0px;
	margin-right:0px;
	list-style: none;
	float:left;
	font: bold 11px arial;
}

#sddm li span {
	display: block;
	width: auto;
	padding:8px;
	background: #1287b3;
	color: #000;
	text-align: center;
	text-decoration: none;
}

#sddm li span:hover {
	background: #FFF;
}

#sddm div {	
	position:absolute;
	visibility: hidden;
	margin: 0;
	padding:10px;
	background: #1287b3;
	border: 1px solid #000;
	text-align:left;
}

#sddm div a {
	position: relative;
	display: block;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	background: #1287b3;
	color: #FFF;
	font: 12px arial;
}

#sddm div a:hover {
	background: #045371;
	color: #FFF;
}</style>
<script type="text/javascript">
//menu
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; 
function movepic(img_name, img_src)
   {
   document[img_name].src = img_src;
   }
</script>
</head>
<body>
<div style="background-color:#000; width:1000px; height:30px; color:#FFF;">
<ul id="sddm">
<li><span onmouseover="mopen('m1')" onmouseout="mclosetime()""mclosetime()">example 1</span>
        <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        Text here lol<br />
        more text here <br />
        </div>
        </li>
<li><span onmouseover="mopen('m2')" onmouseout="mclosetime()""mclosetime()">example 2</span>
        <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        Text here lol<br />
        more text here <br />
        </div>
        </li>
<li><span href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()""mclosetime()">example 3</span>
        </li>
<li><span href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()""mclosetime()">example 4</span>
        <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        Text here lol<br />
        more text here <br />
        </div>
        </li>
</ul>
</div>
</body>
</html>

This did the job...

 

[holthelper]

You must be registered to see links

 

[foxx]

This is true but old IE is not supporting this.
And you have to think about IE users

No you don't.

Both google and facebook are dropping IE6 support and so should every webdesigner.

Not to mention that if someone is retarded enough to still use IE6, there's also high possibility they won't have JS on.

 

[Sean]

Thanks to Nyaa-Sensei for helping me out.

/closed