Πως να δημιουργήσετε μενού με CSS Sprites

08 Μαρ 2010 | CSS

5 σχόλια


Web design blog » CSS » Πως να δημιουργήσετε μενού με CSS Sprites
photoshop-design

Με το Tutorial “πως να δημιουργήσετε μενού με CSS Sprites” θα δείτε τη διαδικασία ανάπτυξης μενού με τη χρήση μόνο μιας εικόνας CSS Sprite. Είναι μια απλή αλά κομψή λύση για τις περισσότερες ιστοσελίδες. Τα CSS Sprites ήταν μια από τις στρατηγικές σχεδιασμού όπου αρχικέ με βοήθησε να χρησιμοποιώ ποιο έξυπνα την HTML. Για όσους από εσάς βλέπετε αυτή την τεχνική για πρώτη φορά σήμερα, ελπίζω να πετύχετε το ίδιο αποτέλεσμα με το δικό μου.

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

Δείγμα

Κατεβάστε

Ο στόχος

Το CSS Sprite θα μειώσει τις HTTP αιτήσεις και θα αύξηση την ταχύτητα φορτώματος της σελίδας. Για περισσότερες λεπτομέρειες σχετικά με τα CSS Sprites ρίξτε μια ματιά στο άρθρο του Chris Coyier με θέμα CSS Tricks. Εξηγεί την ευρύτερη χρήση των CSS Sprites, αλλά σε αυτό το Tutorial θα εστιάσουμε στη δημιουργία του μενού με απλά βήματα.

Σχεδιάστε το μενού

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

Αγαπήστε τα πλέγματα

Οι χάρακες και τα σημεία είναι οι καλύτεροι σας φίλοι όταν δουλεύεται με CSS Sprites. Για να έχετε το πλεονέκτημα των οδηγών στο Photoshop, ενεργοποιήστε τους από το μενού View > Rulers. Αφού έχετε ενεργοποιήσει τους χάρακες μπορείτε να δημιουργήσετε ένα νέο οδηγό κάνοντας Click στον χάρακα και μετά σέρνοντας προς το χώρο σχεδίασης. Οι οδηγοί μπορούν να χρησιμοποιηθούν για να στοιχίσετε το CSS Sprite. Διαφορετικά μπορείτε να ενεργοποιήσετε το πλέγμα σχεδίασης από το μενού View > Show > Grid.

Προκειμένου η τοποθέτηση να λειτουργήσει με το CSS, θα πρέπει να γνωρίζετε την ακριβή θέση κάθε στοιχείου μέσα στο Sprite. Εγώ έχω επιλέξει ένα σύστημα μέτρησης αντί να τοποθετώ τα στοιχεία στο Sprite σε αυθαίρετες θέσεις.

Για να το θέσω διαφορετικά, προτιμώ να θυμάμαι διαστάσεις όπως 100px, 200px, κλπ. αντί να θυμάμαι διαστάσεις όπως 101px, 342px, κλπ. Μοιράζοντας το Sprite σε ένα λογικό πλέγμα, κάνει τις μελλοντικές αλλαγές σημαντικά ποιο ανώδυνες και συχνά χρειάζεται λιγότερη προσαρμογή. Μπορείτε να βρείτε την εικόνα που χρησιμοποιώ για το Sprite στο τέλος του άρθρου.

Δομήστε την HTML

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="Nikos Merianos" />

	<title>CSS Sprites Menu</title>

    <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>
    <ul id="menu">
        <li class="home">
            <a href="#" class="selected">
                Αρχική
            </a>
        </li>
        <li class="blog">
            <a href="#">
                Blog
            </a>
        </li>
        <li class="forum">
            <a href="#">
                Forum
            </a>
        </li>
    </ul>
</body>
</html>

Μερικά λόγια για τη βελτιστοποίηση μηχανών αναζήτησης

Το μενού πλοήγησης που δημιουργούμε θα δομηθεί ως λίστα για να είναι Semantic Code. Να θυμάστε πως τα στοιχεία της λίστας θα προβάλουν μόνο εικόνες. Οι ιδιότητες overflow και indent θα οριστούν σε hidden και σε μια αρνητική τιμή αντίστοιχα για να αποκρύψουν το κείμενο από το χρήστη. Δεν θέλουμε να τα αφήσουμε κενά γιατί έτσι θα δώσουμε στις μηχανές αναζήτησης λιγότερο περιεχόμενο για να διαβάσουν. Παρόλο που οι εικόνες μας θα έχουν κείμενο οι μηχανές αναζήτησης δεν είναι σε θέση να το αναγνωρίσουν.

Προσέχετε ! : όσο τα σχέδια είναι όλο και ποιο πολύ βασισμένα σε γραφικά, είναι ωραίο να χρησιμοποιούμε εικόνες (με μέτρο) στη θέση του κειμένου για στοιχεία όπως το μενού, τα Benners, τα κουμπιά, κλπ. Αν επιλέξετε να κάνετε κάτι τέτοιο θα πρέπει οπωσδήποτε να έχετε κατά νου της μηχανές αναζήτησης.

Τοποθετώντας τις εικόνες με CSS

Αντιγράψτε τον κώδικα που ακολουθεί στο αρχείο του CSS για το έργο. Η επεξήγηση ακολουθεί.

#menu
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    clear: both;
}

#menu li
{
    overflow: hidden;
    text-indent: -9999px;
    display: inline;
    float: left;
    margin-right: 10px;
}

#menu li a
{
    background: url('images/sprite.jpg') no-repeat;
    width: 100%;
    height: 100%;
    display: block;
}

/* Home Button */
#menu li.home
{
    width: 115px;
    height: 70px;
}

#menu li.home a
{
    background-position: -5px -5px;
}

#menu li.home a:hover
{
    background-position: -5px -65px;
}

#menu li.home a.selected
{
    background-position: -5px -135px;
}

/* Blog Button */
#menu li.blog
{
    width: 120px;
    height: 70px;
}

#menu li.blog a
{
    background-position: -125px -5px;
}

#menu li.blog a:hover
{
    background-position: -125px -65px;
}

#menu li.blog a.selected
{
    background-position: -125px -135px;
}

/* Forum Button */
#menu li.forum
{
    width: 160px;
    height: 70px;
}

#menu li.forum a
{
    background-position: -250px -5px;
}

#menu li.forum a:hover
{
    background-position: -250px -65px;
}

#menu li.forum a.selected
{
    background-position: -250px -135px;
}

Αλλάξτε την εικόνα με την ιδιότητα background-position

Η ιδιότητα background-position στο CSS σας επιτρέπει να ορίσετε ένα ζευγάρι συντεταγμένων για την εικόνα του background. Το πλεονέκτημα αυτής της ιδιότητας είναι πως μπορείτε να χρησιμοποιήσετε μόνο μια εικόνα για το background και ορίσετε ποιο τμήμα της θα είναι ορατό κάθε φορά σε διαφορετικά στοιχεία της HTML. Αυτή η ιδιότητα είναι η ραχοκοκαλιά των CSS Sprites.

Θα θυμάστε πως σε κάθε αντικείμενο της λίστας ορίσαμε μια διαφορετική κλάση. Αυτό μας επιτρέπει να επεξεργαστούμε της ρυθμίσεις της ιδιότητας background-position για κάθε στοιχείο του μενού ξεχωριστά. Η εικόνα έχει ήδη οριστεί στην ετικέτα της HTML για τους συνδέσμους (a), έτσι η ρυθμίσεις που πρέπει να συμβούν είναι μόνο για της συντεταγμένες κάθε στοιχείου του μενού ξεχωριστά. Ειδικά σε πολύ μεγάλα έργα, αν διατηρείτε χαμηλό των αριθμό των περιττών στιλ είναι εφικτό να έχετε μια λογική και καθαρό κώδικα.

Χρησιμοποιώντας αυτή τη μέθοδο δημιουργήσαμε τρις διαφορετικές καταστάσεις για το μενού:

  1. Εξ ορισμού προβολή
  2. Hover που ενεργοποιείτε όταν το ποντίκι περνάει από πάνω.
  3. Επιλεγμένο στοιχείο που ενεργοποιείτε για να δείξει σε ποια σελίδα του μενού είμαστε. Μπορεί να ενεργοποιηθεί με την προσθήκη μιας ειδικής κλάσης «selected»

Αν δεν σχεδιάζετε κάτι ασυνήθιστο (πχ μενού πολλαπλών επιπέδων) με την τεχνική αυτή θα εξοικονομήσετε αρκετό χρόνο.

Ολοκληρώνοντας

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

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

Δείγμα

Κατεβάστε

Περισσότερα για τον CorfuGmr

CorfuGmr

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








Σχόλια



Μειώστε τα Http Requests « Web Resources

1 Ιουλίου 2010

[...] CSS Sprites [...]




Odys!

31 Ιουλίου 2010

Ωραίο άρθρο. Μία ερώτηση έχω. Γιατί τα Home, Blog, Forum τα έκανες class?

Μοναδικά στοιχεία είναι άρα καλό θα ήταν να είναι Id ώστε να μπορεί να τα χειριστεί και η javascript.




CorfuGmr

31 Ιουλίου 2010

Στην πραγματικότητα δεν υπάρχει κάποιος συγκεκριμένος λόγος που έχει χρησιμοποιηθεί η ιδιότητα Class αντί της ιδιότητας id.

Ωστόσο, η διαχείριση τον στοιχείων του μενού μπορεί να γίνει μέσω της JavaScript ακόμα και με τη χρήση της ιδιότητας Class.

Τέλος αν νομίζεις πως είναι ποιο εύκολο για εσένα να διαχειριστείς το μενού με την ιδιότητα id μπορείς να την χρησιμοποιήσεις ελεύθερα, μιας και δεν υπάρχει κάποιος τεχνικός περιορισμός




thanasis

21 Δεκεμβρίου 2011

Έχω ένα blog, υπάρχει κάποια περίπτωση να με βοηθήσεις να το βάλω σε αυτό γιατί έχω κολλήσει με το μενού, είναι απλά απίστευτο, αν ναι στείλε μου email!!!
Ευχαριστώ για το χρόνο σου.




CorfuGmr

23 Δεκεμβρίου 2011

Καλή σου ημέρα thanasis.

Δυστυχώς δεν προλαβαίνω να σε βοηθήσω με την εγκατάσταση του συγκεκριμένου μενού στο ιστολόγιο σου, γιατί αναπτύσσω αυτή την περίοδο ένα Project που είναι πολύ μεγάλο και απαιτεί πάρα πολλές ώρες από το καθημερινό μου πρόγραμμα, με αποτέλεσμα να μην έχω ελεύθερο χρόνο ούτε για εμένα.

Όπως και να έχει, αν το συγκεκριμένο Tutorial νομίζεις πως είναι δύσκολο, μπορείς να προσπαθήσεις με ένα από τα ακόλουθα Tutorials για μενού με Sprites.

http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
http://www.alistapart.com/articles/sprites2/
http://net.tutsplus.com/tutorials/html-css-techniques/use-sprites-to-create-an-awesomeness-filled-navigation-menu/


Αφήστε ένα σχόλιο

Υποβολή σχολίου

 

RSS για τα σχόλια σε αυτό το άρθρο. TrackBack URL

Αναζήτηση







 

Newsletters

Newsletters από το Web Resources


Μεταστοιχεία

Αρχείο


Powered by Xtnd.it group

^
Top
Stop ACTA