Friday, April 11, 2008

Quick Menu with CSS

1. Letakkan CSS dibawah ini diantara tag <HEAD>

<!--%%%%%%%%%%%% QuickMenu Styles [Keep in head for full validation!] %%%%%%%%%%%-->

<style type="text/css">

/*!!!!!!!!!!! QuickMenu 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 .qmcbox{cursor:default;display:block;position:relative;z-index:1;}.qmmc .qmcbox a{display:inline;}.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}.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 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}

/*!!!!!!!!!!! QuickMenu Styles !!!!!!!!!!!*/

/* QuickMenu 0 */

/*"""""""" (MAIN) Container""""""""*/

#qm0
{
width:auto;
padding:5px 10px 5px 10px;
background-color:#EFEFEF;
border-width:10px 1px 1px 1px;
border-style:solid;
border-color:#4D4D4D;
}

/*"""""""" (MAIN) Items""""""""*/

#qm0 a
{
padding:3px 40px 3px 8px;
color:#222222;
font-family:Arial;
font-size:12px;
text-decoration:none;
border-width:1px;
border-style:dashed;
border-color:#EFEFEF;
}

/*"""""""" (MAIN) Hover State""""""""*/

#qm0 a:hover
{
text-decoration:underline;
}

/*"""""""" (MAIN) Hover State - (duplicated for pure CSS)""""""""*/
#qm0 li:hover>a
{
text-decoration:underline;
}

/*"""""""" (MAIN) Active State""""""""*/

body #qm0 .qmactive, body #qm0 .qmactive:hover
{
background-color:#4D4D4D;
color:#EFEFEF;
text-decoration:underline;
}

/*"""""""" (SUB) Container""""""""*/

#qm0 div, #qm0 ul
{
padding:10px;
margin:-1px 0px 0px 0px;
background-color:#EFEFEF;
border-width:1px;
border-style:solid;
border-color:#4D4D4D;
}

/*"""""""" (SUB) Items""""""""*/

#qm0 div a, #qm0 ul a
{
padding:1px 40px 2px 5px;
font-size:11px;
border-width:1px 0px 1px 0px;
border-style:dashed;
border-color:#EFEFEF;
}

/*"""""""" Individual Titles""""""""*/

#qm0 .qmtitle
{
margin:2px 5px 5px 5px;
color:#222222;
font-family:Arial;
font-size:11px;
font-weight:bold;
}

/*"""""""" Individual Horizontal Dividers""""""""*/

#qm0 .qmdividerx
{
border-top-width:1px;
margin:4px 5px 4px 5px;
border-color:#999999;
}

/*"""""""" Custom Rule""""""""*/

ul#qm0 ul .qmparent
{
background-image:url(qmimages/arrow_5.gif);
}

/*"""""""" Custom Rule""""""""*/

ul#qm0 .qmparent
{
background-image:url(qmimages/arrow_7.gif);
background-repeat:no-repeat;
background-position:95% 55%;
}

/*"""""""" Custom Rule""""""""*/

ul#qm0 li:hover > a.qmparent
{
background-color:#4D4D4D;
color:#EFEFEF;
}

</style>

2. Letakkan code dibawah ini diantara tag <HEAD>

<ul id="qm0" class="qmmc">
<li><a class="qmparent" href="javascript:void(0)">Solutions</a>
<ul>
<li><span class="qmtitle" >Industries</span></li>
<li><a href="javascript:void(0)">Education</a></li>
<li><a class="qmparent" href="javascript:void(0)">Financial Services &nbsp; &nbsp; =></a>
<ul>
<li><a href="javascript:void(0)">Government</a></li>
<li><a href="javascript:void(0)">Manufacturing</a></li>
<li><a href="javascript:void(0)">Locations</a></li>
<li><a href="javascript:void(0)">Tech. Lending</a></li>
</ul></li>
<li><a href="javascript:void(0)">Government</a></li>
<li><a href="javascript:void(0)">Manufacturing</a></li>
<li><a href="javascript:void(0)">Telecom Services</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><span class="qmtitle" >Solutions</span></li>
<li><a href="javascript:void(0)">Digital Imaging</a></li>
<li><a href="javascript:void(0);">Mobil</a></li>
<li><a href="javascript:void(0);">Print Publishing</a></li>
<li><a href="javascript:void(0);">Rich Internet Applications</a></li>
<li><a href="javascript:void(0);">Training and eLearning</a></li>
<li><a href="javascript:void(0);">Video and Audio</a></li>
<li><a href="javascript:void(0);">Web Conferencing</a></li>
<li><a href="javascript:void(0);">Web Publishing</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0);">All Industries and Solutions</a></li>
</ul></li>
<li><a class="qmparent" href="javascript:void(0)">Products</a>
<ul>
<li><a href="javascript:void(0)">Acrobat Connect</a></li>
<li><a href="javascript:void(0)">Acrobat Family</a></li>
<li><a href="javascript:void(0)">After Effects</a></li>
<li><a href="javascript:void(0)">Cold Fusion</a></li>
<li><a href="javascript:void(0)">Creative Suite Family</a></li>
<li><a href="javascript:void(0)">Dreamweaver</a></li>
<li><a href="javascript:void(0);">Flash</a></li>
<li><a href="javascript:void(0);">Flex</a></li>
<li><a href="javascript:void(0);">Illustrator</a></li>
<li><a href="javascript:void(0);">LiveCycle Enterprise Suite</a></li>
<li><a href="javascript:void(0);">Mobile Products</a></li>
<li><a href="javascript:void(0);">Photoshop Family</a></li>
<li><a href="javascript:void(0);">Premiere</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0);">All Products</a></li>
</ul></li>
<li><a class="qmparent" href="javascript:void(0)">Support</a>
<ul>
<li><a href="javascript:void(0)">Support Home</a></li>
<li><a href="javascript:void(0)">Customer Service</a></li>
<li><a href="javascript:void(0)">Knowledge Base</a></li>
<li><a href="javascript:void(0)">Books</a></li>
<li><a href="javascript:void(0)">Training and Certification</a></li>
<li><a href="javascript:void(0)">Support Programs</a></li>
<li><a href="javascript:void(0);">Forums</a></li>
<li><a href="javascript:void(0);">Documentation</a></li>
<li><a href="javascript:void(0);">Updates</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0);">More</a></li>
</ul></li>
<li><a class="qmparent" href="javascript:void(0)">Communities</a>
<ul>
<li><span class="qmtitle" >By User</span></li>
<li><a href="javascript:void(0)">Graphic Designers</a></li>
<li><a href="javascript:void(0)">Web Developers</a></li>
<li><a href="javascript:void(0)">Educators</a></li>
<li><a href="javascript:void(0)">Partners</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><span class="qmtitle" >By Resource</span></li>
<li><a href="javascript:void(0)">Adobe Labs</a></li>
<li><a href="javascript:void(0)">Technical Forums</a></li>
<li><a href="javascript:void(0);">Idea Exchange</a></li>
<li><a href="javascript:void(0);">Blogs</a></li>
</ul></li>
<li><a class="qmparent" href="javascript:void(0);">Company</a>
<ul>
<li><a href="javascript:void(0);">About Adobe</a></li>
<li><a href="javascript:void(0);">Press</a></li>
<li><a href="javascript:void(0);">Investor Relations</a></li>
<li><a href="javascript:void(0);">Corporate Affairs</a></li>
<li><a href="javascript:void(0);">Jobs</a></li>
<li><a href="javascript:void(0);">Showcase</a></li>
<li><a href="javascript:void(0);">Events</a></li>
<li><a href="javascript:void(0);">Contact Adobe</a></li>
<li><a href="javascript:void(0);">Become an Affiliate</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0);">More</a></li>
</ul></li>
<li class="qmclear">&nbsp;</li></ul>
<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click ('all', 'main' or 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,false,0,500,false,false,false,false,false);</script>



----- Selamat Mencoba -----

No comments: