Δημιουργία css menu με εικονίδια δίπλα στα links.

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
akisplace
Δημοσιεύσεις: 19
Εγγραφή: 29 Μάιος 2010 14:53
Τοποθεσία: Athens
Επικοινωνία:

Δημιουργία css menu με εικονίδια δίπλα στα links.

Δημοσίευση από akisplace » 07 Ιουν 2010 22:22

Σε αυτό το πολύ απλό tutorial θα δούμε πώς μπορούμε να δημιουργήσουμε μία navigation bar στην οποία σε κάθε link δίπλα θα τοποθετήσουμε ένα μικρό εικονίδιο.Επίσης θα προσπαθήσουμε με δύο πρόσθετες εικόνες να δημιουργήσουμε την αίσθηση ότι το μενου αυτό έχει στρογγυλεμένες άκρες.

Δείτε ένα live demo πρώτα

Όπως πάντα θα σας δώσουμε κάποιες πηγές σε περίπτωση που είστε εντελώς αρχάριοι από τα CSS.

1)CSS padding tutorial

2)CSS margin tutorial

3)All you need for Cascading Stylesheets-freestuff.gr

Αφού τελειώσαμε με τις πηγές ας ξεκινήσουμε..

Αρχικές σκέψεις

Θέλω ένα CSS navigation menu το οποίο θα έχει τα links των σελίδων μου πάνω του αλλά επίσης θα έχει και ένα μικρό εικονίδιο στα αριστερά κάθε link.Δηλαδή το μενού μου χωρίς το εικονίδιο θα είναι κάπως έτσι..


Εικόνα

Δεν με ενδιαφέρει να έχω dropdowns.Το μόνο που θέλω είναι να έχω ένα εικονίδιο στα αριστερά του κάθε link. Επίσης όταν περνάμε το ποντίκι μας πάνω από ένα link,το hover effect που θα συμβαίνει αλλάζει λίγο το background του link. Ας δούμε λοιπόν από κοντά ένα από τα παραπάνω links στην CSS navigation bar.

Εικόνα

Αφού λοιπόν είδαμε πώς θα μοιάζει το link μας στην navigation bar ήρθε η ώρα να σκεφτούμε μερικά πράγματα για το css menu μας.

1.Θα αποτελείται από 5 links.Αρχική σελίδα, «σχετικά», "portfolio", «επικοινωνία» και «αναζήτηση».

2.Θα το δημιουργήσουμε με τον πλέον απλό τρόπο. Το κάθε link από τα παραπάνω θα είναι ουσιαστικά ένα μέλος μίας html λίστας

Κώδικας: Επιλογή όλων

<li></li>
.

η οποία λίστα θα βρίσκεται μέσα σε μία μη αριθμημένη λίστα την

Κώδικας: Επιλογή όλων

<ul></ul>
3.Το εικονίδιο μας θα το τοποθετήσουμε μέσα στο link μας αλλά σε

Κώδικας: Επιλογή όλων

<span></span>
html στοιχείο. Όπως έχουμε ξαναπεί το span είναι ένα html στοιχείο όπως η div με τη διαφορά ότι όταν το χρησιμοποιούμε κάπου δεν μορφοποιεί τη σελίδα μας ,δηλαδή δεν προκαλεί αλλαγές γραμμής όπως κάνει η div όπου τη χρησιμοποιούμε. Το εικονίδιο το θέλουμε σε span για να είναι στην ίδια ευθεία με τον τίτλο του link μας.

4.Θα δημιουργήσουμε μία CSS κλάση για το menu μας ,τη "menu" και από κει και πέρα για κάθε span στοιχείο θα έχουμε μία CSS κλάση,την "spans" οποία θα ορίζει το που θα τοποθετείται το εικονίδιο. Επίσης κάθε span θα έχει και ένα μοναδικό id στο οποίο ορίζεται το εικονίδιο που θα χρησιμοποιείται&#8230;

Για να δούμε λοιπόν τον html κώδικα που θα χρησιμοποιήσουμε βασιζόμενοι στα παραπάνω.

Ο html κώδικας και εξηγήσεις.

Δημιουργήστε ένα αρχείο "simpleNav.html". Επίσης δημιουργήστε και το αντίστοιχο CSS αρχείο το "styles.css".Αυτό το αρχείο θα εφαρμόζει τα CSS στυλ στο μενού μας και στα span μας.

Κώδικας: Επιλογή όλων

<ul id="menu">
			<li><a href="#"><span class="spans" id="spanhome"></span>Αρχική..</a></li>
			<li><a href="#"><span class="spans" id="spanabout"></span>Σχετικά..</a></li>
			<li><a href="#"><span class="spans" id="spanportfolio"></span>To portfolio</a></li>
			<li><a href="#"><span class="spans" id="spanmail"></span>Επικοινωνήστε</a></li>
			<li><a href="#" class="noborder"><span class="spans" id="spansearch"></span>Αναζήτηση στο site μας..</a></li>
</ul>

Για τις κλάσεις και τα id θα μιλήσουμε σε λιγάκι.
Απ ότι βλέπουμε δημιουργούμε τα list items μας και τοποθετούμε το link μας μέσα.Μέσα στο link τοποθετούμε το span στοιχείο που μέσα εκεί θα τοποθετήσουμε το εικονίδιο!

Για να δούμε πώς είναι το μενού μας τώρα..
Εικόνα

Εδώ κάπου τελειώνει το Html κομμάτι..Στο css κομμάτι που ακολουθεί θα γίνει η μορφοποίηση της navigation bar μας και θα ολοκληρωθεί το tutorial αυτό..

CSS κώδικας

Καταρχάς θα δημιουργήσουμε την CSS κλάση ".menu" όπου θα είναι η βασική μας κλάση. Εδώ θα γράψουμε κάποιους css κανόνες που θα δίνουν στυλ στο html στοιχείο με κλάση ".menu" δηλαδή την "ul" μας- που ουσιαστικά είναι το μενού μας..

Κώδικας: Επιλογή όλων

#menu &#123;
margin-left&#58;10px;	
position&#58;absolute;
top&#58;10px;
padding&#58;0;     
font-family&#58; Arial, sans-serif;
font-weight&#58; bold;
list-style-type&#58; none;
font-size&#58; 15px;
height&#58; 50px;
background&#58; #0C2074;
overflow&#58;hidden;

&#125;

Βλέπουμε στον παραπάνω κώδικα ότι δίνουμε στο menu μας ένα ύψος 50px και επίσης ορίζουμε το overflow:hidden.Με αυτό τον τρόπο οτιδήποτε περισσεύει κάτω από τα 50px κόβεται&#8230; Επίσης ορίζουμε το χρώμα του background μας και τη γραμματοσειρά και το μέγεθος αυτής καθώς και το στυλ της που το ορίζουμε «bold».Με το margin-left:10px δίνουμε ένα περιθώριο από τα αριστερά ,από την έξω πλευρά του navigation bar μας. Με το position:absolute κάνουμε το μενού μας να είναι είναι τοποθετημένο εκεί που το θέλουμε ακριβώς και έτσι του δίνουμε ένα περιθώριο 10px από την κορυφή με την εντολή top:10px;..Με το list-style-type:none αφαιρούμε τις κουκκίδες που υπάρχουν στο μενού μας δίπλα σε κάθε list item .Δείτε την προηγούμενη φωτογραφία για να δείτε ποιες κουκκίδες εννοούμε.

Ας δούμε ένα στιγμιότυπο..
Εικόνα

Ας μορφοποιήσουμε λίγο τα links μας τώρα με css στυλ ώστε αυτό που φτιάχνουμε να μοιάζει με navigation bar.

Κώδικας: Επιλογή όλων


#menu li 
&#123;
float&#58; left;margin&#58; 0;
&#125;
			
#menu li a &#123;
text-decoration&#58; none;
display&#58; block;padding-right&#58;10px;
padding-left&#58; 5px;
line-height&#58; 50px;
color&#58; #fafafa;
border-right&#58;1px solid white;

&#125;

#menu li a.noborder&#123;
border-right&#58;none;
&#125;

#menu li a&#58;hover &#123;
color&#58; #ffffff; background&#58; #1332AF;
   &#125;

Ας δούμε πώς φαίνεται η css navigation bar μας και εξηγούμε..

Εικόνα

Το #menu li ελέγχει την εμφάνιση οποιουδήποτε στοιχείου λίστας υπάρχει μέσα στο μενού μας &#8211;το οποίο έχει id "menu"&#8230;

To float:left αναγκάζει τα links μας να ξεκινάνε όσο το δυνατόν πιο αριστερά γίνεται μέσα στο container element που τα περιέχει&#8211;δηλαδή το μενού μας..

Το #menu li a ελέγχει την εμφάνιση των links που υπάρχουν στο μενού μας .Με το text-decoration:none εξαφανίζουμε τη γραμμή που εμφανίζεται κάτω από κάθε link .Το display: block εμφανίζει τα links μας σε σχήμα ορθογωνίου ουσιαστικά. Το line-height το ορίζουμε 50px όσο δηλαδή είναι το ύψος του CSS menu μας.To border-right είναι η λευκή γραμμή που υπάρχει μετά από κάθε link.

Με το #menu li a:hover ορίζουμε την εμφάνιση του link όταν κάνουμε mouseover πάνω του.

Τέλος, με το #menu li a.noborder{border-right:none;} ρυθμίζουμε την εμφάνιση του link του menu μας το οποίο θα έχει id "noborder".Αυτό θα είναι το τελευταίο link το οποίο δεν θα θέλουμε στα δεξιά να έχει την λευκή κάθετη γραμμή.

Ήρθε η ώρα να δημιούργησε την εμφάνιση των span στοιχείων μας. Για να δούμε τον CSS κώδικα και εξηγούμε..

CSS κώδικας των span στοιχείων.

Κώδικας: Επιλογή όλων


.spans&#123;
margin-right&#58;5px;
padding-left&#58;32px;
padding-top&#58;5px;
padding-bottom&#58;5px;

&#125;
#spanhome&#123; background&#58; url&#40;images/heart.png&#41; no-repeat left;&#125;
#spanabout&#123; background&#58; url&#40;images/about.png&#41; no-repeat left;&#125;
#spanportfolio&#123;background&#58; url&#40;images/portfolio.png&#41; no-repeat left;&#125;
#spanmail&#123;background&#58; url&#40;images/mail.png&#41; no-repeat left;&#125;
#spansearch&#123;background&#58; url&#40;images/search.png&#41; no-repeat left;&#125;


Ορίζουμε μία κλάση "spans" που θα εφαρμοστεί σε όλα τα span στοιχεία του html κώδικα ποιο πάνω. Αυτή η κλάση θα μας ορίσει τα περιθώρια που θα χρησιμοποιήσουμε ώστε να τοποθετήσουμε το εικονίδιο μας σωστά μέσα στο link μας. Παρατηρείστε το "padding-left:32px;". Αυτό το κάνουμε διότι το span στοιχείο πρέπει να έχει ένα περιθώριο -απ τη μέσα μερια- από τα αριστερά 32px διότι το εικονίδιο μας είναι 32*32px. Στη συνέχεια ορίζουμε τα padding-top και padding-bottom αντίστοιχα για να φαίνεται καλύτερα το εικονίδιο μας. Επίσης ορίζουμε το margin-right:5px ώστε ο τίτλος του link να ξεκινάει 5px δεξιότερα από το εικονίδιο μας.

Τα id που ορίζουμε στη συνέχεια είναι για το κάθε ένα span στοιχείο ξεχωριστά και ουσιαστικά περιέχει το εικονίδιο μας.Το εικονίδιο το τοποθετούμε σαν background στο span μας !
Για να δούμε πώς φαίνεται το CSS μενού μας τώρα..

Εικόνα

Ας δημιουργήσουμε τις στρογγυλεμένες άκρες.

Είμαστε έτοιμοι.Ας κάνουμε κάτι τελευταίο..Ας κάνουμε το menu μας να έχει στρογγυλεμένες άκρες. Θα το κάνουμε με χρήση δύο εικόνων που θα φτιάξουμε εμείς..Το πρώτο πράγμα που κάνουμε είναι να βάλουμε το μενού μας μέσα σε μια div η οποία θα περιέχει το μενού μας ,την "wrap".Επίσης θα δημιουργήσουμε 2 divs (την "left" και την "right"- μία πριν και μία μετά το μενού μας-όπου θα βρίσκονται τα εικονίδια μας που θα δίνουν την εντύπωση ότι το μενού μας έχει στρογγυλεμένες άκρες.Τα εικονίδια θα είναι τα εξής..
Εικόνα Εικόνα

Δηλαδή το menu μας θα είναι ανάμεσα απο δύο divs τη "left" στα αριστερά και την "right" στα δεξιά..Το ενα εικονίδιο θα μπει στη μία div και το άλλο στην άλλη.

Εικόνα

Τα εικονίδια μας αυτά μπορείτε να τα κατεβάσετε στο τέλος του tutorial αυτού.

Ας δούμε τώρα ολόκληρο τον html και css κώδικα που χρησιμοποιούμε..

ΣΥΝΟΛΟ ΗΤΜL ΚΩΔΙΚΑ

Κώδικας: Επιλογή όλων

<div id="wrap">

<ul id="menu">
            <div id="left"></div>
			<li><a href="#"><span class="spans" id="spanhome"></span>Αρχική..</a></li>
			<li><a href="#"><span class="spans" id="spanabout"></span>Σχετικά..</a></li>
			<li><a href="#"><span class="spans" id="spanportfolio"></span>To portfolio</a></li>
			<li><a href="#"><span class="spans" id="spanmail"></span>Επικοινωνήστε</a></li>
			<li><a href="#" class="noborder"><span class="spans" id="spansearch"></span>Αναζήτηση στο site μας..</a></li>
		      <div id="right"></div>
        </ul>

</div>


Ολόκληρος ο CSS κώδικας

Κώδικας: Επιλογή όλων


*&#123;    margin&#58;0;
       padding&#58;0;
		&#125;
    #wrap&#123;margin&#58;0 auto;
    width&#58;900px;
    &#125;       

#left&#123;
       height&#58;50px;
       width&#58;10px;
       float&#58;left;
       background&#58;url&#40;images/left.png&#41; no-repeat left;&#125;

#right&#123;

       height&#58;50px;
       width&#58;10px;
       float&#58;right;
       background&#58;url&#40;images/right.png&#41; no-repeat right;

       &#125;
#menu &#123;
margin-left&#58;10px;
position&#58;absolute;
top&#58;10px;
padding&#58;0;
font-family&#58; Arial, sans-serif;
font-weight&#58; bold;
list-style-type&#58; none;
font-size&#58; 15px;
height&#58; 50px;
background&#58; #0C2074;
overflow&#58;hidden;
display&#58;inline;

		&#125;

#menu li &#123;
float&#58; left;
margin&#58; 0;

		&#125;

#menu li a &#123;

text-decoration&#58; none;
display&#58; block;               
padding-right&#58;10px;
padding-left&#58; 5px;
line-height&#58; 50px;
color&#58; #fafafa;
border-right&#58;1px solid white;

		&#125;

#menu li a.noborder&#123;border-right&#58;none;&#125;

#menu li a&#58;hover &#123;color&#58; #ffffff; background&#58; #1332AF;
           &#125;

       .spans&#123;
       margin-right&#58;5px;
       padding-left&#58;32px;
       padding-top&#58;5px;
       padding-bottom&#58;5px;

       &#125;
       #spanhome&#123; background&#58; url&#40;images/heart.png&#41; no-repeat left;&#125;
       #spanabout&#123; background&#58; url&#40;images/about.png&#41; no-repeat left;&#125;
       #spanportfolio&#123;background&#58; url&#40;images/portfolio.png&#41; no-repeat left;&#125;
       #spanmail&#123;background&#58; url&#40;images/mail.png&#41; no-repeat left;&#125;
       #spansearch&#123;background&#58; url&#40;images/search.png&#41; no-repeat left;&#125;    

Ο κώδικας είναι ίδιος με τη διαφορά ότι προσθέσαμε τα CSS των νέων div που δημιουργήσαμε: της "wrap" , της "left" και της "right".Στη left και στη right θα τοποθετήσουμε τα εικονίδια που θα κάνουν το css menu μας να φαίνεται ότι έχει στρογγυλεμένες άκρες. Τα εικονίδια που δημιουργούμε έχουν ύψος 50px όσο δηλαδή και το μενού μας.

Εδώ κάπου τελειώνει το tutorial αυτό.
Εικόνα


Κατεβάστε τα αρχεία μας εδω..

Σημείωση.Στα αρχεία που θα κάνετε download δεν περιέχονται οι εικόνες που είναι στο μενού μας.Αντίθετα στη θέση των εικόνων έχουμε τοποθετήσει ένα γενικό εικονίδιο το οποίο μπορείτε να αντικαταστήσετε με τα δικα σας εικονίδια .Να θυμάστε ότι το μέγεθος είναι 32*32 pixels.

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Δημιουργία css menu με εικονίδια δίπλα στα links.

Δημοσίευση από manolism » 07 Ιουν 2010 23:27

Έγινε βοήθημα. Μπράβο για μία ακόμη φορά. :respect:

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

Δημιουργία css menu με εικονίδια δίπλα στα links.

Δημοσίευση από tsiger » 08 Ιουν 2010 01:48

Γιατί να μη μπεί η εικόνα σαν background στο a tag και να γλυτώσεις από ένα tag (span) το οποίο χρησιμοποιείς για διακοσμητικούς σκοπούς;

akisplace
Δημοσιεύσεις: 19
Εγγραφή: 29 Μάιος 2010 14:53
Τοποθεσία: Athens
Επικοινωνία:

Δημιουργία css menu με εικονίδια δίπλα στα links.

Δημοσίευση από akisplace » 08 Ιουν 2010 03:49

Ευχαριστώ πολύ και ευχαριστώ κιόλας για την παρατήρηση :D Θα το δοκιμάσω και εγώ.

Άβαταρ μέλους
NoNickeD
Δημοσιεύσεις: 18
Εγγραφή: 26 Ιούλ 2010 18:59
Τοποθεσία: Athens
Επικοινωνία:

Δημιουργία css menu με εικονίδια δίπλα στα links.

Δημοσίευση από NoNickeD » 28 Ιούλ 2010 23:26

Πολύ καλό και χρήσιμο αρκετά thank you :)

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης