HTML5 Tutorial 5: How to make a Drop Down Menu or SubMenu's
Ok this is requested by alot of Andromo Developers , so lets do it. I suggest if you haven't already to do tutorials 1-4 before taking on this one. I will take baby steps to make sure you understand it. Ok open your text editor and type in the basic template.
<!DOCTYPEhtml>
<head>
</head>
<body>
</body>
</html>
Ok save as Submenu.html
Now go ahead and type in this code all of it is in the body. Type slowly so that
you don't get any error's trust me its alot. Afterward I will explain the code.
<!DOCTYPEhtml>
<head>
</head>
<body>
<form>
<p align="center"><b>Select A Page</b>
<select id="setit" >
<option value="">Select One</option>
<option value="http://androidfreegamesapps.forumotion.com/">Andriod forum</option>
<option value="https://www.facebook.com/groups/152169141638746/">Android Facebook Group</option>
<option value="http://forums.andromo.com/discussions">Andromo Forum Webpage</option>
<input type="button" value="Go" onclick="window.open(setit.options[setit.selectedIndex].value)">
</p></form>
</body>
</html>
Now on to explaining the code
<form> </form> The form tag lets HTML know to enclose the code and its elements inside so its not
all of the page.
<p align="center"><b>Select A page</b> This tells the HTML that the words select a page will be aligned to the center of
the page and all the elements will be centered inside the form.
<select id="setit" > Select is the starting command for the drop down menu. The id="setit" is needed so that when we add
some javascript towards the end this is what the javascript is pointed to. <form> and <select> is html code, but at the end will be javascript
and this will connect the 2.
<option value="">Select One</option> Option value means the selection your going to make for the user. Now the
first option is usually not selectable so you just put Select One so it shows onscreen this is where the user will click.
The next 3 <option value="www.website.com"> is the website you point to now the >words go here< Words you want
to display will go here. And then you close it with </option> tag.
Now for the glue that brings it all together.
<input type="button" ---- means make a button
value="go" ---- is the words on the button
onclick="window.open[setit.selectedIndex].value)" > this is the glue to it all. Onclick means the button is clickable by the user.
"window.open ----- means open the browser window
(setit.options[setit.selectedIndex].value) --- ok remember the id="setit" ok we use that to connect the button you press to match the command
that you selected in the dropdown menu.
This is alot to take in , it took me 4-5 times before I understood all of it. Here you can download the demo of it
http://sourceforge.net/projects/pfbw/files/DropDownMenu.html/download
Also if you have any questions on how to use this for other stuff just ask. Cool now we have drop down menu's in Andromo.
I will talk to the staff to see if we can work to make this an activity thats easier to use. But lately Google and the other marketplaces
have been releasing so many updates and rule changes it ridiculous.
<!DOCTYPEhtml>
<head>
</head>
<body>
</body>
</html>
Ok save as Submenu.html
Now go ahead and type in this code all of it is in the body. Type slowly so that
you don't get any error's trust me its alot. Afterward I will explain the code.
<!DOCTYPEhtml>
<head>
</head>
<body>
<form>
<p align="center"><b>Select A Page</b>
<select id="setit" >
<option value="">Select One</option>
<option value="http://androidfreegamesapps.forumotion.com/">Andriod forum</option>
<option value="https://www.facebook.com/groups/152169141638746/">Android Facebook Group</option>
<option value="http://forums.andromo.com/discussions">Andromo Forum Webpage</option>
<input type="button" value="Go" onclick="window.open(setit.options[setit.selectedIndex].value)">
</p></form>
</body>
</html>
Now on to explaining the code
<form> </form> The form tag lets HTML know to enclose the code and its elements inside so its not
all of the page.
<p align="center"><b>Select A page</b> This tells the HTML that the words select a page will be aligned to the center of
the page and all the elements will be centered inside the form.
<select id="setit" > Select is the starting command for the drop down menu. The id="setit" is needed so that when we add
some javascript towards the end this is what the javascript is pointed to. <form> and <select> is html code, but at the end will be javascript
and this will connect the 2.
<option value="">Select One</option> Option value means the selection your going to make for the user. Now the
first option is usually not selectable so you just put Select One so it shows onscreen this is where the user will click.
The next 3 <option value="www.website.com"> is the website you point to now the >words go here< Words you want
to display will go here. And then you close it with </option> tag.
Now for the glue that brings it all together.
<input type="button" ---- means make a button
value="go" ---- is the words on the button
onclick="window.open[setit.selectedIndex].value)" > this is the glue to it all. Onclick means the button is clickable by the user.
"window.open ----- means open the browser window
(setit.options[setit.selectedIndex].value) --- ok remember the id="setit" ok we use that to connect the button you press to match the command
that you selected in the dropdown menu.
This is alot to take in , it took me 4-5 times before I understood all of it. Here you can download the demo of it
http://sourceforge.net/projects/pfbw/files/DropDownMenu.html/download
Also if you have any questions on how to use this for other stuff just ask. Cool now we have drop down menu's in Andromo.
I will talk to the staff to see if we can work to make this an activity thats easier to use. But lately Google and the other marketplaces
have been releasing so many updates and rule changes it ridiculous.
Tagged:
Comments