Δημιουργία μενού πλοήγησης με τα CSS3
Πρόσφατα είδαμε πως μπορούμε να δημιουργήσουμε ένα μενού πλοήγησης με το Adobe Photoshop. Σε αυτό το βοήθημα, θα δούμε βήμα βήμα πως μπορούμε χρησιμοποιόντας την HTML και τα CSS να μετατρέψουμε το γραφικό μας σε πλήρες λειτουργικό μενού.
Σε προηγούμενο βοήθημα είδαμε πως μπορούμε να δημιουργήσουμε ένα μενού πλοήγησης στο Photoshop. Ας μετατρέψουμε τώρα αυτό το γραφικό σε λειτουργικό μενού με html και css.
Τι θα χρειαστούμε
Για την δημιουργία του μενού θα χρειαστούμε τα εξής:
- Την εικόνα bg.jpg για το φόντο
- Ένα μικρό πλαίσιο
- και σκιά
HTML
Δημιουργούμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menu</title> <link href="style.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> <body> <div id="nav-menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Freebies</a></li> <li><a href="#">Services</a></li> </ul> </div> </body> </html>
CSS
Ας δώσουμε ζωή στο μενού μας.
Δημιουργούμε ένα αρχείο και το ονομάζουμε style.css. Γράφουμε τον εξής κώδικα:
#nav-menu{
background: url(bg.jpg) no-repeat;
width: 901px;
height: 62px;
border: 1px solid #000000;
border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#nav-menu ul{
list-style: none;
padding: 0;
margin: 0;
width: 901px;
height: 62px;
}
#nav-menu li{
float: left;
margin: 0 0.15em;
}
#nav-menu li a{
height: 4em;
line-height: 3.6em;
float: left;
width: 6.7em;
display: block;
color: #ffffff;
text-decoration: none;
text-align: center;
}
#nav-menu li a:hover{
background-color: rgba(0, 0, 0, 0.2);
height: 60px;
}
Επίσης, δημιουργούμε ένα ακόμα αρχείο με το όνομα ie.css και γράφουμε:
#nav-menu{
border: none;
}
#nav-menu li a:hover{
background-color: #000;
}
(αυτό θα βελτιώσει την εμφάνιση του μενού στον Internet Explorer)
Τελικό Αποτέλεσμα
Thanks!!
tha prospathisw na to ftiaksw na upostirizei kai parent items