Imenu v2 + SearchForm with CSS3

Tulisan ini akan membahas penggabunagn imenu dropdownmenu v2 dengan SearchForm with css3

It is every man's obligation to put back into the world at least the equivalent of what he takes out of it. Albert Einstein

Tulisan ini akan membahas penggabunagn imenu dropdownmenu v2 dengan SearchForm with css3

Last Modif at July 8th, 2011

beberapa hari saya membahas tentang IMENU dan ‘searchform with css3′ nah, bagaimana jika kita gabung kedua widget itu?

tampilan Searchform seperti ini



sedangkan, tampilan imenu seperti ini



dan jika digabung hasilnya seperti ini



Ok, saya kasih source codenya aja yah, silakan disave as dengan doc tipe .html atau .htm

berikut source code imenu v2 + searchform with css3


<style type='text/css'>
<!--
/*
ini adalah cssnya, silakan tambahkan ke-atas tag </head>
*/
.clear{clear:both}
#id-imenu-dropdown-searchform-css3{
position:relative;
z-index:9999;
min-width:940px;
width:100%;
margin: 0 auto;
min-height: 40px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
/* general setting */
.imenu-dropdown-menu-v2{
float:left;
list-style:none;
padding:0 0 0 20px!important;
margin:0!important;
max-width:65%;
}
.imenu-dropdown-menu-v2 li{
list-style:none;
float:left;
margin:0!important;
padding:0!important;
}
.imenu-dropdown-menu-v2 li a{
text-decoration:none;
display:block;
text-transform:capitalize;
}
.imenu-dropdown-menu-v2 li a:link,
.imenu-dropdown-menu-v2 li a:visited{
min-width:80px;
text-align:center;
font-size:14px;
font-family:Arial, helvetica, sans-serif;
padding:8px 2px 10px 2px;
margin:4px 0 0 2px;
}
.imenu-dropdown-menu-v2 #actived{
-moz-border-radius:3px 3px 1px 1px;
-webkit-border-radius:3px 3px 1px 1px;
border-radius:3px 3px 1px 1px;
}
.imenu-dropdown-menu-v2 li a:hover,
.imenu-dropdown-menu-v2 li a:active{
-moz-border-radius:3px 3px 1px 1px;
-webkit-border-radius:3px 3px 1px 1px;
border-radius:3px 3px 1px 1px;
}
/* .imenu-dropdown-menu-v2 li li a[href='#']:after{
content:">>";
font-weight:bold;
} */
.imenu-dropdown-menu-v2 li li a:link,
.imenu-dropdown-menu-v2 li li a:visited{
width:191px;
margin:0;
padding:5px 0 5px 8px;
text-align:left;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.imenu-dropdown-menu-v2 ul{
width:200px;
position:absolute;
padding:0;
margin:0 0 0 2px;
padding: 5px 0;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.imenu-dropdown-menu-v2 ul ul,
.imenu-dropdown-menu-v2 ul ul ul,
.imenu-dropdown-menu-v2 ul ul ul ul,
.imenu-dropdown-menu-v2 ul ul ul ul ul{
margin:-40px 0 0 130px;
padding:5px 0;
}
.imenu-dropdown-menu-v2 li:hover ul,
.imenu-dropdown-menu-v2 li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li ul li ul li:hover ul
{display:block;}
.imenu-dropdown-menu-v2 ul,
.imenu-dropdown-menu-v2 ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul li ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul li ul li ul
{display:none;}
/* end general setting */
/* set color */
#id-imenu-dropdown-searchform-css3{
background:#d3d3d3;
border:1px solid #c9cacb;
background:-moz-linear-gradient(
top,
#ffffff 0%,
#edeeee 4%,
#b6b9bd 100%);
background:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #ffffff),
color-stop(4%, #edeeee),
color-stop(100%, #b6b9bd)
);
}
.imenu-dropdown-menu-v2 li a:link,
.imenu-dropdown-menu-v2 li a:visited{
color:#555555;
}
.imenu-dropdown-menu-v2 #actived,
.imenu-dropdown-menu-v2 li a:hover,
.imenu-dropdown-menu-v2 li a:active{
background:#ffffff;
-moz-box-shadow:
inset -1px -1px 2px #999999,
inset 1px 1px 2px #999999;
box-shadow:
inset -1px -1px 2px #999999,
inset 1px 1px 2px #999999;
-webkit-box-shadow:
inset -1px -1px 2px #999999,
inset 1px 1px 2px #999999;
}
.imenu-dropdown-menu-v2 li li a:link,
.imenu-dropdown-menu-v2 li li a:visited{
color:#555555;
border-bottom:1px solid #ddd;
}
.imenu-dropdown-menu-v2 li li a:hover,
.imenu-dropdown-menu-v2 li li a:active{
background: #f5f5f5;
color:#777777;
}
.imenu-dropdown-menu-v2 ul{
background: #d3d4d3;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #aaaaaa;
}
/* end set color */
/* searchform */
/*
* css setting general
* silakan tambahkan css ini kaatas tag </head>
*/
#ifind-css3-searchform{
float:right;
max-width:33%;
min-width:300px;
margin:3px 3px 0 0;
}
.ifind label{
display:none;
}
.ifind input:focus{
outline:none;
}
.ifind form, .ifind input{
margin:0;
padding:0;
border:none;
background:transparent;
display:block;
}
.ifind{
clear:both;
margin:0 auto;
}
.ifind form{
width:100%;
float:right;
padding:0;
margin:0;
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
}
.ifind input[type=text]{
width:82%;
float:left;
margin:0 3px 0 0;
font:italic normal 17px arial, helvetica;
padding:6px 4px 7px 4px;
}
.ifind input[type=text]:focus{
background:none;
}
.ifind input[type=submit]{
width:23px;
height:23px;
font-size:0px;
cursor:pointer;
float:right;
margin:2px -7px 0 0;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
.ifind input[type=reset]{
cursor:none;
padding:0;
float:right;
width:15px;
height:6px;
font-size:0px;
margin:23px 7px 0 0;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:0 2px 2px 0px;
-moz-border-radius:0 2px 2px 0px;
-webkit-border-radius:0 2px 2px 0px;
}
/* end css setting general*/
/* css setting color */
#ifind-css3-searchform .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #aaaaaa,
inset -1px 1px 2px #777777;
-moz-box-shadow:
inset 1px -1px 2px #aaaaaa,
inset -1px 1px 2px #777777;
-webkit-box-shadow:
inset 1px -1px 2px #aaaaaa,
inset -1px 1px 2px #aaaaaa;
}
#ifind-css3-searchform .ifind input[type=text]{
border-right:2px solid #cccccc;
color:#cccccc;
}
#ifind-css3-searchform .ifind input[type=text]:focus{
color:#888888!important;
}
#ifind-css3-searchform .ifind input[type=submit]{
color:#ccc;
border:2px solid #cccccc;
background:#ffffff;
}
#ifind-css3-searchform .ifind input[type=submit]:hover{
background:#eee;
}
#ifind-css3-searchform .ifind input[type=reset]{
background:#cccccc;
color:#ffffff;
}
/* end css setting color */
/* end searchform */
-->
</style>
<!--[if IE]>
<style type='text/css'>
/* for IE */
#id-imenu-dropdown{
height: 40px;
}
#id-imenu-dropdown-ie{
position:relative;
z-index:9999;
width:100%;
margin: 0 auto;
height: 40px;
}
#id-imenu-dropdown-ie-bottom{
margin:-41.5px 0 0 0;
height: 40px;
float:left;
width:100%;
}
/* set color */
#id-imenu-dropdown{background:transparent!important;}
#id-imenu-dropdown-ie{filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#edeeee',endColorstr='#b6b9bd',GradientType=0);
border:1px solid #c9cacb;}
/* ie */
</style>
<![endif]-->
<!--[if IE]>
<div id='id-imenu-dropdown-ie'>
</div>
<![endif]-->
<!--[if IE]>
<div id='id-imenu-dropdown-ie-bottom'>
<![endif]-->
<div style='/* ini adalah html-nya, silakan masukan ke element body, atau sesuaikan */' id='id-imenu-dropdown-searchform-css3'>
<ul class='imenu-dropdown-menu-v2'>
<li><a href='http://www.indaam.net' title='Indam site home'>home</a></li>
<li><a href='http://www.indaam.net/about' title='About Indam'>About</a></li>
<li><a href='http://indaam.net/' title=''>Indam On</a>
<ul>
<li><a href='http://facebook.com/indaam' title='Indam On facebook'>Facebook</a></li>
<li><a href='http://twitter.com/indaam' title='Indam On twitter'>Twitter</a></li>
<li><a href='http://intheamwhy.blogspot.com' title='Indam On Blogspot'>Blogspot</a></li>
</ul>
</li>
<li><a href='http://indaam.net' title='archive'>Archives</a>
<ul>
<li><a href="http://www.indaam.net/2011/" title="2011">2011</a>
<ul>
<li><a href="http://www.indaam.net/2011/05/" title="May 2011">May </a></li>
<li><a href="http://www.indaam.net/2011/04/" title="April 2011">April </a></li>
<li><a href="http://www.indaam.net/2011/03/" title="March 2011">March </a></li>
<li><a href="http://www.indaam.net/2011/02/" title="February 2011">February </a></li>
<li><a href="http://www.indaam.net/2011/01/" title="January 2011">January </a></li>
</ul>
</li>
<li><a href="http://www.indaam.net/2010/" title="2010">2010</a>
<ul>
<li><a href="http://www.indaam.net/2010/12/" title="December 2010">December </a></li>
<li><a href="http://www.indaam.net/2010/11/" title="November 2010">November </a></li>
<li><a href="http://www.indaam.net/2010/10/" title="October 2010">October </a></li>
<li><a href="http://www.indaam.net/2010/09/" title="September 2010">September </a></li>
<li><a href="http://www.indaam.net/2010/08/" title="August 2010">August </a></li>
<li><a href="http://www.indaam.net/2010/07/" title="July 2010">July </a></li>
<li><a href="http://www.indaam.net/2010/06/" title="June 2010">June </a></li>
<li><a href="http://www.indaam.net/2010/05/" title="May 2010">May </a></li>
<li><a href="http://www.indaam.net/2010/04/" title="April 2010">April </a></li>
</ul>
</li>
</ul>
</li><!-- widget by http://www.indaam.net please dont remove me, thanks -->
</ul><!-- imenu-dropdown-menu-v2 -->
<div id='ifind-css3-searchform'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .") {this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}' value='search here . . .' type='text'/>
<input class='reset' type='reset'/><input class="submit" value="Go" type="submit"/></div>
</form><!-- widget by http://www.indaam.net please dont remove me, thanks -->
</div><!-- .ifind -->
</div><!-- #css3-ifind -->
<div class='clear'></div>
</div><!-- #id-imenu-dropdown -->
<!--[if IE]>
</div>
<![endif]-->

sedangkan untuk proses pemasangan di blogspot dan wordpress, silakan baca ini

Jika ada yang ingin ditanyakan silakan tinggalkan komentar

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-