Ας ξεκινήσουμε λοιπόν με το μενού που εμφανίζεται στην πάνω περιοχή του παραθύρου.
Για αυτό το μενού έχετε ήδη κάνει αρκετή προεργασία. Θα θυμάστε σίγουρα το όμορφο φόντο που αποθηκεύτηκε ως γραφικό ενός pixel. Αυτό ακριβώς χρησιμοποιείται τώρα. Ωστόσο, πρέπει να δημιουργηθεί η κατάλληλη δομή HTML για την περιοχή του μενού. Η δομή αυτή θα μπορούσε να φαίνεται κάπως έτσι:
<div class="header"> <div class="header-top"> <h1>Ο φοροτεχνικός σας σύμβουλος</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Αρχική σελίδα</a></li> <li><a href="#">Σχετικά μαζί μας</a></li> <li><a href="#">Πώς δουλεύουμε</a></li> <li><a href="#">Επικοινωνία</a></li> <li><a href="#">Στοιχεία πνευματικής ιδιοκτησίας</a></li> </ul> </div> <div class="header-img"> </div> </div>
Για τη διαμόρφωση του φόντου, το γραφικό ενός pixel εισάγεται και επαναλαμβάνεται κάθετα τόσες φορές όσο χρειάζεται για να γεμίσει το συγκεκριμένο στοιχείο.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Στη συνέχεια μπορείτε να διαμορφώσετε το μενού. Σε αυτού του είδους τα μενού δεν υπάρχουν πρακτικά ειδικά σημεία προς προσοχή. Ουσιώδης πάντως είναι οι ακόλουθες πτυχές:
• Απόκρυψη των σημείων λίστας με list-style-type: none;.
• Εξασφάλιση ότι οι καταχωρήσεις της λίστας εμφανίζονται δίπλα-δίπλα.
Εγώ εδώ – όπως γνωρίζετε πολύ καιρό – χρησιμοποιώ έναν φοροτεχνικό που υλοποιείται μέσω ενός γραφικού. Φυσικά, σήμερα υπάρχουν πληθώρα επιλογών διαθέσιμες για μενού. Σκεφτείτε για παράδειγμα τα JavaScript Frameworks όπως το jQuery. Όλες αυτές οι επιλογές να περιγραφούν εδώ θα υπερβαίνει φυσικά το πλαίσιο. Έχουν δημιουργηθεί πλέον πολλοί online δημιουργοί, μέσω των οποίων μπορείτε να δημιουγίσετε μενού με λίγα κλικ. Έναν από αυτούς – χωρίς να κάνω κριτική για το αν είναι ο εξαιρετικότερος της κατηγορίας του – θα βρείτε στο http://www.cssmenubuilder.com/.
Εγώ τουλάχιστον έχω επιλέξει την ακόλουθη προσέγγιση:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Ουσιώδες είναι πραγματικά μόνο η κατάσταση Hover. Όταν συμβεί αυτό το γεγονός, εμφανίζεται διαφορετικό γραφικό φόντο.
Το δεξί μενού
Η ιστοσελίδα δεν διαθέτει μόνο ένα μενού στην κορυφή, αλλά εμφανίζεται και ένα στη δεξιά περιοχή του παραθύρου.
Αυτό το μενού ανήκει στην περιοχή div με κλάση content-right. Για τη φάση ανάπτυξης της σελίδας έχω τοποθετήσει μόνο ψεύτικο περιεχόμενο εκεί.
<div class="content-right"> <h2>Κύριο μενού</h2> <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> <li><a href="#">Σύνδεσμος 5</a></li> <li><a href="#">Σύνδεσμος 6</a></li> <li><a href="#">Σύνδεσμος 7</a></li> <li><a href="#">Σύνδεσμος 8</a></li> <li><a href="#">Σύνδεσμος 9</a></li> <li><a href="#">Σύνδεσμος 10</a></li> </ul>
Η περιοχή τοποθετείται αρχικά στην κατάλληλη θέση και στο επιθυμητό μέγεθος.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Συνεχίζουμε με τον ορισμό του ίδιου του μενού. Αυτή τη φορά οι καταχωρήσεις είναι κάτω από τη μια την άλλη. Συνεπώς, χρειάζεται να εξασφαλίσετε ότι τα σημεία λίστας είναι αποκρυμμένα. Η υπόλοιπη διαμόρφωση του μενού είναι στην τελική ανάλυση δική σας ευθύνη.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}Στον περιηγητή θα πρέπει να εμφανίζεται τώρα η ακόλουθη εικόνα:
Το κάτω μενού
Στο κάτω μέρος της ιστοσελίδας θα υπάρχει ένα ακόμα μενού. Εδώ στο PSD-Tutorials.de χρησιμοποιείται επίσης ένα τέτοιο μενού για να παρέχει συνδέσμους για γενικές πληροφορίες.
Στην ιστοσελίδα μας υπάρχει επιπλέον μήνυμα πνευματικών δικαιωμάτων. Και τα δύο είναι πραγματικά τυπικά για ιστοσελίδες. Αρχικά, ξανά η δομή HTML.
<div class="bottom"> <ul> <li><a href="index.html">Αρχική</a></li> <li><a href="#">Σχετικά με εμάς</a></li> <li><a href="#">Νέα</a></li> <li><a href="#">Κέντρο ελέγχου</a></li> <li><a href="#">Επικοινωνία</a></li> <li><a href="#">Αποτύπωμα</a></li> <li><a href="#">Χάρτης ιστότοπου</a></li> </ul> <p>© Πνευματικά δικαιώματα 2014 από το PSD-Tutorials.de</p> </div>
Είναι μια απλή λίστα ul. Κάθε στοιχείο της λίστας περιέχει ένα στοιχείο μενού. Κάτω από τη λίστα ul υπάρχει ένα στοιχείο p, όπου βρίσκεται το μήνυμα πνευματικών δικαιωμάτων. Αυτό που λείπει τώρα είναι φυσικά η σύνταξη CSS.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Πώς θα σχεδιάσετε το κάτω μέρος παραμένει βασικά στη διακριτική σας ευχέρεια. Χρησιμοποιώ ξανά ένα gradient χρώματος. Μπορείτε όμως επίσης να χρησιμοποιήσετε ένα απλό χρώμα φόντου ή ακόμα και τη σύνταξη CSS3 απευθείας. Ωστόσο, στην περίπτωση της γραφικής μου εκδοχής, είναι καθοριστικό να αποτραπεί η επανάληψη με το background-repeat: no-repeat;.
Κοιτάξτε πρώτα το αποτέλεσμα:
Αυτό που παρατηρείτε εδώ είναι οι λευκές γραμμές που εμφανίζονται δίπλα από τα μεμονωμένα στοιχεία του μενού. Αυτές καθορίζονται μέσω διαφόρων δηλώσεων border-left, που τελικά σημαίνει ότι οι δηλώσεις αναφέρονται στο αριστερό περιθώριο του κάθε στοιχείου.
Συνολικά, η σύνταξη για το κάτω μενού φαίνεται όπως παρακάτω:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Σε αντίθεση με το επάνω μενού, υπάρχει μια ιδιαιτερότητα εδώ. Πράγματι, στην περίπτωση του hover δεν φορτώνεται άλλο γραφικό. Ωστόσο, για να καταλάβουν οι επισκέπτες ότι περνάνε τον δείκτη του ποντικιού πάνω από ένα σύνδεσμο, τα μεμονωμένα στοιχεία υπογραμμίζονται όταν συμβαίνει το γεγονός του hover.
Στο τέλος αυτού του μαθήματος έχουν ολοκληρωθεί τα βασικά βήματα προς την ιστοσελίδα. Αυτό που λείπει τώρα είναι η αναβάθμιση της σελίδας. Περισσότερα γι' αυτό στα επόμενα μαθήματα.
