Κτίζοντας ένα CSS μενού με Mouse-Over εφέ

Εισαγωγή

Θυμάμαι όταν άρχισα μαθήματα κατασκευής ιστοσελίδων , το πρώτο πράγμα που μάθαμε ήταν , το πως η χρήση του CSS έχει διευκολύνει την ζωή μας . Παλιά η δημιουργία ενός δυναμικού μενού σήμαινε τη δημιουργία μιας σειράς εικόνων : μια για τη στατική εικόνα, μια για το Mouse-Over  εφέ και πήγαινε λέγοντας.
Μετά από αυτό, η ενσωμάτωση του Javascript  , για να δημιουργηθεί το Mouse-Over  εφέ στις εικόνες . Ωχ! Έχει πολύ δουλειά....

Αυτό από μόνο του ήταν κουραστικό . Όχι μόνο γιατί είχαμε να δημιουργήσουμε έως 3 διαφορετικές εικόνες, αλλά και επειδή αύξανε τον χρόνο φόρτωσης της σελίδας , καθώς και ήταν λίγο επίπονο όταν έπρεπε  να δημιουργηθεί ένα νέο στοιχείο μενού για την ίδια σελίδα .

  Με την εξέλιξη του CSS τα τελευταία τρία χρόνια αυτή η διαδικασία έχει απλοποιηθεί σε μεγάλο βαθμό.

Σε αυτό το άρθρο θα σας παρουσιάσω μια πολύ απλή τεχνική για να δημιουργήσετε το Mouse-Over  μενού σχεδόν σε δυο λεπτά , έχει υπέροχη εμφάνιση  και  είναι πολύ εύκολο να εγκατασταθεί σε μια σελίδα .

Τέλος πάντων, ας ξεκινήσουμε!

Το τελικό προϊόν

Πριν ξεκινήσετε, εδώ είναι μια εικόνα , το πως θα μοιάσει το τελικό αποτέλεσμα . Να θυμάστε ότι μπορείτε εύκολα να αλλάξετε τις γραμματοσειρές, τα μεγέθη, χρώματα για να ταιριάζουν με την εμφάνιση της ιστοσελίδας σας  .

home Τιτλος 2 Τιτλος 3 Τιτλος 4 Τιτλος 5 RSS Τιτλος 6 Τιτλος 7

Η οικοδόμηση του Μενού

Η οικοδόμηση του μενού είναι μια απλή διαδικασία. Πρώτον, θα ξεκινήσει με τη δημιουργία του φόντο του μενού. Αυτό είναι το σκούρο μαύρο , όπως μπορείτε να δείτε παραπάνω.
Τοποθετήστε αυτό το 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>

Στην συνέχεια εισάγετε  πριν την ετικέτα  </head>  της σελίδας σας  το stylesheet για το μενού

<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


Και τέλος ! Έχετε ένα ολοκληρωμένο μενού για την επόμενη ιστοσελίδα σας, με λίγες μόνο γραμμές του  κώδικα!