Φτιάχνοντας το μενού

[Anastasis 48]

Στο μάθημα αυτό θα δούμε πως θα στήσουμε το μενού με τις επιλογές μέσα στο div navigation. Πρώτα θα γράψουμε στο css αρχείο το παρακάτω:

 

κώδικας:

#menu {         margin: 0;         padding: 0;         list-style-type: none; }

Σε αυτό το div δεν έχουμε κανένα εσωτερικό ή εξωτερικό περιθώριο καθώς επίσης λέμε ότι η οριζόντια λίστα που θα χρησιμοποιήσουμε δεν θα έχει κανένα τύπο.
 

κώδικας:

#menu li {   display: inline;   padding-right: 15px;   padding-left: 17px; }

Εδώ με την επιλογή li ορίζουμε ότι η λίστα μας θα είναι οριζόντια καθώς επίσης και ότι οι επιλογές μεταξύ τους θα έχουν απόσταση αριστερά 17px και δεξιά 15px.
 

κώδικας:

#menu a:link{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#ffffff; text-decoration: none; }

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

κώδικας:

#menu a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#0099FF; text-decoration:underline; }

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

κώδικας:

#menu a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:# FFFFCC; text-decoration: none; }

Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links που έχουμε επισκεφτεί στο μενού.
 

κώδικας:

#menu a:active { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:# 99CCFF; text-decoration: none; }

Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links που είναι ενεργά στο μενού.

Στην συνέχεια θα προσθέσουμε το παρακάτω μέσα στο div navigation

κώδικας:

<ul id="menu"> <li><a href=" #"  title="Home">Home</a></li> <li><a href=" #"  title="Portfolio">Portfolio</a></li> <li><a href=" #"  title="Gallery">Gallery</a></li> <li><a href=" #"  title="Tutorials">Tutorials</a></li> <li><a href=" #"title="Donate">Donate</a></li> <li><a href=" #"  title="Forum">Forum</a></li> <li><a href=" #"  title="About">About</a></li> <li><a href=" #"  title="Admin panel">Admin panel</a></li>    <li><a href=" #"  title="Contact">Contact</a></li>      </ul>

Επίσης εδώ έχουμε χρησιμοποιήσει και το:

κώδικας:

title="Home"

το οποίο δίνει τίτλο στην επιλογή μας ώστε να είναι πιο φιλικό στις μηχανές αναζήτησης καθώς επίσης και όταν πηγαίνει το ποντίκι μας πάνω του να βγάζει το γνωστό κίτρινο ταμπελάκι.
Live demo