Css3 Smooth Slideout Menu Bar For Blog 2013
Σελίδα 1 από 1 • Μοιραστείτε
Γεια σας παιδιά! Εδώ θα μοιραστώ μαζί σας ένα πολύ ωραίο menu και πολύ βολικό εμφανίζεται μονο όταν το βελάκι περνάει από πάνω.
- Κώδικας:
<style>
/* The CSS Code for the menu starts here greekport.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://greeceport.malware-site.www"><b>Home</b><p>custom description here</p><i></i></a></li>
<li><a href="http://greekport.gr"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
<li><a href="http://greekport.gr"><b>Support</b><p>custom description here</p><i></i></a></li>
<li><a href="http://greekport.gr"><b>About</b><p>custom description here</p><i></i></a></li>
<li><a href="http://greekport.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>
Αλλάξτε το URL, τον τίτλο, και το κείμενο σας.
Αποθήκευση και είναι έτοιμο.
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης