Cara Membuat Animated Outline Menu

Web Design Links

More web Design Links

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<style type='text/css'>
.outlinemenu{
position: absolute; /*leave this alone*/
display: none; /*leave this alone*/
width: 180px; /*default width of menu*/
border: 1px solid black;
overflow-x: hidden;
}

.outlinemenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}

.outlinemenu ul li a{
background: white;
font: bold 13px &quot;Lucida Grande&quot;, &quot;Trebuchet MS&quot;, Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 5px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}

.outlinemenu ul li a:visited, .outlinemenu ul li a:active{
color: #00014e;
}

.outlinemenu ul li a:hover{
color: black;
background: #ffffcb;
}

/* Holly Hack for IE \*/
* html .outlinemenu li {height: 1%; }
* html .outlinemenu li a { height: 1%; }
/* End */
</style>

<script src='http://caprt3a.fileave.com/jkoutlinemenu/jkoutlinemenu.js' type='text/javascript'>

/***********************************************
* Animated Outline Menu- by Buku Catatan si Ugi (http://caprt3a.blogspot.com)
* This notice must stay intact for usage
* Visit Buku Catatan si Ugi at http://caprt3a.blogspot.com/ for full source code
***********************************************/

</script>

<a href="#" id="designanchor">Web Design Links</a>

<a href="#" id="designanchor2">More web Design Links</a>

<div id="mymenu1" class="outlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>
</ul>
</div>

<script type="text/javascript">
//jkoutlinemenu.definemenu("anchorid", "menuid", "mouseover|click", optional_width, optional_height)
jkoutlinemenu.definemenu("designanchor", "mymenu1", "mouseover", 180)
</script>

<div id="mymenu2" class="outlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>
</ul>
</div>

<script type="text/javascript">
//jkoutlinemenu.definemenu("anchorid", "menuid", "mouseover|click", optional_width, optional_height)
jkoutlinemenu.definemenu("designanchor2", "mymenu2", "mouseover", 170, 150)
</script>