Meniu silul Dock pentru blogger ~ Pentru Webmasters

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.

2 comentarios:

Marius15 februarie 2012 la 17:38
Salutare Constantin .Imi poti expliac inca odata cum pot aplica aceste coduri?,deoarece tu spui :

Acum inainte de linia ]]> adaugam codul de mai jos:

Vezi codul --> [+/-]

Eu dau acolo pentru a vedea codul si ma trimite pe o pagina de cautare Google
Imi poti da mai multe detalii?
Multumesc anticipat.
RăspundețiȘtergere
Răspunsuri
Bani pe net15 februarie 2012 la 18:28
Salut Marius, ai dreptate pentru ca un script ce il aveam instalat PE BLOG, pentru a ascunde codul html nu mai functioneaza, motiv care deschidea pagina de google. Acum este inlocuit prin afisarea directa a codului, sper sa-ti fie de folos. SUCCES!
RăspundețiȘtergere
Răspunsuri