Anastasis 48 Report post Posted November 10, 2016 Μέσα στο 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 Quote Share this post Link to post Share on other sites
