Όμορφο Drop-Down Μενού Με Mootools




Σε αυτό το άρθρο θα δείτε πως να φτιάξετε ένα ωραίο drop-down μενού με την χρήση της βιβλιοθήκης Mootools, απλής HTML και css.
Ο HTML κώδικας είναι μια απλή λίστα μέσα σε ένα div.

<div id="menu">   <ul> <li><a href="http://www.foulscode.blogspot.gr" title="">Home</a></li> <li><a href="" title="">About</a></li> <li><a href="" title="">Portfolio</a></li> <li><a href="" title="">Contact</a></li>   </ul></div>


Το CSS του μενού. Position absolute για να μην υπάρχει πρόβλημα κατά το animation. Και μερικά ακόμα πραγματάκια για ομορφιά.


#menu{
  position:relative;
  height:30px;
  background:#F04F31;
  border-bottom:solid 3px #000;
  margin-bottom:10px
  z-index:100;
}
#menu ul{
  position:absolute;left:0;top:0
  list-style:none;
  font-size:0.85em;
}
#menu li{
  float:left
}
#menu li a{
  display:block;
  float:left;
  height:30px;
  line-height:30px;
  padding:0 20px;
  background:#F04F31;
  color:#fff
  text-decoration:none;
}




Τώρα ας κάνουμε το εφέ.
Στο head προσθέτουμε την βιβλιοθήκη

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>


Και ορίστε ο κώδικας του εφέ

<script type="text/javascript">
window.addEvent('domready', function(){
  $$('#menu a').each(function(el) {  
    var fx = new Fx.Morph(el,{duration:700,transition:Fx.Transitions.Bounce.easeOut,link:'cancel'});
    el.addEvents({
      'mouseenter': function() {fx.start({'padding-top':30, 'background-color':'#000'});},
      'mouseleave': function() {fx.start({'padding-top':0, 'background-color':'#F04F31'});}
    });
  });  
});
</script> 


Αν δεν σας αρέσει το animation μπορείτε να δοκιμάσετε άλλα αλλάζοντας την επιλογή transition.
Αυτό ήταν, τόσο απλό :)
Αν σας άρεσε το άρθρο κάντε το tweet/like/+1 και αφήστε τα σχόλιά σας.
Ευχαριστώ.



Κατηγορίες:
Σχόλια