Meniurile Dock sunt stilul caracteristic calculatoarelor Mac şi sunt extrem de atractive pentru utilizator prin felul în care se modifica iconurile atunci când trecem mouse-ul peste ele. Nu sti ce vreau sa spun?
Uită-te la cele doua meniuri care se află in antetul acestui blog.(un meniu normal si unul cu efect jQuery) vezi exemplul
aici...Tine cont de faptul că, dacă ai mai multe script-uri instalate pe blog pentru a forma copertine meniul nu funcţionează.
Dupa ce am inteles despre ce este vorba continuam cu instalarea. Mergem la
Aspect -> Editare HTML si cautam linia
<head> imediat dupa adaugam codul urmator:
<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'/>
Acum inainte de linia
]]></b:skin> adaugam codul de mai jos:
/* 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 in ultimul rand mergem la
Aspect alegem un
Element HTML/Javascript si adaugam codul de mai jos:
<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>
Schimba "URL de legatura" cu URL-ul dorit de tine ca si "Titlu" cu denumirea care vrei sa apara vizibil in meniu.
Va explic acum cum se poate modifica toate sau o parte din culoarea unui intrare. Acest lucru este foarte util pentru a evidenţia orice cuvânt în titlu, sau să diferenţieze în mod clar o intrare de alta. Puteţi vedea în titlul acestui post un exemplu.
