Halbrundes Menü mit Hovereffekt
Dieses kleine Tutorial zeigt wie man ein halbrundes Menü mit einer Hintergrundgrafik und etwas CSS realisieren kann.
Beispielcode und Download der Dateien
Um ein solches Menü herzustellen muss man zunächst mit einem geeigneten Grafikprogramm den Menühintergrund zeichnen. Damit beim überfahren der Links ein Hovereffekt sichtbar wird haben die beiden Grafiken hier unterschiedliche Rottöne.
Ist die Grafik fertiggestellt, wird diese verdoppelt und neben der linken Grafik positioniert. Dann das ganze als eine GIF Datei speichern.
Erstellen des CSS und HTML Codes für das Menü:
Das wichtigste ist hier der Bereich mit den Positionsangaben (Abschnitte mit background-position) Diese müssen bei einem solchen Menü für jeden Link seperat definiert werden – bedingt durch die halbrunde Linkanordnung.
Vorteil dieser Methode ist:
Dadurch das nur eine Grafik verwendet wird entfällt ein vorladen für den Hover Effekt. Die Menügrafik wird bei Hover nur an die entsprechende Position verschoben.
CODE:
/* - - - - - - - - - - - - - - - - - - - - */
/* Menue CSS*/
/* - - - - - - - - - - - - - - - - - - - - */
#navi {
margin: 0;
padding: 0;
}
#navi a {
display: block;
width: 185px;
color: #ffffff;
font-size: 11px;
padding: 2px 0 6px 10px;
text-decoration: none;
font-weight: bold;
}
#navi a:hover {
color: #ffcc00;
text-decoration: none;
}
#navi a {
background: url(rund.gif);
background-repeat:no-repeat;
}
/* ------------------------------------- */
#navi .lna {background-position: -50px 0px;}
#navi .lnb {background-position: -50px -24px;}
#navi .lnc {background-position: -50px -48px;}
#navi .lnd {background-position: -50px -72px;}
#navi .lne {background-position: -50px -96px;}
#navi .lnf {background-position: -50px -120px;}
#navi .lng {background-position: -50px -144px;}
#navi .lnh {background-position: -50px -168px;}
#navi .lni {background-position: -50px -192px;}
#navi .lnj {background-position: -50px -216px;}
#navi .lnk {background-position: -50px -240px;}
#navi .lnl {background-position: -50px -264px;}
#navi .lnm {background-position: -50px -288px;}
#navi .lnn {background-position: -50px -312px;}
#navi .lno {background-position: -50px -336px;}
#navi .lnp {background-position: -50px -360px;}
#navi .lnq {background-position: -50px -384px;}
#navi .lnr {background-position: -50px -408px;}
#navi .lns {background-position: -50px -432px;}
#navi .lnt {background-position: -50px -456px;}
/* ------------------------------------- */
#navi .lna:hover {background-position: -50px 0px;}
#navi .lnb:hover {background-position: -331px -24px;}
#navi .lnc:hover {background-position: -331px -48px;}
#navi .lnd:hover {background-position: -331px -72px;}
#navi .lne:hover {background-position: -331px -96px;}
#navi .lnf:hover {background-position: -331px -120px;}
#navi .lng:hover {background-position: -331px -144px;}
#navi .lnh:hover {background-position: -331px -168px;}
#navi .lni:hover {background-position: -331px -192px;}
#navi .lnj:hover {background-position: -331px -216px;}
#navi .lnk:hover {background-position: -331px -240px;}
#navi .lnl:hover {background-position: -331px -264px;}
#navi .lnm:hover {background-position: -331px -288px;}
#navi .lnn:hover {background-position: -331px -312px;}
#navi .lno:hover {background-position: -331px -336px;}
#navi .lnp:hover {background-position: -331px -360px;}
#navi .lnq:hover {background-position: -331px -384px;}
#navi .lnr:hover {background-position: -331px -408px;}
#navi .lns:hover {background-position: -331px -432px;}
#navi .lnt:hover {background-position: -50px -456px;}
/* ------------------------------------- */
Der HTML Code für das Menü
Bei dieser Art Menü muss man natürlich sehen das die Links mit dem längsten Linktext mehr in die Mitte müssen.
CODE:
<div id="navi"> <a class="lna" nohref="#"> </a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnb" href="#">Link 2</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnc" href="#">Link 3</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnd" href="#">Link 4</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lne" href="#">Link 5</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnf" href="#">Link 6</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lng" href="#">Link 7</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnh" href="#">Link 8</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lni" href="#">Link 9</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnj" href="#">Link 10</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnk" href="#">Link 11</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnl" href="#">Link 12</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnm" href="#">Link 13</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnn" href="#">Link 14</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lno" href="#">Link 15</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnp" href="#">Link 16</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnq" href="#">Link 17</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnr" href="#">Link 18</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lns" href="#">Link 19</a> <img src="pixel.gif" alt="" width="242" height="3" border="0"><br> <a class="lnt" nohref="#"> </a> </div>
So schaut das Menü dann fertig aus:
Keine Kommentare vorhanden