Css3 Smooth Slideout Menu Bar For Blog 2013
Γεια σας παιδιά! Εδώ θα μοιραστώ μαζί σας ένα πολύ ωραίο menu και πολύ βολικό εμφανίζεται μονο όταν το βελάκι περνάει από πάνω. Μπορείτε να δείτε και το DEMO και θα καταλάβετε.
Αντιγράψτε τον παρακάτω κώδικα:
<style>
/* The CSS Code for the menu starts here foulscode.blogspot.gr */
ul.nav8 {
list-style:none;
height:120px;
margin:0;
padding:0;
}
ul.nav8 table {
border-collapse:collapse;
width:0;
height:0;
margin:-1px 0 -5px -1px;
}
ul.nav8 > li {
float:right;
height:120px;
width:40px;
position:relative;
overflow:hidden;
-webkit-transition-duration:.5s;
-moz-transition-duration:.5s;
-o-transition-duration:.5s;
}
* html ul.nav8 > li {
width:auto;
}
ul.nav8 > li a.ie6 {
float:left;
height:120px;
width:39px;
position:relative;
overflow:hidden;
}
ul.sub {
list-style:none;
height:120px;
width:600px;
background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}
ul.sub li {
float:left;
}
ul.sub li:first-child {
margin-left:45px;
}
ul.sub li a {
display:block;
width:110px;
height:120px;
float:left;
overflow:hidden;
position:relative;
text-decoration:none;
color:#000;
}
ul.sub li a b {
font-size:14px;
display:block;
padding:15px 15px 5px;
}
ul.sub li a b:hover {
font-size:16px;
color:#FF0000;
display:block;
padding:15px 15px 5px;
}
ul.sub li a p {
font-size:12px;
display:block;
margin:0;
padding:0 10px;
}
ul.sub li a p:hover {
font-size:13px;
display:block;
margin:0;
padding:0 10px;
}
ul.nav8 > li:hover {
width:600px;
}
ul.nav8 > li a.ie6:hover {
direction:ltr;
width:600px;
}
ul.sub li a:hover i {
opacity:1.0;
}
</style>
<ul class="nav8">
<li>
<!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="http://www.foulscode.blogspot.gr"><b>Home</b><p>custom description here</p><i></i></a></li>
<li><a href="http://www.foulscode.blogspot.gr"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
<li><a href="http://www.foulscode.blogspot.gr"><b>Support</b><p>custom description here</p><i></i></a></li>
<li><a href="http://www.foulscode.blogspot.gr"><b>About</b><p>custom description here</p><i></i></a></li>
<li><a href="http://www.foulscode.blogspot.gr"><b>Back</b><p>custom description here</p><i></i></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
DEMO
Αλλάξτε το URL, τον τίτλο, και το κείμενο σας.
Αποθήκευση και είναι έτοιμο.
θα μας βοηθήσετε αν το μοιραστείτε με τους φίλους σας!
Σχόλια