Guest JPBlobby Posted September 29, 2005 Share Posted September 29, 2005 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 comment Share on other sites More sharing options...
Guest grk_w3 Posted October 1, 2005 Share Posted October 1, 2005 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.<{POST_SNAPBACK}> is this not possible thru <a href> 's Link to comment Share on other sites More sharing options...
Jack McKalling Posted October 2, 2005 Share Posted October 2, 2005 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 comment Share on other sites More sharing options...
actionsketch Posted October 4, 2005 Share Posted October 4, 2005 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 comment Share on other sites More sharing options...
Jack McKalling Posted October 4, 2005 Share Posted October 4, 2005 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 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 falseTo 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 comment Share on other sites More sharing options...
aaronjones3593 Posted October 16, 2005 Share Posted October 16, 2005 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now