Όμορφο κατακόρυφο μενού με χρωματιστό Hover Effect

Βάλτε αυτό το υπέροχο πλευρικό μενού στο blog σας με πολύ απλό τρόπο. Κατά την κίνηση του ποντικιού επάνω του αλλάζει χρώμα το περίγραμμά του.


Δείτε demo

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα. Αντικαταστήστε τα μπλε και τα κόκκινα γράμματα με αυτά της επιλογής σας και πατήστε [Αποθήκευση]. (Δε χρειάζεται να βάλετε τίτλο στο gadget)

<style type="text/css">
#floatMenu {
width:200px;
height:260px;
}
#floatMenu ul {
list-style: none;
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}
</style>
<script language="javascript" src="http://sliding-panel.googlecode.com/svn/jquery_mini.js">
<script language='javascript' src='http://sliding-panel.googlecode.com/svn/jquery.dimensions.js'/>
<script language='javascript'>
 var name = &quot;#floatMenu&quot;;
 var menuYloc = null;
   $(document).ready(function(){
   menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))
   $(window).scroll(function () {
    offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;
    $(name).animate({top:offset},{duration:500,queue:false});
   });
  });
  </script>
<a href="http://tetsitech.blogspot.com" style="position: absolute;z-index:-11;">
<div id="floatMenu">
<ul class="menu1">
<li><a href="menuURL" onclick="return false;"> menuNAME </a></li>
</ul>
<ul class="menu2">
<li><a href="menuURL" onclick="return false;"> menuNAME </a></li>
<li><a href="menuURL" onclick="return false;"> menuNAME </a></li>
<li><a href="menuURL" onclick="return false;"> menuNAME </a></li>
</ul>
<ul class="menu3">
<li><a href="menuURL" onclick="return false;"> menuNAME </a></li>
</ul>
</div>

Όπου menuNAME βάλτε τους τίτλους των μενού που θέλετε και menuURL τις αντίστοιχες διευθύνσεις.
Προσθέτοντας τον παρακάτω κώδικα μπορείτε να αυξήσετε τα μενού σας.

<li><a href="menuURL" onclick="return false;"> menuNAME </a></li>