Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Anastasis

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

Recommended Posts

Στο μάθημα αυτό θα δούμε πως θα στήσουμε το μενού με τις επιλογές μέσα στο 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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×