How do I code a drop-down menu?

  • pippi
  • Born
  • Born
  • No Avatar
  • Joined: Dec 19, 2003
  • Posts: 3
  • Status: Offline

Post December 24th, 2003, 7:20 am

Hi!

I'm quite new to javascript/php, and I was wondering what the best method is for a drop down menu such as in Adobe's homepage (http://www.adobe.com Services, Products, etc. menu). Do I write this in Javascript? Do search engines know how to navigate through these kinds of pull-down menus?

Thanks for any input!
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 24th, 2003, 7:20 am

  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post December 24th, 2003, 10:11 am

Here's an example of a jump down menu done in javascript. You can copy and paste the script portion into the head of your page and the form into the body where you want the menu to appear substituting your own urls of course. I'm pretty sure search engines don't follow the links in these kinds of menus, and it shouldn't be the only way the pages are accessible since some people might not have javascript enabled. I use one on my site because I have a lot of pages and it is a convenient way to make a lot of links available without taking up a lot of screen space, but the pages listed are still available from the site map and indirectly from other category pages listed in an ordinary menu.


Code: [ Select ]
<head>
<title>Example Jump Menu</title>

<script type="text/javascript">
<!--
function jump(theForm)
{
  newURL = theForm.urls.options[theForm.urls.selectedIndex].value ;
  if (newURL != "") location.href = newURL;
}
//-->
</script>

</head>
<body>

<form action="no_value">
<select name="urls" onchange="jump(this.form)">
<option value="" selected="selected">--- Quick Jump ---</option>
<option value="http://www.gotrivia.com/index.html">Home</option>
<option value="http://www.gotrivia.com/feedback.html">Feedback</option>
</select>
</form>

</body>
</html>
  1. <head>
  2. <title>Example Jump Menu</title>
  3. <script type="text/javascript">
  4. <!--
  5. function jump(theForm)
  6. {
  7.   newURL = theForm.urls.options[theForm.urls.selectedIndex].value ;
  8.   if (newURL != "") location.href = newURL;
  9. }
  10. //-->
  11. </script>
  12. </head>
  13. <body>
  14. <form action="no_value">
  15. <select name="urls" onchange="jump(this.form)">
  16. <option value="" selected="selected">--- Quick Jump ---</option>
  17. <option value="http://www.gotrivia.com/index.html">Home</option>
  18. <option value="http://www.gotrivia.com/feedback.html">Feedback</option>
  19. </select>
  20. </form>
  21. </body>
  22. </html>
Free Programming Resources
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post December 25th, 2003, 10:46 am

Rich - are you sure those are what he's after? I think he's looking for more of a DHTML menu such as Adobe displays, not a pulldown.

As a matter of fact, although I have one DHTML script that I have used, I'm looking for a good crossbrowser one my self. I've reviewed source at Adobe, but I can't tell exactly what they are doing with it. There seems to be a few included template files in their's.

Pippi - for what it's worth, the way I'm approaching my research is to find pages like Adobe with similar DHTML menus until I find one I like and understand the source code enough that I can modify it to make it work for me. If I find one before you get what you're looking for, I'll let you know.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post December 25th, 2003, 11:00 am

Ack, I saw the javascript drop down with the countries in the right hand corner of adobe's page and thought that's what he meant.
Free Programming Resources
  • pippi
  • Born
  • Born
  • No Avatar
  • Joined: Dec 19, 2003
  • Posts: 3
  • Status: Offline

Post December 27th, 2003, 9:02 am

hi guys, and thanks for the replies.

i think ATNO/TW understood right, i'm trying to do a drop-down menu as on adobe's page with the links products, solutions, support, purchase, and company, but the code for the page is a little too complicated for me but i'd love to setup a page with those kinds of menus.

i'll try looking for a more simple example on the web somewhere and see if i can view and understand the source better.

P.S. i should upload an avatar image soon...'he' is actually a 'she' ;)
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post December 27th, 2003, 10:03 am

Sorry for the confusion pippi. Dynamic Drive has a bunch of dhtml menu scripts that you can check out. I'm not sure if any will fit your needs, but perhaps some of them will be easier to dissect than the one at adobe.

http://www.dynamicdrive.com/dynamicindex1/
Free Programming Resources
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post December 28th, 2003, 10:01 am

pippi wrote:

P.S. i should upload an avatar image soon...'he' is actually a 'she' ;)


Ouch! Now I feel embarrassed. Thanks for pointing that out. Apologies for the assumption.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • DanThMan
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Dec 28, 2003
  • Posts: 6
  • Loc: Goodridge,Smallcountry,Sweden
  • Status: Offline

Post December 28th, 2003, 10:18 am

The best menu I have used ( still am )
http://www.milonic.com/
second best
http://www.dhtmlcentral.com/
having some trouble gettin' there though
Both are very flexible and very proffesional and also free for personal use
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post December 28th, 2003, 10:26 am

Thanks DanThMan - those both look like they'll work for me and solve several problems I haven't been able to overcome. I knew about DHTML central, but haven't been there in awhile as I lost the link a few reformats ago.

Again, thanks.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post December 28th, 2003, 10:31 am

I'd suggest trying them out with javascript disabled. My problem with some of these menus is that they don't show up at all without javascript. I considered the milonic one, but it pulls a disappearing act when javascript is disabled. You'll want to make sure there is an alternative method of navigation inside the noscript tag.
Free Programming Resources
  • DanThMan
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Dec 28, 2003
  • Posts: 6
  • Loc: Goodridge,Smallcountry,Sweden
  • Status: Offline

Post December 28th, 2003, 10:51 am

You're totally right RichB!
But javascript disabled isn't in my vocabularity and as you were typing..
there's solutions even to those who will surf the web with less fun!

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 124 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.