CSS | Δημιουργία του μενού

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

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

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

CSS | Δημιουργία του μενού

Δημοσίευση από manolism » 12 Μαρ 2010 10:35

Προηγούμενα βοηθήματα

Βοήθημα 1ο. Προετοιμασία για την ανάπτυξη της σελίδας
Βοήθημα 2ο. Δημιουργία της περιοχής Header

Μετά από αρκετές ημέρες συνεχίζουμε τη σειρά των βοηθημάτων με τη δημιουργία του μενού.

Μέσα στο css αρχείο μας εισάγουμε τον παρακάτω κώδικα:

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

#smashnav{
width:960px; 
height:35px;
background: url(images/bluewax_bottom.gif) repeat-x bottom left;
font-family:Verdana, Geneva, sans-serif; 
font-size:11px;
font-weight:bold;
float:left; 
margin-top:26px
}

#smashnav ul{
margin:0;
padding:0;
list-style-type:none;
float:left;
}

#smashnav ul li{
float:left;
margin:0 1px;
}

#smashnav ul li a{
display:block;
float:left;
color:#000;
text-decoration:none;
padding:0 0 0 12px;
height:35px;
line-height:290%;
}

#smashnav ul li a span{
padding:0 12px 0 0;
}

#smashnav ul li a:hover,.corner #smashnav ul li a.current{
color:#fff;
background: url(images/bluewax_navtopleft.gif) no-repeat top left;
}

#smashnav ul li a:hover span,.corner #smashnav ul li a.current span{
display:block;
width:auto;
background:#1D6893 url(images/bluewax_navtopright.gif) no-repeat top right; 
height:35px;
}
Το #smashnav είναι το κυρίως div που θα περιέχει το μενού.
Το #smashnav ul είναι οι ιδιότητες της λίστας του μενού
Το #smashnav ul li είναι οι ιδιότητες του κάθε στοιχείου της λίστας
Το #smashnav ul li a είναι οι ιδιότητες των links της λίστας
Το #smashnav ul li a span εφαρμόζεται σε όλα τα στοιχεία της λίστας και αφήνει δεξί εσωτερικό περιθώριο 12px.
Το #smashnav ul li a:hover,.corner #smashnav ul li a.current τοποθετεί το αριστερό background image όταν ο δείκτης του ποντικιού είναι πάνω από ένα στοιχείο της λίστας.
Το #smashnav ul li a:hover span,.corner #smashnav ul li a.current span τοποθετεί το δεξί background image όταν ο δείκτης του ποντικιού είναι πάνω από ένα στοιχείο της λίστας.

Στο Html αρχείο μας και κάτω από το div Contact εισάγουμε τον παρακάτω κώδικα:

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

<div class="corner">  	
	<div id="smashnav">
	<ul>
	<li><a href="#" title="" class="current"><span>HOME</span></a></li>
	<li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li>
	<li><a href="#" title=""><span>OUR SERVICES</span></a></li>
	<li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li>
	<li><a href="#" title=""><span>BLOG</span></a></li>
              <li><a href="#" title=""><span>CONTACT US</span></a></li>
	</ul>
</div>
</div>
Οπότε θα έχουμε το παρακάτω:

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

<body>
<div id="container">
<div id="header">
<div id="logo">Smashing DZine</div>
<div id="contact">
<p class="btext">+971 55 7457383</p>
<p>If you have any query, feel free to call us</p>
</div>
   <div class="corner">  	
	<div id="smashnav">
	<ul>
	<li><a href="#" title="" class="current"><span>HOME</span></a></li>
	<li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li>
	<li><a href="#" title=""><span>OUR SERVICES</span></a></li>
	<li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li>
	<li><a href="#" title=""><span>BLOG</span></a></li>
    <li><a href="#" title=""><span>CONTACT US</span></a></li>

	</ul>
</div>
</div>
</div>
</div>
</body>
Παρατηρούμε ότι το στοιχείο Home έχει την class="current" που σημαίνει ότι είναι το ενεργό link.

LIVE DEMO

Απάντηση

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

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

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