Principală » Meniu » Meniul stil Dock pentru site-uri

Meniul stil Dock pentru site-uri

Demo:





Dupa <head> puneti urmatoarele coduri :
Code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js' type='text/javascript'/>


Apoi in CSS puneti :
Code
/* Menu Dock
----------------------------------------------- */
.dock {
text-align: center;
height: 60px;
position: relative;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
.dockItem img {
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}


Si inde doriti sa apara meniul puneti :
Code
<div id="dock" class="dock">
<div class="dockContainter">

<a class="dockItem" href="URL de legatura"><img src="http://img686.imageshack.us/img686/261/iconhome.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img412.imageshack.us/img412/2995/iconrss.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img695.imageshack.us/img695/3296/icontwitter.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img412.imageshack.us/img412/1619/iconfacebook.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img412.imageshack.us/img412/946/iconpicasa.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img412.imageshack.us/img412/7628/icon009.png"/><span>Titlu</span></a>

<a class="dockItem" href="URL de legatura"><img src="http://img695.imageshack.us/img695/2604/iconhelp.png"/><span>Titlu</span></a>

</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)

}
);

</script>





Voturi : 0 | Rating : 0.0


Total comentarii : 0
Doar utilizatorii înregistraţi pot adăuga comentarii
[ Înregistrare | Logare ]

Abonare

Aboneaza-te gratuit si vei primi noi template-uri prin email !

Introduceti mai jos adresa de email :



Google Plus

Mini-Chat

ОК

Statistica


Total online: 1
Vizitatori: 1
Utilizatori: 0