How to Create Drop down Menu List

Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda?

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding

2. Tidak Tahu Computer Programming

3. Tidak Paham Bahasa Pemrograman Android

4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...

Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan

2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan

3. Susun blok-blok kode programnya, dan

4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?

Mudah kok, karena sudah hadir untuk Anda Di Sini :

"Video Tutorial Android Tanpa Coding untuk Pemula"

Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2.

Drop down menus are useful in many occasions.As a blogger you can create a drop down menu and add it on your blog easily.By including links on to drop down widget,you can increase link juice of your blog and number of page views.This is an additional widget that can be used on both blogs and websites.But it is useful when you want to categorize and concentrate some topics in to one small place.Here in this tutorial i will teach you how to make simple drop down menu and customize it using CSS styling language.

Create simple drop down menu

Making simple drop down menu is quite easy even you're not a web designer.You just need to understand what are the elements,how they work and what are the correct positions that elements and tags must be placed.

Here is the example of a simple drop down list menu.The options have not linked.

<form>
<select style="width: 75%;">
<option title="Title 0 " selected="selected">-Spread out-</option>
<option title="Title 1 "> Name 1</option>
<option title="Title 2 "> Name 2</option>
<option title="Title 3 "> Name 3</option>
<option title="Title 4 "> Name 4</option>
<option title="Title 5 "> Name 5</option>
<option title="Title 6 "> Name 6</option>
</select>
</form>

Replace green color and orange color text with necessary items. You can adjust the width of drop down menu by changing the 75%.

Create simple drop down menu with Hyperlinks

Lets look at how we can add links in to drop down menu.First check out below example.You can see how i linked each options by censoring below piece of code.

<select class="text_noresize" name="select" onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" style="width: 450px;">
<option selected="selected">Choose A Link</option>
<option target="_blank" value="URL link 1 here"> Name 1</option>
<option target="_blank" value="URL link 2 here"> Name 2</option>
<option target="_blank" value="URL link 3 here"> Name 3</option>
<option target="_blank" value="URL link 4 here"> Name 4</option>
<option target="_blank" value="URL link 5 here"> Name 5</option>
<option target="_blank" value="URL link 6 here"> Name 6</option>
</select>

Replace underlined texts with your URLs that want to be opened when anyone select on the option Names.If you don't need web pages/links to open i new tab,remove target="_blank" codes in above block of code.

Styling Drop down menu with CSS

Normal drop down menu is looking like ugly.But we can give the attraction for drop down menu by using styling languages.Now i show you how we can use CSS for customizing the drop down menu.

<select id="select1" name="select" onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true">
<option selected="selected">-Choose A Link-</option>
<option value="URL link 1 here"> Name 1</option>
<option value="URL link 2 here"> Name 2</option>
<option value="URL link 3 here"> Name 3</option>
<option value="URL link 4 here"> Name 4</option>
<option value="URL link 5 here"> Name 5</option>
<option value="URL link 6 here"> Name 6</option>
</select>
<style>
#select1 {
width:80%;
border:2px solid green;
background:red;
}
#select1 option{
width:100%;
background:rgba(250,250,250,0.9);-khtml-opacity:0.9;filter:alpha(opacity=90%);
-moz-opacity:0.9; opacity:0.9;
color:#000;
text-align:center;
}
#select1 option[selected="selected"] {
background:#7CEBEF;
}
</style>

As you see in above example,we can style the drop down menu as want.Purple color codes are CSS codes.I just set the background colors,font colors,opacity and borders of the drop down menu.If you're a web designer you can create attractive drop down menus using styling languages.

Make a Difference drop down menu

<select autofocus="autofocus" id="select2" name="select" onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" size="3">
<option selected="selected">Choose A Link</option>
<option value="URL link 1 here"> Name 1</option>
<option value="URL link 2 here"> Name 2</option>
<option value="URL link 3 here"> Name 3</option>
<option value="URL link 4 here"> Name 4</option>
<option value="URL link 5 here"> Name 5</option>
<option value="URL link 6 here"> Name 6</option>
<option value="URL link 7 here"> Name 7</option>
<option value="URL link 8 here"> Name 8</option>
<option value="URL link 9 here"> Name 9</option>
<option value="URL link 10 here"> Name 10</option>
<option value="URL link 11 here"> Name 11</option>
<option value="URL link 12 here"> Name 12</option>
</select>
<style>
#select2 {
width:98%;
height:45%;
border:2px solid green;
background:red;
box-shadow:0px 0px 10px 10px #ccc;
}
#select2 option{
width:100%;
background:rgba(250,250,250,0.9);
-moz-opacity:0.9;
-khtml-opacity:0.9;
filter:alpha(opacity="90%");
opacity:0.9;
border-bottom:1px solid green;
text-align:center;
}
#select2 option:hover {
background:red;
color:green;
}
#select2 option[selected="selected"] {
background:#564185;
}
</style>

Here i used another available attributes on <select> element. When using autofocus="autofocus" attribute, Drop down menu will be focused automatically at the time where page is loading.So selected option will be focused first.I set the options to be displayed on the drop down menu by using size attribute.

There are many available attributes out there.You can use them and create attractive drop down menus.Before this tutorial i posted some tutorials on drop down menus like,

How to create drop down Label widget in blogger

You can use the knowledge you got from here and customize the drop down menus in above posts.

I think that this post was helpful for you.If you want any help,ask me anything below commenting.Stay connected with me for next post series.Subscribe now for getting updates on this blog pronto in to your mailbox.Do share this Creating Drop down menu widget tutorial among your friends.

Already Did you create your own Drop down menu ? Share your experience with us...

Image credit:- www.clker.com

Pengelola Blog : ABDUL WAHAB

Judul : How to Create Drop down Menu List
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang How to Create Drop down Menu List
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
http://kejutaninternet.blogspot.com/2013/07/how-to-create-drop-down-menu-list.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.

Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.