Hi every body ! meet you again at my new tutorial. Several weeks ago, I'm ever posting about How to make a drop down menu at this post. One of my reader ask to me, it's the question :
Hi Rohman,
Thanx for the piece of code! Now I have a set of drop down menus on my blog. But I have one query... Is there any way I could have them all of the same width? It kinda looks ugly to have different sizes for each drop down menu... Thanx in advance!
Allright, i will give you an example :
Is there looks ugly for you? don't worry, you can make a drop down menu with same width. Only add a little code, your menu will looks with same width. it's the code :
style="width:200px"200px is value of width, you can change this number with other value, maybe 150px, 220px, or other value.
Now, i will give you an example. this is my previous code :
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">
<option> - Blog Tutorial - </option>
<!-- change the links with your own -->
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/strart-to-blogging.html">Start to blogging</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-settings-your-blog.html">Blog setting</option>
</select></form>
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">
<option> - Blogspot Tutorial - </option>
<!-- change the links with your own -->
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/strart-to-blogging.html">Start to blogging</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-settings-your-blog.html">How to seeting </option>
</select></form>
the results :
And this is the code with :
style="width:200px" : <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width:200px">
<option> - Blog Tutorial - </option>
<!-- change the links with your own -->
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/strart-to-blogging.html">Start to blogging</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-settings-your-blog.html">Blog setting</option>
</select></form>
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width:200px">
<option> - Blogspot Tutorial - </option>
<!-- change the links with your own -->
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/strart-to-blogging.html">Start to blogging</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-settings-your-blog.html">How to seeting </option>
</select></form>
the results :
What dou you think about this? looks prety?
Except same width, with style you can manage the other function such as the color of alphabet, background of your menu, and etc.
for example :
style="width:200px;color:#ff0000;background:#B2DDFB"#ff0000, #B2DDFB is the code of color, you can change this code with your color code.
this is the example of drop down menu with color and background color :
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width:200px;color:#ff0000;background:#B2DDFB">
<option> - Blog Tutorial - </option>
<!-- change the links with your own -->
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/strart-to-blogging.html"style="width:200px;color:#ff0000;background:#C3F4BD">Start to blogging</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-settings-your-blog.html"style="width:200px;color:#ff0000;background:#CDDCE7">Blog setting</option>
</select></form>
the results :
Hmmmm.. how do think about this menu?
If you feel enjoy this post please Digg It!
I think enought for today, see you at my next tutorial. Happy blogging.
Post a Comment