Ever wonder how to create a simple drop-down menu, and make the selections clickable?

In other words:
  • A user clicks on the down arrow, from your drop-down menu, and makes their selection.
  • Then they click on GO, and they are navigated to the link.
  • This is a great way to add a simple menu for links, on a Ning Network.
Note: See our 'International Networks' drop-down in right column, for example.

I can only show you the example code. You can substitute my titles and links, and make your own. One mistake will make it not work. Just start over, and try to be patient. You can do this.

IMPORTANT: I noticed in a Ning Text Box, I accidentally had a line feed (return) in the middle of the input style. Although it worked fine in a Browser, it returned an error on Ning. Make sure you have no extra line feeds, where they really don't need to be. Also, edit your code in a Text Editor, or our WYSIWYG HTML Editor (using the HTML button). You must use the HTML button, to access the raw code.

<form>
<p style="font-size:12px; font-family: Rockwell,Georgia; font-weight:bold;">International Networks:<br><select id="setit" style="width:150px; font-size:12px;" size="1" name="International Groups for Ning Networks">
<option value="">Select Country</option>
<option value="http://theningdirectory.ning.com/group/ArgentinaEspanolNingNetworks">Argentina</option>
<option value="http://theningdirectory.ning.com/group/botswanasetswananingnetworks">Botswana</option>
<option value="http://theningdirectory.ning.com/group/BrazilPortugueseNingNetworks">Brazil</option>
<option value="http://theningdirectory.ning.com/group/CanadaEnglishFrenchNingNetworks">Canada</option>
<option value="http://theningdirectory.ning.com/group/FinlandFinnishSwedishNingNetworks">Finland</option>
<option value="http://theningdirectory.ning.com/group/HungaryHungarianNingNetworks">Hungary</option>
<option value="http://theningdirectory.ning.com/group/IndonesiaBahasaIndonesiaNingNetworks">Indonesia</option>
<option value="http://theningdirectory.ning.com/group/IrelandEnglishNingNetworks">Ireland</option>
<option value="http://theningdirectory.ning.com/group/ItalyItalianNingNetworks">Italy</option>
<option value="http://theningdirectory.ning.com/group/PhilippinesTagalogNingNetworks">Philippines</option>
<option value="http://theningdirectory.ning.com/group/SerbiaSerbianNingNetworks">Serbia</option>
</select><br>
<input style="font-family:Verdana; font-size:11px; width:150px;" type="submit" value="Find International Nings" class="button" onclick="window.open(setit.options[setit.selectedIndex].value)">
</p></form>

I don't think this tip has been added, yet. If it has, this can serve as another example. ;-)

Typically the Button Value on a drop-down of the type, will say "GO", "FIND", "FETCH" or something similar. Just replace the code for: value="Find International Nings", to value="Go" or whatever word you want to use.

Views: 496

Attachments:

Replies to This Discussion

nice!!! thnks for the tip
thank you.
Thanks for sharing Jen.
I use this to display members by country.
great tip I display all the sites I am a member with
Great tip - thanks ;)
Is possibility to not view Argentina, Botswana ... but pictures ???
On this one, since it's a drop down, images wouldn't work very well.
Best,
Jen
Hi I created this menu for tag - and i don't want to open in new window. How to do that?
I cannot get this type form using window.open, to open in the same window. I've been researching for quite some time. Here's an example of what I searched for via Google:
http://www.devguru.com/Technologies/ecmaScript/quickref/win_open.html

I tried the following code, thinking it would work, but it will not work:
onclick="window.open(setit.options[setit.selectedIndex].value,'win1','target=_top')"

I can't remember, but think this has something to do with the window.open and how it's supposed to work - - like a pop-up.

Bottom line: I need to post a new type form for a drop down menu. I will do this, as soon as time allows.

Best Regards,
Jen
Happy you like it. ;-)

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips