Φίλοι bloggers, τι θα λέγατε για ένα απλό μενού που μοιάζει με κρύσταλλο; Το crystal menu ...αποτελείται από κώδικα css και html !
σας δίνω το κώδικα αμέσως παρακάτω...
...και βέβαια να τα βάλετε σωστά...το καθένα στη θέση του (αν και μπορείτε στο μπλογκ σας να το βάλετε όλο σαν gadget - μας κάνει αυτή τη χάρη το blogspot)
Ο ΚΩΔΙΚΑΣ CSS: (βάλτε τον στο πρότυπο σας, ΠΑΝΩ από το </head> )
<style type="text/css">
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://lh4.googleusercontent.com/-1NCWzVxcx2U/UnlmIPwKdHI/AAAAAAAAJpo/FAII5Cb2ZRI/s249/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://lh3.googleusercontent.com/-0B1IYx89gSY/UnlmILPd6II/AAAAAAAAJpk/tN-GoH6Kung/s370/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
</style>
Ο ΚΩΔΙΚΑΣ HTML: (βάλτε το σαν gadget: HTML/Javascript)
<div class="animatedtabs">
<ul>
<li class="selected" ><a href="##" title="Home"><span>ΑΡΧΙΚΗ ΣΕΛΙΔΑ</span></a></li>
<li ><a href="##" title="photos Examples"><span>Photos</span></a></li>
<li><a href="##" title="New"><span>New</span></a></li>
<li><a href="##" title="Revised"><span>Revised</span></a></li>
<li><a href="##" title="Tools"><span>Tools</span></a></li>
<li><a href="##" title="DHTML Forums"><span>Forums</span></a></li>
</ul>
</div>
***To class="selected" δείχνει ποιο κουμπί θέλετε να είναι "ανεβασμένο" στη πρωτη σελίδα που θα διαλέξετε
***αλλάξτε τους τίτλους και τις κατηγορίες με μωβ χρώμα ...
πηγη Thanks to : http://www.dynamicdrive.com
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
σας δίνω το κώδικα αμέσως παρακάτω...
...και βέβαια να τα βάλετε σωστά...το καθένα στη θέση του (αν και μπορείτε στο μπλογκ σας να το βάλετε όλο σαν gadget - μας κάνει αυτή τη χάρη το blogspot)
Ο ΚΩΔΙΚΑΣ CSS: (βάλτε τον στο πρότυπο σας, ΠΑΝΩ από το </head> )
<style type="text/css">
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://lh4.googleusercontent.com/-1NCWzVxcx2U/UnlmIPwKdHI/AAAAAAAAJpo/FAII5Cb2ZRI/s249/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://lh3.googleusercontent.com/-0B1IYx89gSY/UnlmILPd6II/AAAAAAAAJpk/tN-GoH6Kung/s370/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
</style>
Ο ΚΩΔΙΚΑΣ HTML: (βάλτε το σαν gadget: HTML/Javascript)
<div class="animatedtabs">
<ul>
<li class="selected" ><a href="##" title="Home"><span>ΑΡΧΙΚΗ ΣΕΛΙΔΑ</span></a></li>
<li ><a href="##" title="photos Examples"><span>Photos</span></a></li>
<li><a href="##" title="New"><span>New</span></a></li>
<li><a href="##" title="Revised"><span>Revised</span></a></li>
<li><a href="##" title="Tools"><span>Tools</span></a></li>
<li><a href="##" title="DHTML Forums"><span>Forums</span></a></li>
</ul>
</div>
***To class="selected" δείχνει ποιο κουμπί θέλετε να είναι "ανεβασμένο" στη πρωτη σελίδα που θα διαλέξετε
***αλλάξτε τους τίτλους και τις κατηγορίες με μωβ χρώμα ...
πηγη Thanks to : http://www.dynamicdrive.com
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
0 σχόλια:
Δημοσίευση σχολίου