How do I code a drop-down menu?

  • pippi
  • Born
  • Born
  • pippi
  • Posts: 3

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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>
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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.
  • pippi
  • Born
  • Born
  • pippi
  • Posts: 3

Post 3+ Months Ago

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
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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/
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • DanThMan
  • Newbie
  • Newbie
  • DanThMan
  • Posts: 6
  • Loc: Goodridge,Smallcountry,Sweden

Post 3+ Months Ago

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
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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.
  • DanThMan
  • Newbie
  • Newbie
  • DanThMan
  • Posts: 6
  • Loc: Goodridge,Smallcountry,Sweden

Post 3+ Months Ago

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 96 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
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.