Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Πέμπτη, Νοεμβρίου 26

0

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

Εισαγωγή

Θυμάμαι όταν άρχισα μαθήματα κατασκευής ιστοσελίδων , το πρώτο πράγμα που μάθαμε ήταν , το πως η χρήση του 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>
Στην συνέχεια εισάγετε  πριν την ετικέτα  </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


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

0:

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS