Drop Down Menu...

sabian1982 · #1 12-07-2005, 08:48 AM

Im in the process of updating http://happydazevw.voisd.com which has main flash navigation. Im not so worried about the use of images but id like to have a similar thing but using html code/javascript/php/dhtml... something thats looks nice and simple and isnt flash so its better for SEO. I need to quite simply have a fold out style menu.

Any ideas how to do it?

**the_pm** · #2 12-07-2005, 10:08 AM

Quote:

using html code/javascript/php/dhtml... something thats looks nice and simple and isnt flash so its better for SEO.

JavaScript/DOM/DHTML is not better for SEO. Generally, it's about as bad as Flash. It's not quite as bad (some spiders can sort of decipher it), but it's bad.

Patrick · #3 12-07-2005, 11:00 AM

Take a look at http://www.udm4.com , it's a great drop down menu for only $75 to use commercially!

sabian1982 · #4 12-07-2005, 11:22 AM

Pat H, id perfer to do it myself using a tutorial or something...

the_pm, if its in dhtml or javascript at least the content and links can be spidered... unlike flash which is hard or not possible to index due to the nature of flash.

There must be a simple way of doing drop out menus even if its just <li> html items some css and some javascript!!!

**the_pm** · #5 12-07-2005, 11:35 AM

Quote:

the_pm, if its in dhtml or javascript at least the content and links can be spidered

"Can be" and "will be" are two different things

But to answer your next question, yes doing drop downs that consist of hidden lists and DOM is not only possible, it's my preferred method.

http://www.iwdn.net/showthread.php?p=35712#post35712
The pertinent code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Menus</title>
<style type="text/css">
body { margin:0 ; padding:0 }
ul, li { list-style:none ; margin:0 ; padding:0 }
#menus { border:1px solid #000 ; background:#900 ; color:#FFF }
#menus li { border-right:1px solid #000 ; float:left ; width:250px }
#menus li a, #submenu1 li a, #submenu2 li a { background:#900 ; color:#FFF ; display:block ; margin:0 ; padding:0 ; text-align:center ; text-decoration:none ; width:100% }

#submenu1, #submenu2 { border-right:1px solid #000 ; border-left:1px solid #000 ; position:absolute ; visibility:hidden }
#submenu1 li, #submenu2 li { border-bottom:1px solid #000 }
#submenu1 { width:250px ; z-index:1 }
#submenu2 { margin-left:251px ; width:250px ; z-index:2 }

.clearfix:after { content:"." ; display:block ; height:0 ; clear:both ; visibility:hidden }
.clearfix { display:inline-table }
/* Hides from IE-mac \*/
* html .clearfix { height:1% }
.clearfix {display:block }
/* End hide from IE-mac */
</style>
<script type="text/javascript">
function clr() {
document.getElementById('submenu1').style.visibility = "hidden";
document.getElementById('submenu2').style.visibility = "hidden";
}
function toggle(foo) {
document.getElementById(foo).style.visibility = "visible";
}
function timeclr(bar) {
setTimeout('clr()',1000);
}
</script>
</head>

<body>

<div id="menus" class="clearfix">
<ul>
<li><a href="section1.html" onmouseover="clr();toggle('submenu1');return false;">Section 1</a></li>
<li><a href="section2.html" onmouseover="clr();toggle('submenu2');return false;">Section 2</a></li>
</ul>
</div>

<ul id="submenu1" onmouseout="timeclr('submenu1');">
<li><a href="section1_page1.html">Section 1, Page 1</a></li>
<li><a href="section1_page2.html">Section 1, Page 2</a></li>
<li><a href="section1_page3.html">Section 1, Page 3</a></li>
</ul>

<ul id="submenu2" onmouseout="timeclr('submenu2');">
<li><a href="section2_page1.html">Section 2, Page 1</a></li>
<li><a href="section2_page2.html">Section 2, Page 2</a></li>
<li><a href="section2_page3.html">Section 2, Page 3</a></li>
</ul>

<h1>This is my page</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

I used a timed clear as the cheap way out in the above script (it was a little two second toss-together). Generally, I prefer to use an onmouseover event handler to deal with clearing the menus, and attributing it to nearby objects.

furqan_sindhu · #6 12-07-2005, 12:27 PM

yoh man !

what is the language that has been used in above code to display drop down menus !

**the_pm** · #7 12-07-2005, 12:31 PM

A little basic CSS (nothing fancy there), and some basic DOM, which toggles the important CSS elements on and off. It may look like a mess when you see it on the screen, but turn it into a Web page and dissect it a bit. It's really not all that hard to figure out.

gobeyond · #8 12-08-2005, 10:03 AM

Search engines can't follow the links inside Flash or Javascript. Try CSS instead.

Here is a nice technique that may work for you. There are several variations of this on the same website. Do a search.

http://www.alistapart.com/articles/horizdropdowns/

Terry

Drop Down Menu...

Sponsored Links

Advertise Here

Internet Services

Web Development

Digital Marketing

Consumer Tech