Jump to content

Drop down form


Guest JPBlobby

Recommended Posts

Guest JPBlobby

Hi,There are loads of articles, sites, and forums that explain how to create a drop down menu using javascript. A sort of menu bar that can be pulled down with a onmouseover or by clicking on a link. Is it possible, however, to create the same kind of system but that displays a form instead of a menu? Let me explain. I want to have a menu bar with various links and with one of the links I don't want to display sub menus but a form. For example, if I click on Search, it pulls down a layer and displays a search form. Thanks in advance for any information you can provide me.

Link to post
Share on other sites
Guest grk_w3
Hi,There are loads of articles, sites, and forums that explain how to create a drop down menu using javascript. A sort of menu bar that can be pulled down with a onmouseover or by clicking on a link. Is it possible, however, to create the same kind of system but that displays a form instead of a menu? Let me explain. I want to have a menu bar with various links and with one of the links I don't want to display sub menus but a form. For example, if I click on Search, it pulls down a layer and displays a search form. Thanks in advance for any information you can provide me.

is this not possible thru <a href> 's
Link to post
Share on other sites

It would be a little more advanced than average, but i'll explain some bits that might be used:An area with display="none"<span onclick="do display the area, but only if not already there">linky</span>areas content will be the form you want :(Am I not too difficult? :) It is just a SPAN, that displays a form area, and hides it after second click :)

Link to post
Share on other sites

I'm not sure I understand fully what you want, but I'm going to try to tell you how I would do it.<div name="myForm" style="visibility: hidden">any thing you want to put can go in here.</div>then have your button or menu link, whatever, just set the visibility of myForm to visible. ex: <a onclick="document.myform.style.visibility='visible'">View the form!</a>Does that help?

Link to post
Share on other sites

anchor elements, <a>, are no good for this situation. Only to jump to other areas insite a document, or other documents.To use it for special javascript on a page, use <span> or at least, include the required attributes :D but then it won't work for you anymore, so here explanation: <a href="some_document.htm" target="_top" onclick='show popup; return false'>Any tekst</a>The href and target are required to valid it as a link (clickable). With onclick you are able to redirect when clicked, with javascript, but the script inside that attrubute MUST end with:

; return false
To disable the trip to the page you defined with href :) This way, you also can just write the text in href you want to be shoew when hovering the 'link' :(:)
Link to post
Share on other sites
  • 2 weeks later...

Try this: :)

<html><head><title>Blah blah</title><script language="JavaScript">function resetAllItems(){ for (i = 0; i < itemIds.length; i++) {  document.getElementById(itemIds[i]).style.display = "none"; }}function expandItem(itemId){ resetAllItems(); document.getElementById(itemId).style.display = "";}var itemIds = new Array();itemIds[0] = "divSearchForm";itemIds[1] = "divOtherThing";itemIds[2] = "divLastDropDw";</script></head><body bgcolor="#FFFF00" link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF"><!-- Navigation Menu Start --><div id="divMainMenu" style="background-color:green;"><a href="JavaScript:expandItem(itemIds[0]);">Search</a> -<a href="JavaScript:expandItem(itemIds[1]);">Other thing</a> -<a href="JavaScript:expandItem(itemIds[2]);">Last thing</a> -<a href="JavaScript:resetAllItems();">Collapse all</a></div><!-- Navigation Menu End --><p> </p><div id="divSearchForm" style="display:none;">Your search form here</div><div id="divOtherThing" style="display:none;">Some other thing here</div><div id="divLastDropDw" style="display:none;">I dunno, getting bored now</div></body></html>

Dont forget to populate all "subitems" in the array itemIds.Tried and tested, don't know if it is cross-browser compatible, works in IE 4.0+Hope this helps, don't know if it is what you were looking for. :)Email me for the file I saved it as when I was testing it.

Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...