Σε αυτό το web design tutorial θα μάθουμε με πολύ αναλυτικό τρόπο πώς κατασκευάζουμε ένα css navigation menu το οποίο θα έχει και dropdown effect. Για αυτό το CSS tutorial χρησιμοποιούμε και 3 αρχεία jpg τα οποία μπορείτε να τα κατεβάσετε στο τέλος του post.Δεν θα χρησιμοποιήσουμε καθόλου JavaScript στην δημιουργία της navigation bar.Το css tutorial αυτό είναι σε δύο μέρη όπου εξηγείται αναλυτικά και το html αλλά και to CSS κομμάτι. Εάν είστε εντελώς αρχάριοι από html και css καλό θα είναι να κοιτάξετε πρώτα τα εξής tutorials αν και στο συγκεκριμένο css tutorial τα γράφουμε όλα ΠΟΛΥ αναλυτικά…
ΠΡΕΠΕΙ ΝΑ ΤΟΝΙΣΟΥΜΕ ΟΤΙ ΑΝΑΛΥΟΥΜΕ ΤΟ CSS NAVIGATION MENU ΑΝΑΛΟΓΑ ΜΕ ΤΟΝ ΤΡΟΠΟ ΠΟΥ ΤΟ ΔΗΜΙΟΥΡΓΗΣΑΜΕ. Υπάρχουν πολλοί διαφορετικοί τρόποι να δημιουργήσει κάποιος κάτι.
Πριν ξεκινήσουμε τη css navigation bar tutorial δείτε μία επίδειξη του τι πρόκειται να δημιουργήσουμε πατώντας εδώ: Δείτε εδώ το CSS navigation bar που θα δημιουργήσουμε
Ξεκινώντας τη δημιουργία του navigation bar.
Έχουμε δημιουργήσει ένα σχέδιο-εξαιρετικά απλό- με τη navigation bar.Αυτό το κάνουμε απλά για να δούμε πώς θέλουμε περίπου να μοιάζει.
Πάνω στο σχέδιο έχουμε γράψει ότι έχουμε κάνει hover πάνω στο LINK 2.Άρα,πάνω –κάτω βλέπουμε τη θέλουμε να κάνουμε: Μια navigation bar στην οποία θα δώσουμε στυλ με χρήση CSS και όταν κάποιος περνάει το ποντίκι πάνω από ένα link εάν αυτό έχει sub-links τότε αυτά θα εμφανίζονται οριζόντια και ΟΧΙ κάθετα. Σαν links θα χρησιμοποιήσουμε τη λεγόμενη anchor tag δηλαδή την ‘#’.
Δημιουργία του CSS navigation menu-HTML μέρος
Εδώ θα δούμε τον κώδικα που θα χρησιμοποιήσουμε για να φτιάξουμε αρχικά τα links και τα sub-links και εν συνεχεία θα δημιουργήσουμε το css navigation menu και τα dropdowns.
Δημιουργήστε ένα αρχείο html και αποθηκεύστε το σαν css_navigation_bar.html και αποθηκεύστε το στο wamp.
O κώδικας που πρέπει να έχει μέσα το αρχείο είναι ό εξής:
[html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p>
<p>
<html xmlns="http://www.w3.org/1999/xhtml"></p>
<p>
<head></p>
<p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>
<p>
<title>Απλή navigation bar με css.</title></p>
<p></head></p>
<p>
<body></p>
<p>
</body></p>
<p>
</html></p>
<p>
[/html]
Έστω λοιπόν ότι θέλουμε μία navigation bar με τα εξής links: Αρχική σελίδα, Προϊόντα, Υπηρεσίες ,Portfolio και σελίδα επικοινωνίας. Επίσης υποθέτουμε ότι η σελίδα των προϊόντων ,των υπηρεσιών και του portfolio θα έχουν υποσελίδες (αυτά θα είναι τα sub-links) .
Στην html όταν θέλουμε να δημιουργήσουμε ένα τέτοιο μενού χρησιμοποιούμε μία unordered list tag δηλαδή μία html ετικέτα
[html]</p>
<ul></ul>
<p>[/html]
και μέσα σε αυτή χρησιμοποιούμε την html tag
[html]</p>
<li></li>
<p>[/html]
για τις κύριες σελίδες (και για τις υποσελίδες αλλά θα δούμε πως το χρησιμοποιούμε σε λίγο).Μπορούσαμε να χρησιμοποιήσουμε και
[html]</p>
<ol></ol>
<p>[/html]
(ordered list) αντί για
[html]</p>
<ul></ul>
<p>[/html]
και θα βλέπαμε μια αριθμημένη λίστα με τις σελίδες. Ο,τιδήποτε και και να χρησιμοποιήσουμε θα το κάνουμε με τα css να μη φαίνεται.
Δείτε τον κώδικα στη συνέχεια ένα στιγμιότυπο από το αποτέλεσμα
[html]</p>
<p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p>
<p>
<html xmlns="http://www.w3.org/1999/xhtml"></p>
<p>
<head></p>
<p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>
<p>
<title>Απλή navigation bar με css.</title></p>
<p></head></p>
<p>
<body></p>
<ul id="mymenu">
<li><a href="#">Αρχική</a></li>
<li class="test"><a href="#">Προιόντα</a></li>
<li class="test"><a href="#">Υπηρεσίες</a></li>
<li class="test"><a href="#">Portfolio</a></li>
<li class="test"><a href="#">Επικοινωνία</a></li>
</ul>
<p></body></p>
<p>
</html></p>
<p>
[/html]
Δείτε πώς φαίνεται τώρα το μενού μας.
Έγινε το πρώτο βήμα..
Τώρα αυτό που μένει είναι να δημιουργήσουμε και της υπο-σελίδες των κύριων σελίδων. Αυτό θα γίνει ως εξής: Θα τοποθετήσουμε unordered list tags μεσα στις list tags των κυρίων σελίδων! Έστω ότι θέλουμε να δημιουργήσουμε 2 sublinks κάτω απο το link “Βασική σελίδα”
[html]</p>
<li><a href="#">Βασική σελίδα</a>
<ul>
<li><a href="#">Yποσελίδα 1</a></li>
<li><a href="#">Yποσελίδα 2</a></li>
</ul>
</li>
<p>[/html]
Με το παραπάνω κομμάτι του κώδικα καταφέρνουμε αυτό που θέλουμε.Δείτε τώρα ολοκληρωμένο τον html κώδικα και ένα στιγμιότυπο της navigation bar μας.
Δείτε ολόκληρο τον html κώδικα
[html]</p>
<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p>
<p>
<html xmlns="http://www.w3.org/1999/xhtml"></p>
<p>
<head></p>
<p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>
<p>
<title>Απλή navigation bar με css.</title></p>
<p></head></p>
<p><body></p>
<ul id="mymenu">
<li><a href="#">Αρχική</a></li>
<li class="test"><a href="#">Προιόντα</a>
<ul>
<li><a href="#">Yπολογιστές</a></li>
<li><a href="#">Περιφερειακά</a></li>
</ul>
</li>
<li class="test"><a href="#">Υπηρεσίες</a>
<ul>
<li><a href="#">Σχεδιασμός</a></li>
<li><a href="#">Ανακατασκευή</a></li>
<li><a href="#">Γραφιστική</a></li>
</ul>
</li>
<li class="test"><a href="#">Portfolio</a>
<ul>
<li><a href="#">Σελίδα 1</a></li>
<li><a href="#">Σελίδα 2</a></li>
<li><a href="#">Σελίδα 3</a></li>
<li><a href="#">Σελίδα 4</a></li>
</ul>
</li>
<li class="test"><a href="#">Επικοινωνία</a></li>
</ul>
<p></body></p>
<p>
</html></p>
<p>[/html]
Δείτε πως είναι τώρα η navigation bar μας.
Έτοιμες και οι υποσελίδες! Ουσιαστικά τελειώσαμε με το html κομμάτι της navigation bar.
CSS navigation bar tutorial –CSS πρώτο μέρος
Δημιουργήστε ένα αρχείο με το όνομα css_navigation_bar.css και αποθηκεύστε στο στον φάκελο που έχετε αποθηκεύσει και το css_navigation_bar.html. Στο αρχείο css_navigation_bar.html ανάμεσα στο
[html]<head></head>[/html]
προσθέστε την ακόλουθη γραμμή κώδικα
[html]</p>
<link rel="stylesheet" href="css_navigation_bar.css"/>[/html]
.Με αυτόν τον τρόπο δηλώνουμε ότι το css αρχείο που χρησιμοποιούμε είναι εξωτερικό, δηλαδή δεν είναι ενσωματωμένο στον html κώδικα. Θα μπορούσαμε να το ενσωματώσουμε αλλά δεν το συνιστούμε. Επίσης θα χρησιμοποιήσουμε 3 εικονίδια τα οποία μπορείτε να τα κατεβάσετε στο τέλος του css tutorial.
Ας δούμε τώρα το πρώτο κομμάτι του CSS κώδικα. Αμέσως μετά ακολουθούν εξηγήσεις. Σε κάθε νέο κομμάτι προσθέτουμε το επόμενο κομμάτι κώδικα έτσι ώστε στο τελευταίο κομμάτι να έχουμε ολοκληρωμένο τον css κώδικα που χρησιμοποιούμε.
[css]</p>
<p>
/* CSS Document */</p>
<p>
#mymenu{</p>
<p>
margin:0;</p>
<p>
padding:0;</p>
<p>
height:40px;</p>
<p>
overflow:hidden;</p>
<p>
border-left:2px solid #2B358E;</p>
<p>
}</p>
<p>
[/css]
Με αυτό το κομμάτι κώδικα αναφερόμαστε στη εμφάνιση του στοιχείου που έχει id = mymenu .Αυτό το στοιχείο αν κοιτάξουμε το html κώδικα θα δούμε ότι έιναι λίστα, που περιέχει ουσιαστικά το navigation bar μας. Του δίνουμε ένα ύψος 40px γιατί θα χρησιμοποιήσουμε έν συνεχεία ένα background που έχει ύψος 40px.Επίσης χρησιμοποιουμε overflow:hidden και ο,τιδήποτε περισσεύει κάτω από τα 40px αυτά μέσα στο
[html]</p>
<ul id= "mymenu"></ud>[/html]
κόβεται.Το border-left είναι μια κάθετη γραμμή στα αριστερά που εμφανίζεται και της δίνουμε ένα χρώμα το #2β358Ε.Είναι το ίδιο χρώμα που έχει το γραφικό που θα χρησιμοποιήσουμε( στα σημεία που αυτό είναι σκούρο μπλε).
Για να δούμε ένα στιγμιότυπο:
Css tutorial-Δεύτερο μέρος κώδικα
[css]</p>
<p>
#mymenu li</p>
<p>
{</p>
<p>
list-style:none;</p>
<p>
float:left; </p>
<p> }</p>
<p>#mymenu li a</p>
<p>
{</p>
<p>
display: block;</p>
<p>
color: black;</p>
<p>
font-size:17px;</p>
<p>
font-family: serif;</p>
<p>
text-decoration:none;</p>
<p>
background: url(bluetop.jpg) repeat-x;</p>
<p>
height:40px;</p>
<p>
border-right:2px solid #2B358E;</p>
<p> }</p>
<p>[/css]
#mymenu li
Αυτό το κομμάτι ελέγχει οτιδήποτε είναι ανάμεσα σε list tags και βρίσκεται μέσα στο στοιχείο με id mymenu,δηλαδή τα πάντα.Με το list-style:none εξαφανίζουμε αυτές τις κουκίδες που υπήρχαν πριν στις σελίδες, δειτε φωτογραφία πιο πάνω στο html κομμάτι. Στη συνέχεια με το float:left “αναγκάζετε” κάθε στοιχείο που υπάρχει μέσα σε λίστα list tags δηλαδή να «πλεύσει» προς τα αριστερά. Το float ουσιαστικά κάνει τα ονόματα των σελίδων μας να ξεκινάνε από όσο αριστερότερα γίνεται μέσα στo navigation bar.Τοποθετούμε επίσης και φόντο και θέτουμε το ύψος επίσης στα 40px όσο είναι και το ύψος της εικόνας φόντου.
#mymenu li a
Αυτό το κομμάτι ελέγχει την εμφάνιση των link των σελίδων μας. Με το text decoration:none αφαιρούμε την γραμμή κάτω από το κάθε link.
Δείτε στιγμιότυπο μετά το δεύτερο μέρος του css κώδικα.
Παρατηρείστε τι κάνει το float:left.Όλα τα links μας ξεκινάνε όσο πιο αριστερά γίνεται. Επίσης παρατηρήστε το κενό που υπάρχει μετά τα «προϊόντα» ,τις «υπηρεσίες» και το “portfolio”.Είναι ουσιαστικά χώρος ο οποίος εμφανίζεται λόγω των υποσελίδων που υπάρχουν στα συγκεκριμένα links.Αυτό τον κενό χώρο θα τον εξαφανίσουμε στο αμέσως επόμενο κομμάτι του CSS κώδικα.Για να κάνουμε το css navigation menu μας να φαίνεται πιο όμορφο προσθέτουμε τον εξής κώδικα στο #mymenu li a
[css]</p>
<p>
padding-right:8px;</p>
<p>
padding-top:10px;</p>
<p>
padding-left:8px;</p>
<p>
[/css]
Εάν το σώσουμε και τρέξουμε τη σελίδα θα δούμε:
CSS tutorial-Τρίτο μέρος κώδικα
[css]</p>
<p>
#mymenu li a:hover{</p>
<p>
background: url(bluetop2.jpg) repeat-x;</p>
<p> }</p>
<p>
[/css]
Με το #mymenu li a:hover δηλώνουμε μια ψευδοκλάση css ,την hover.Η hover είναι μία ψευδοκλάση στα css όπου ουσιαστικά λειτουργεί μόνο όταν περνάμε το ποντίκι πάνω από ένα συγκεκριμένο στοιχείο. Εδώ ορίζουμε ότι όταν περάσουμε το ποντίκι πάνω από ένα link που υπάρχει στη navigation bar μας τότε αυτό το link αυτό (a) αποκτά ένα διαφορετικό background το οποίο εξαφανίζεται μόλις τελειώσει το mouseover. Δείτε τι συμβαίνει όταν περνάμε το ποντίκι μας πάνω από το link «Προϊόντα»
Συνεχίζουμε προσθέτοντας τον παρακάτω κώδικα.
[css]</p>
<p> #mymenu li ul</p>
<p>
{</p>
<p>
display:none;</p>
<p>
}</p>
<p>[/css]
Θυμάστε τον «κενό χώρο»που μιλήσαμε λίγο πριν; Με το display:none ουσιαστικά δεν αφήνουμε να εμφανίζεται οτιδήποτε βρίσκεται μέσα στο “ul” που ανήκει στο “li” που ανήκει στο στοιχείο με id το “mymenu”.Δηλαδή μιλάμε πλέον για τις υποσελίδες! Δείτε τι συμβαίνει τώρα στο css navigation menu.
Τέλεια. Ήρθε η ώρα να δημιουργήσουμε τις υποσελίδες.
Δημιουργία subpages-Τελευταίο μέρος css κώδικα
Σε αυτό το τελευταίο κομμάτι θα χρησιμοποιήσουμε την ψευδοκλάση hover ώστε να ελέγχουμε την εμφάνιση των υποσελίδων που εμφανίζονται όταν κάποιος κάνει mouseover πάνω από ένα link στο navigation bar.
[css]</p>
<p>
#mymenu li:hover ul {</p>
<p>
display: block;</p>
<p>
position: absolute;</p>
<p>
overflow:hidden;</p>
<p>
margin-top:-10px;</p>
<p>
margin-left:-2px;</p>
<p>
padding:0;</p>
<p>
border-left:2px solid #2B358E;</p>
<p>
}</p>
<p>
[/css]
Ας κοιτάξουμε την πρώτη-πρώτη γραμμή. #mymenu li:hover ul. Το κομμάτι αυτό του κώδικα ελέγχει την εμφάνιση του ul το οποίο εμφανίζεται αφού γίνει hover σε κάποιο li το οποίο ανήκει στο #mymenu. Δηλαδή πλέον μιλάμε για τις υποσελιδές της css navigation bar τις οποίες θα τις εμφανίζουμε όταν περνάμε το ποντίκι πάνω από τις αντίστοιχες κύριες σελίδες Συνεχίζουμε με τον κώδικα..
[css]</p>
<p>
#mymenu .test li a{</p>
<p>
height:30px;</p>
<p> }</p>
<p>#mymenu .test li a:hover{</p>
<p>
color: #30C;</p>
<p>
background:url(bluetop3.jpg) repeat-x;</p>
<p> }</p>
<p>
[/css]
Επειδή θέλουμε να μπορούμε να διαχειριστούμε καλύτερα την εμφάνιση των links μας έχουμε δημιουργήσει μία κλάση την «test» την οποία την ενσωματώνουμε στα list tags στον html κώδικα.Επειδή τα κύρια links -οι σελίδες μας- έχουν προσαρμοστεί σε αυτή την κλάση τότε και οι υποσελίδες μας θα προσαρμοστούν.
Με το #mymenu .test li a:hover ελέγχουμε την εμφάνιση του link (a) το οποίο ανήκει στο li και στο οποίο κάνουμε hover . Αν δούμε τον html κώδικα, θα δούμε ότι αυτό το link είναι το link της υποσελίδας.
Με το #mymenu .test li a:hover ελέγχουμε τι θα συμβεί στο sublink αν κάνουμε mouseover από πάνω του.
Προσοχή:To sublink παίρνει το background του βασικού link.Το ύψος το ορίζουμε στα 30px και ΟΧΙ στα 40px διότι πιο πάνω στο #mymenu li a χρησιμοποιήσαμε “padding-top:10px”.Οπότε το ύψος που πρέπει να δώσουμε είναι 40-10=30px ώστε να εμφανιστεί σωστά.
Κατεβάστε τα αρχεία html,css καθώς και τα εικονίδια που χρησιμοποιήθηκαν
Το τελικό απoτέλεσμα της css navigation bar είναι εδώ.
Κατεβάστε τα αρχεία html και css όπως επίσης και τα εικονίδια.
Σημείωση: Μην βάζετε keywords στο πεδίο για το όνομα καθώς επίσης και links προς άσχετες ιστοσελίδες με τη θεματολογία του άρθρου. Οι διαχειριστές του ifeed θα μαρκάρουν αυτόματα αυτά τα σχόλια ως spam!
0