Μενού με CSS και jQuery
Πλέον οι περισσότερες ιστοσελίδες έχουν εγκαταλήψει το flash και έχουν στραφεί στο Javasxript για την δημιουργία των μενού τους. Στο βοήθημα αυτό θα δούμε πως μπορούμε να δημιουργήσουμε ένα απλό μενού, για την ιστοσελίδα μας, με πολύ όμορφο animation όταν ο χρήστης περνάει τον δείκτη πάνω από το μενού, χρησιμοποιώντας μόνο CSS και jQuery.
Θα υποθέσουμε ότι έχουμε ήδη το αρχείο index.html έτοιμο, και αν δεν το έχουμε θα το δημιουργήσουμε.
Στην αρχή θα χρειαστεί να δημιουργήσουμε το μενού μας. Έτσι ανάμεσα στα tags <body> της ιστοσελίδας μας θα προσθέσουμε τον κώδικα
<div> <ul id="topnav"> <li><a href="#">Κεντρικη</a></li> <li><a href="#">Σχετικα</a></li> <li><a href="#">Υπηρεσιες</a></li> <li><a href="#">Φωτογραφιες</a></li> <li><a href="#">Πελατες</a></li> <li><a href="#">Επικοινωνια</a></li> </ul> </div>
Επίσης πρέπει να δημιουργήσουμε την εικόνα που θα χρησιμοποιηθεί για το animation στο μενού μας. Δημιουργούμε λοιπόν μια εικόνα 1×80, Φροντίζουμε να καλύψουμε τα πρώτα 40 pixels με ένα χρώμα και τα άλλα 40 pixels με άλλο χρώμα. Κάτι σαν την εικόνα που ακολουθεί.
Πλέον έχουμε το μενού μας σε μορφή unordered list και την εικόνα για το μενού μας. Τώρα θα μορφοποιήσουμε λίγο την εμφάνιση και θα προσθέσουμε την εικόνα παρασκηνίου του μενού. Δημιουργούμε το αρχείο style.css στο οποίο γράφουμε τον παρακάτω κώδικα. Έχουμε προσθέσει και κάποια σχόλια για καλύτερη κατανόηση του κώδικα.
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden; /*--Σημαντικό - Απόκρύπτει την εικόνα μας πρίν το hover--*/
float: left;
height:40px;
}
ul#topnav a, ul#topnav span { /*--Tα <a> και <span> έχουν τις ίδιες ιδιότητες--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
background: url(a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 19px;
line-height: 20px; /*--Κάθετη διαμόρφωση του κειμένου--*/
}
ul#topnav a{ /*--Το hover state του μενού μας--*/
color: #555;
background-position: left bottom;
}
ul#topnav span{ /*--Η αρχική κατάσταση του μενού μας--*/
background-position: left top;
}
.container {
height:330px;
left:50%;
margin:-140px 0 0 -450px;
overflow:hidden;
position:absolute;
top:50%;
width:978px;
}Θα συνδέσουμε το αρχείο του στυλ με την ιστοσελίδα μας πρεοσθέτωντας τον παρακάτω κώδικα στο <head> κομμάτι της σελίδας μας
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
Τέλος θα συμπεριλάβουμε την βιβλιοθήκη jQuery και θα προσθέσουμε και το script που θα κάνει όλη την δουλειά. Πρώτα από όλα λοιπόν γράφουμε στο <head> μέρος της σελίδας μας τον εξής κώδικα για να συμπεριλάβουμε την βιβλιοθήκη
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Τελευταίο βήμα είναι να προσθέσουμε τον παρακάτω κώδικα ώστε να δημιουργήσουμε την κίνηση στο μενού όταν ο χρήστης περνάει τον δείκτη πάνω από το μενού μας. Αυτό το κάνουμε γράφοντας τον εξής κώδικα στο <head> μέρος της σελίδας μας. Έχουμε προσθέσει και κάποια σχόλια για καλύτερη κατανόηση του κώδικα.
<script>
$(document).ready(function() {
$("#topnav li").prepend("<span></span>"); //Προσθέτουμε ένα κενό span tag πρίν το a tag
$("#topnav li").each(function() { //Για κάθε list item...
var linkText = $(this).find("a").html(); //Βρές το κείμενο μέσα στο <a> tag
$(this).find("span").show().html(linkText); //Και βάλε το κείμενο στο <span> tag
});
$("#topnav li").hover(function() { //Όταν ο χρήστης κάνει hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Βρές το <span> tag και μετακίνησε το 40 pixels πρός τα πάνω
}, 250);
} , function() { //Όταν ο χρήστης κάνει hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Μετακίνησε το <span> πίσω στην αρχική θέση (0px)
}, 250);
});
});
</script>Αυτό ήταν. Δείτε το αποτέλεσμα κάνοντας κλίκ στο παρακάτω κουμπί
Τα αρχεία του βοηθήματος είναι διαθέσιμα σε όλους τους συνδρομητές του GreekTuts.
Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ
loipon brikes kamia lysh?