Apapun yang terjadi kepada Anda, akan tetap menjadi sesuatu yang menguatkan Anda, bila Anda tidak mengijinkannya untuk melemahkan Anda.Maka mulailah dari tempat di mana Anda berada, dan mulailah sekarang. Anda sampai, hanya karena Anda berangkat.Dan ingatlah, bahwa Batas waktu itu dibuat bukan karena Anda harus selesai, tetapi karena Anda harus segera memulai. Dan setelah pengertian ini mendapatkan tempat yang kuat di hati Anda, perjelaslah bagi diri Anda sendiri, bahwa Keberhasilan Anda ada pada tempat yang lebih tinggi dari yang sedang Anda kerjakan sekarang. Kemudian, janganlah berlaku seperti orang yang mengeluhkan apa saja yang tidak terlihat di dalam sebuah gambar, Berfokuslah pada yang telah jelas terlihat, karena dari sana lah Anda mencapai tempat-tempat yang belum terlihat bahkan oleh imajinasi Anda. Lalu bekerja keraslah dalam kedamaian bahwa Anda telah melakukan yang benar. Janganlah berupaya menjelaskan mengapa Anda tidak mencapai yang belum Anda capai. Bekerjalah untuk mencapai yang telah jelas bagi Anda. Maka, Mulailah keberhasilan Anda dari mana pun Anda berada.(Mario Teguh)

6 Apr 2009

BUAT DROPDOWN MENU VERTIKAL

Kalau pada postingan sebelumnya kita belajar bagaimana buat fuldown menu atau dropdown menu horizontal dimana sub menunya akan muncul di bawah menu utama, sekrang kita coba buat dalam bentuk vertikal di mana sub menunya akan tampil di sebelahnya (duh maksudnya gimana yah..?) sama ane juga bingun nih, pokoknya liat hasilnya aja ya, saya sudah mencoba cuma saya tidak pasang, soalnya emang udah ada dropdowmn menu horizontal.


Cara mempraktekannya sama aja kaya pembahasan kita kemaren (lihat di sini).

Kalau udah dilihat tinggal praktekan aja.....Oh ya..ini ini dia duo kode (CSS dan HTML) yang mesti kita psoting, yang mana duluan sama aja.

INI HTMLNYA:

<ul id="qm0" class="qmmc">

<li><a class="qmparent" href="javascript:void(0)">JUDUL MENU UTAMA</a>

<ul>
<li><a href="javascript:void(0)">ANAK MENU</a></li>
<li><a href="javascript:void(0)">ANAK JURED...HEHEHE...</a></li>
<li><a href="javascript:void(0)">Fast Running</a></li>
<li><a href="javascript:void(0)">Light Wegith</a></li>
<li><a href="javascript:void(0)">Cusomization</a></li>
<li><a href="javascript:void(0)">Specifications</a></li>
<li><a href="javascript:void(0)">Simple Integration</a></li>
<li><a href="javascript:void(0)">Strict Validation</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Possibilities</a>

<ul>
<li><a href="javascript:void(0)">Database Population</a></li>
<li><a href="javascript:void(0)">Custom Events</a></li>
<li><a href="javascript:void(0)">Custom Classes</a></li>
<li><a href="javascript:void(0)">Multiple Menus</a></li>
<li><a href="javascript:void(0)">Vertical / Horizontal</a></li>
<li><a href="javascript:void(0)">Unlimited Subs</a></li>
<li><a href="javascript:void(0)">Large Structures</a></li>
<li><a href="javascript:void(0)">Ulimited Design Options</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Developers</a>

<ul>
<li><a href="javascript:void(0)">HTML Structure</a></li>
<li><a href="javascript:void(0)">Inline Loading</a></li>
<li><a href="javascript:void(0)">Pure CSS Mains</a></li>
<li><a href="javascript:void(0)">Scalability</a></li>
<li><a href="javascript:void(0)">Strict Validation</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Menu Design</a>

<ul>
<li><a href="javascript:void(0)">CSS Based</a></li>
<li><a href="javascript:void(0)">Simple Structure</a></li>
<li><a href="javascript:void(0)">Fast Running</a></li>
<li><a href="javascript:void(0)">Light Weight</a></li>
<li><a href="javascript:void(0)">Customization</a></li>
<li><a href="javascript:void(0)">Specifications</a></li>
<li><a href="javascript:void(0)">Simple Integration</a></li>
<li><a href="javascript:void(0)">Strict Validation</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Page Integration</a>

<ul>
<li><a href="javascript:void(0)">HTML Structure</a></li>
<li><a href="javascript:void(0)">Inline Loading</a></li>
<li><a href="javascript:void(0)">Pure CSS Mains</a></li>
<li><a href="javascript:void(0)">Scalability</a></li>
<li><a href="javascript:void(0)">Strict Validation</a></li>
</ul></li>

<li class="qmclear">&nbsp;</li></ul>

<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click ('all' or 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,true,0,500,false,false,false,false,false);</script>


YANG INI CSSNYA:

<!--%%%%%%%%%%%% MyCSSMenu Styles [Keep in head for full validation!] %%%%%%%%%%%-->
<style type="text/css">


/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 li {float:none;}#qm0 li:hover>ul{top:0px;left:100%;}


/*!!!!!!!!!!! MyCSSMenu Styles !!!!!!!!!!!*/


/* MyCSSMenu 0 */

/*"""""""" (MAIN) Container""""""""*/
#qm0
{
width:125px;
padding:40px 10px 40px 10px;
margin:0px;
background-color:#000000;
background-image:url(images/bg.gif);
border-width:1px;
border-style:solid;
border-color:#000000;
}


/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:3px 20px 3px 3px;
background-color:transparent;
color:#AAAAAA;
font-family:Arial;
font-size:11px;
text-decoration:none;
border-width:0px 0px 1px 0px;
border-style:solid;
border-color:#AAAAAA;
}


/*"""""""" (MAIN) Hover State""""""""*/
#qm0 a:hover
{
color:#FFFFFF;
border-color:#FFCC33;
}


/*"""""""" (MAIN) Active State""""""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
color:#FFFFFF;
border-color:#FFCC33;
}


/*"""""""" (SUB) Container""""""""*/
#qm0 div, #qm0 ul
{
padding:5px;
background-color:#000000;
border-width:1px;
border-style:solid;
border-color:#FFCC33;
}


/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a
{
padding:3px 20px 3px 5px;
color:#CCCCCC;
font-size:11px;
border-width:0px;
border-color:#FFCC33;
}


/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover, #qm0 ul a:hover
{
color:#FFCC33;
text-decoration:underline;
}


/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
color:#FFCC33;
text-decoration:underline;
}


</style>


SEMOGA BERHASIL!

Tidak ada komentar:

Posting Komentar

SOBAT KANG JURED