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

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

Ο HTML κώδικας είναι μια απλή λίστα μέσα σε ένα div.

<div id="menu">
   <ul>
	<li><a href="http://www.ituts.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 και αφήστε τα σχόλιά σας.

Ευχαριστώ.

Demo

Shortlink URL:

Δημήτρης Α.

Tagged as:drop-down menu mootools μενου

Κατηγορία: Featured Web Design

[!] Αναφέρετε αυτό το άρθρο

Γίνετε επεξεργασία, Παρακαλώ περιμένετε...

+ 63.3

Ο Συγγραφέας

Σπούδασε Τεχνικός Δικτύων στο IT Step, στο Donentsk της Ουκρανίας. Δουλεύει ως προγραμματιστής στην Livevol Inc. Ασχολείται με τους υπολογιστές, το ίντερνετ, με την τεχνολογία και τον προγραμματισμό, και φυσικά το gaming! Λατρεύει το Wordpress και το Centos. Ακούει Hip-Hop και λατρεύει τα strategy games.

2 Σχολια

George says:

October 22, 2011 at 11:46 am

Αν ανάφερες πιο αναλυτικά που θα τοποθετησουμε τον καθε καωδικο θα ηταν τελειο το αρθρο….

Log in to Reply
Δημήτρης Α. says:

October 22, 2011 at 12:03 pm

Το css το βάζεις ανάμεσα σε
```
<style type="text/css"></style>
```
στο head. To HTML εκεί που είναι το menu. Το javascript ανάμεσα σε
```
<script type="text/javascript"></script>
```
στο footer.

Αν αυτό εννοείς βεβαία γιατί δεν είμαι σίγουρος.

Log in to Reply