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

0




Βάλτε αυτό το υπέροχο πλευρικό μενού στο 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>

Δημοσίευση σχολίου

0 Σχόλια
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Δημοσίευση σχολίου (0)
To Top