Tuesday, July 30, 2013

HTML: Tutorial 8 Drop down menu's

Ok you ready to type , cause this is where it gets a little deep. Don't worry though with me as your guide you will do just fine. Drop down menu's are another cool aspect of websites and blogs. It makes your site more fun and interactive. Drop down menu's save space and make the user have a great experience because they have visual feedback instead of just reading text and filling out forms. Ok lets dive into it !! Set up your basic code 1st...
<html>
<body>

</html>
</html>

Now to make drop down menu's you will be using the <forms> tag and also a new tag called <select name=" "> which means you will be selecting a name from the menu your about to make. Now <option value="android">  means this is one of the drop down menu options and >android<  after that part is what will be displayed on the screen. Ok now type out this code

<html>
<body>



<form action="">
<select name="phones">
<option value="android">android</option>
<option value="iphone">iphone</option>
<option value="windowsphone">windowsphone</option>
<option value="blackberry">blackberry</option>
</select>
</form>

</body>
</html>

Now save it as dropmenu.html and double click on the file, it should look like this after you click on the menu












Alright!! Now with this drop down menu go ahead and really play around with making your own drop down menu. I want you guys to get really comfortable with the code. I know this is alot but its also pretty cool.  Also if you haven't already subscribe so you can get each tutorial as it comes. Alright when your ready head over to the next topic!!  Drop down menu's with links yes I am so excited !!  Click here for tutorial 9


No comments:

Post a Comment