Εισαγωγή
Θυμάμαι όταν άρχισα μαθήματα κατασκευής ιστοσελίδων , το πρώτο πράγμα που μάθαμε ήταν , το πως η χρήση του CSS έχει διευκολύνει την ζωή μας . Παλιά η δημιουργία ενός δυναμικού μενού σήμαινε τη δημιουργία μιας σειράς εικόνων : μια για τη στατική εικόνα, μια για το Mouse-Over εφέ και πήγαινε λέγοντας.Μετά από αυτό, η ενσωμάτωση του Javascript , για να δημιουργηθεί το Mouse-Over εφέ στις εικόνες . Ωχ! Έχει πολύ δουλειά....
Αυτό από μόνο του ήταν κουραστικό . Όχι μόνο γιατί είχαμε να δημιουργήσουμε έως 3 διαφορετικές εικόνες, αλλά και επειδή αύξανε τον χρόνο φόρτωσης της σελίδας , καθώς και ήταν λίγο επίπονο όταν έπρεπε να δημιουργηθεί ένα νέο στοιχείο μενού για την ίδια σελίδα .
Με την εξέλιξη του CSS τα τελευταία τρία χρόνια αυτή η διαδικασία έχει απλοποιηθεί σε μεγάλο βαθμό.
Σε αυτό το άρθρο θα σας παρουσιάσω μια πολύ απλή τεχνική για να δημιουργήσετε το Mouse-Over μενού σχεδόν σε δυο λεπτά , έχει υπέροχη εμφάνιση και είναι πολύ εύκολο να εγκατασταθεί σε μια σελίδα .
Τέλος πάντων, ας ξεκινήσουμε!
Το τελικό προϊόν
Πριν ξεκινήσετε, εδώ είναι μια εικόνα , το πως θα μοιάσει το τελικό αποτέλεσμα . Να θυμάστε ότι μπορείτε εύκολα να αλλάξετε τις γραμματοσειρές, τα μεγέθη, χρώματα για να ταιριάζουν με την εμφάνιση της ιστοσελίδας σας .
Η οικοδόμηση του Μενού
Η οικοδόμηση του μενού είναι μια απλή διαδικασία. Πρώτον, θα ξεκινήσει με τη δημιουργία του φόντο του μενού. Αυτό είναι το σκούρο μαύρο , όπως μπορείτε να δείτε παραπάνω.
Τοποθετήστε αυτό το div μέσα στο </body> ετικέτα της ιστοσελίδας σας, όπου θέλετε το μενού να εμφανιστεί :
<div id="mymenu">
<a class="menu" href="#" title="home">home</a>
<a class="menu" href="#" title="Τιτλος 2">Τιτλος 2</a>
<a class="menu" href="#" title="Τιτλος 3">Τιτλος 3</a>
<a class="menu" href="#" title="Τιτλος 4">Τιτλος 4</a>
<a class="menu" href="#" title="Τιτλος 5">Τιτλος 5</a>
<a class="menu" href="#" title="RSS">RSS</a>
<a class="menu" href="#" title="Τιτλος 6">Τιτλος 6</a>
<a class="menu" href="#" title="Τιτλος 7">Τιτλος 7</a>
<a class="menu" href="#" title="Αρχεια">Αρχεια</a>
</div>
<style>
.menu {
font-family: verdana;
font-size: 10pt;
font-weight: bold;
border-right: 2px solid white;
text-decoration: none;
text-background--color:#FFFFFF;
background-color: #000000;
padding: 6px;
}
.menu:hover {
background-color: #D8D8D8;
}
.mymenu {
background-color: #000000;
padding: 6px 0px 6px 0px;
}
</style>
Κατανόηση του κώδικα
border-right: 2px solid white;
Εδώ, έχουμε απλά ένα μέρος των συνόρων στη δεξιά πλευρά του κάθε κουμπιού που λειτουργεί ως διαχωριστικό μεταξύ των στοιχείων μενού.
.menu:hover {
background-color: #D8D8D8;
}
Εδώ, έχουμε απλά το χρώμα του υπόβαθρου των κουμπιών , όταν περνά από πάνω το ποντίκι
Θυμηθείτε ότι το χαρακτηριστικό hover λειτουργεί μόνο σε συνδέσμους, δηλαδή <a href…> </ a> ετικέτες .
Τελειώνουμε
Αυτό είναι πραγματικά όλα και όλο ! Μπορείτε τώρα να προσθέσετε περισσότερες ετικέτες συνδέσμου για να δημιουργήσετε το υπόλοιπο μενού η να αφαιρέσετε κάποια που δεν σας χρειάζονται . Ο πλήρης κωδικός μοιάζει με αυτό:
<style>
.menu {
font-family: verdana;
font-size: 10pt;
font-weight: bold;
border-right: 1px solid white;
text-decoration: none;
text-background--color:#FFFFFF;
background-color: #000000;
padding: 6px;
}
.menu:hover {
background-color: #D8D8D8;
}
.mymenu {
background-color: #000000;
padding: 6px 0px 6px 0px;
}
</style>
<div id="mymenu">
<a class="menu" href="#" title="home">home</a>
<a class="menu" href="#" title="Τιτλος 2">Τιτλος 2</a>
<a class="menu" href="#" title="Τιτλος 3">Τιτλος 3</a>
<a class="menu" href="#" title="Τιτλος 4">Τιτλος 4</a>
<a class="menu" href="#" title="Τιτλος 5">Τιτλος 5</a>
<a class="menu" href="#" title="RSS">RSS</a>
<a class="menu" href="#" title="Τιτλος 6">Τιτλος 6</a>
<a class="menu" href="#" title="Τιτλος 7">Τιτλος 7</a>
<a class="menu" href="#" title="Αρχεια">Αρχεια</a>
</div>
Δείτε εδώ το CSS Mouse-Over μενού σε λειτουργία : |
Σημείωση :
Αν δεν θέλετε να ταλαιπωρηθείτε ψάχνοντας το </head> και το </body> μέσα στο πρότυπο σας και θέλετε να το εγκαταστήσετε με ένα κλικ , απλά δείτε εδώ αυτήν την ανάρτηση . Ακολουθείστε τα βήματα που σας δίνω εκεί και όταν θα έχουν δημιουργηθεί θέσεις Προσθήκη gadget , πάνω και κάτω από την επικεφαλίδα του πρότυπου σας , αντιγράψτε ολόκληρο τον κώδικα και εισάγετε τον στο Προσθήκη gadget >> HTML/JavaScriptΚαι τέλος ! Έχετε ένα ολοκληρωμένο μενού για την επόμενη ιστοσελίδα σας, με λίγες μόνο γραμμές του κώδικα!