Jeden ze staších článků na Rapidweaver.cz odkazuje na snippet DockMenu. Jak se ale v praxi ukázalo, tento snippet obsahuje HTML kód, javascript a CSS v jednom a proto je problém se zprovozněním této efektní navigace. Pete v diskuzním fóru zveřejnil podrobný postup, jak předejít potížím. V návodu je použito základní téma Aqualicious - toto doporučuji dodržet, a teprve poté, kdy se ujistíte, že navgace funguje správně, změnit na vámi požadované téma.

Překlad postupu:
1) Vytvořte nový dokument, vložte do něj stránku Styled Text, použijte téma Aqualicious, skryjte sidebar v paletce Page Inspector / Styles.
2) Stáhněte si ZIP archiv. Obrázky, které v něm najdete, uložte do složky na svém počítači a pak je odsud přetáhněte do paletky Page Inspector / Assets

POZNÁMKA: pro vkládání kódu použijte příkaz Paste as Plain Text z nabídky Edit, jinak by formátování textu (které je použito v diskuzním fóru) zamezilo správné funkci kódu.

3) Zkopírujte následující kód a vložte jej do paletky Page Inspector / Header / CSS

html {
overflow: hidden;
}

body {
background: #fff;
width: 98%;
height: 100%;
}

#dock {
position: absolute;
bottom: 5em;
width: 100%;
text-align: center;
left: 0px;
}

#dock a:visited{
text-decoration: none;
}

#dock a{
text-decoration: none;
margin: -2px;
}

#dock img {
border: none;
width: 0px;
}

#legend {
position: absolute;
bottom: 50px;
left:0px;
width: 100%;
text-align: center;
font-family: arial;
font-weight: bold;
font-size: 1em;
color: #000;
}

4) Zkopírujte následující kód a vložte jej do paletky Page Inspector / Header / JavaScript

// ===========================================================
// ------ dock menu -------
// script by Gerard Ferrandez - Ge-1-doot - February 2006
// http://www.dhteumeuleu.com
// ===========================================================

var xm = xmb = ov = 0;
var M = true;

function dock(dock, sMin, sMax)
{
this.icons = document.getElementById(dock).getElementsByTagName('img');
this.N = this.icons.length;
this.s = sMin;
this.ovk = 0;
this.pxLeft = function(o)
{
for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
return x;
}
for(var i=0;i<this.N;i++)
{
with(this.icons[i])
{
style.width = sMin+'px';
style.height = sMin+'px';
className = 'dockicon';
}
}
this.run = function()
{
with(this)
{
for(var i=0;i<N;i++)
{
var o = icons[i];
var W = parseInt(o.style.width);
if(ov && ov.className=='dockicon')
{
if(ov!=ovk)
{
ovk=ov;
document.getElementById('legend')[removed] = ov.lang;
}
if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
s = Math.min(sMax,s+1);
}
else
{
s = Math.max(s-1,sMin);
W = Math.max(W-N,sMin);
}
o.style.width = W+'px';
o.style.height = W+'px';
}
if(s >= sMax) M = false;
}
}
}
document.onmousemove = function(e)
{
if(window.event) e=window.event;
xm = (e.x || e.clientX);
if(xm!=xmb){
M = true;
xmb = xm;
}
ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
}
window.onload = function()
{
dock = new dock('dock', 48, 128);
setInterval('dock.run()', 16);
}
//-->

5) Zkopírujte následující kód a vložte jej do stránky. DŮLEŽITÉ: po vložení celý kód označte a použijte “Ignore Formatting” z nabídky Format. Pravděpodobně budete chtít odsadit menu od horního okraje, v tom případě umístěte kurzor nad kód a několikrát stiskněte klávesu Enter. Na toto odsazení naopak nesmí být aplikováno “Ignore Formatting”.

<div id="dock">
<a href="http://www.realmacsoftware.com/" target="_blank"><img src="assets/1.gif" lang="Home"></a>
<a href="http://www.realmacsoftware.com/" target="_blank"><img src="assets/2.gif" lang="My Computer"></a>
<a href="http://www.realmacsoftware.com/" target="_blank"><img src="assets/3.gif" lang="Files"></a>
<a href="http://www.realmacsoftware.com/" target="_blank"><img src="assets/4.gif" lang="Applications"></a>
<a href="http://www.realmacsoftware.com/" target="_blank"><img src="assets/5.gif" lang="Chat"></a>
<a href="http://www.realmacsoftware.com/" target="_blank"><img src="assets/6.gif" lang="Sound"></a>
<a href="http://www.realmacsoftware.com/" target="_blank"><img src="assets/7.gif" lang="Printers"></a>
<a href="http://www.realmacsoftware.com/" target="_blank"><img src="assets/8.gif" lang="Trash"></a>
<a href="http://www.realmacsoftware.com/" target="_blank"><img src="assets/9.gif" lang="Help"></a>
</div>
<div id="legend"></div>

6) Klikněte na Preview a užijte si efekt!

Ještě jedna poznámka: navigace by měla bez problému fungovat ve Stacks, použijte textový rám.

tag: javascript, snippet, ikonky, menu, zoom