Auch wenn es sich nicht wirklich um ein Template handelt, da diese Vorlage keinerlei Design mitbringt, so ist es trotzdem eine Vorlage mit der ihr eine Seite mit Dockmenü erstellen könnt.
Ich habe in der Vorlage insgesamt 7 Seiten eingebaut, die entweder erweitert oder verringert werden müssen.
Für die Anpassung des Dock-Menüs werden jedoch Grundkenntnisse in HTML und CSS benötigt.

Hier.... geht's zum Demo!

Wer Interesse hat, kann sich das Archiv hier.... herunter laden.

Wer das Menü anpassen möchte, der findet im Archiv bei den Vorlagen die Seite "dock". Diese Seite besteht aus einem HTML-Baustein, der den Code für das Dock-Menü beinhaltet.
Doch fangen wir erst einmal mit den Button des Menüs an. Ihr benötigt Button mit Spiegelung, in einer Größe von ca. 150 x 150 Pixeln, wobei die Button rechts und links Luft benötigen, dieses ergibt später den Abstand zwischen den Button im Menü.

Beispiel:


Die Button heissen button01.png bis button07.png und sind über die Seite x-import im Archiv eingebunden. Wer jetzt versautes denkt, der wird verkloppt . Den Seitennamen habe ich mit dem x versehen, damit die Seite am Ende der Auflistung steht. Der Einfachheit halber würde ich die Namen der Button so lassen, damit sowenig wie möglich am Code geändert werden muss. Ihr könnt die Bilder über die Seite x-import im Archiv integrieren.

Das Anpassen des Codes:
Es gibt zwei Bereiche die fürs Dock wichtig sind. Der Bereich für die Links und Button, sowie den Bereich für die Anpassung des Dockmenüs (Größe und Verhalten).

Links:

<a class="dock-item2" href="index.html" ><span>Home</span><img src="button01.png" alt="Home" /></a> 
<a class="dock-item2" href="site2.html" ><span>Seite 2</span><img src="button02.png" alt="Seite 2" /></a>
<a class="dock-item2" href="site3.html" ><span>Seite 3</span><img src="button03.png" alt="Seite 3" /></a>
<a class="dock-item2" href="site4.html" ><span>Seite 4</span><img src="button04.png" alt="Seite 4" /></a>
<a class="dock-item2" href="site5.html" ><span>Seite 5</span><img src="button05.png" alt="Seite 5" /></a>
<a class="dock-item2" href="site6.html" ><span>Seite 6</span><img src="button06.png" alt="Seite 6" /></a>
<a class="dock-item2" href="site7.html" ><span>Seite 7</span><img src="button07.png" alt="Seite 7" /></a>
 

href="site2.html" - gibt den Link zu Seite in eurem Projekt an und muss angepasst werden.
<span>Home</span> - der Text erscheint über dem Button

Größe / Verhalten:

<!--dock menu JS options -->
<script type="text/javascript" >
	$(document).ready(
		function()
		{
			$('#dock2').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container2',
					itemWidth: 80,
					proximity: 100,
					alignment : 'left',
					valign: 'bottom',
					halign : 'center'
				}
			)
		}
	);
</script>
 
 

itemWidth: 80, - bestimmt die Ausgangsgröße der Button
maxWidth: 50, - bestimmt die Vergrößerung der Button
proximity: 100, - bestimmt das Verhalten des Dochmenüs. Je höher der Wert ist, umso fließender verhält sich das Menü. Setzt man diesen Wert auf Null, dann ist das Menü starr.

Wer die Text-Farbe des Menüs anpassen möchte, der kann das in der CSS-Datei dock.css durchführen.

a.dock-item2 {
	display:block;
	font-weight:bold;
	font-style:normal;
	font-variant:normal;
	font-size:16px;
	line-height:normal;
	font-family:Arial, Helvetica, sans-serif;
	width:40px;
	color:#000000;
	bottom:10px;
	position:absolute;
	text-align:center;
	text-decoration:none;
	margin-right:20px;
}
 
 

color:#000000; - gibt die Textfarbe an.

Viel Spass beim Tüfteln.

Das existiert schon aus iWeb-Zeiten. Das war glaube ich eines der ersten Dinge, welches ich in iWeb integriert habe. Das Menü habe ich im Web gefunden und in iWeb eingebunden. Jetzt habe ich es überarbeitet und in Web Acappella integriert. Viele, viele bunte Smarties :D.

Jo,
cool, da kann man ja mal ein Design drauf aufsetzen, trozdem ist das hier genau richtig,

mercy Didi

Zitat von Grischabock im Beitrag #6

---

Hallo, habe gerade deine Spitzen Demo gesehen. Natürlich das Archiv direkt herunter geladen und in WebAcappella importiert. Wenn ich aber die Seite Prüfe dann habe ich da kein Dock sondern nur alle Buttons Ausfgereiht und unten dran steht dann... Seite1, Seite2 ect. Hat da jemand ein Feedback?

Gruss Grischabock

---