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

Μέσα στο 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

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  

×