Ich habe versucht, mir das Wissen zum Thema Rollover-Menü anzueignen und das Prinzip auf meinen Quellcode anzuwenden. Leider funktioniert das nicht, was mich zu diesem Thema veranlaßt hat.
Worum es mir geht, ist, dass mir jemand das Prinzip so erklärt, dass bei mir der Groschen fällt. Eine Testseite kann ich nicht bieten, da die Seite (da noch in der Entwicklungsphase) auf (m)einem lokalen Server läuft. Aber im folgenden sind die Codebausteine zu finden, die für die Navigation verantwortlich sind.
Die HTML-Code aus der index.php:
Der CSS-Code:
Das bzw. mein Problem ist, dass es im Internet zwar schon einige Artikel dazu gibt. Jedoch ist leider das CSS immer anders aufgebaut.
Was bei meiner Navigation nicht funktioniert, zeigt die Grafik. Grafik #2 zeigt die Grafik, wie ich die Navigation-Buttons und deren Zustände abgespeichert habe.
Beim Menüpunkt "Punkt 2" fehlt der aktive Zustand, da Punkt 2 ja nicht angeklickt werden soll. Dieser Punkt soll bei Hover ja nur aufklappen. Ich hoffe, dass das ausführlich genug ist, damit ihr das Problem erfassen könnt.
Worum es mir geht, ist, dass mir jemand das Prinzip so erklärt, dass bei mir der Groschen fällt. Eine Testseite kann ich nicht bieten, da die Seite (da noch in der Entwicklungsphase) auf (m)einem lokalen Server läuft. Aber im folgenden sind die Codebausteine zu finden, die für die Navigation verantwortlich sind.
Die HTML-Code aus der index.php:
Code:
<ul id="navi">
<li><a id="punkt1" title="Punkt 1" href="index.php?page=punkt1"></a></li>
<li><a id="punkt2" title="Punkt 2" href="index.php?page=punkt2"></a></li>
<ul>
<li><a id="punkt2.1" title="Punkt 2.1" href="index.php?page=punkt2_1"></a></li>
<li><a id="punkt2.2" title="Punkt 2.2" href="index.php?page=punkt2_2"></a></li>
</ul>
<li><a id="punkt3" title="Punkt 3" href="index.php?page=punkt3"></a></li>
<li><a id="punkt4" title="Punkt 4" href="index.php?page=punkt4"></a></li>
</ul>
<?php
if(isset($_REQUEST['page'])){$page=$_REQUEST['page'];}else{$page="punkt1";}
switch($page)
{
case "punkt1":
include("punkt1.php");
break;
case "punkt2.1":
include("punkt2_1.php");
break;
case "punkt2.2":
include("punkt2_2.php");
break;
case "punkt3":
include("punkt3.php");
break;
case "punkt4":
include("punkt4.php");
break;
default:
include("punkt1.php");
}
?>Der CSS-Code:
Code:
/* -------------------------------------------------------------------------------------- */
/* --------------------------------| Navigation Main |----------------------------- */
/* -------------------------------------------------------------------------------------- */
ul#navi {
position:absolute;
top:201px;
left:177px;
}
ul#navi li {
float:left;
text-indent:-9999px;
}
ul#navi li a {
background:url(../images/menu-complete.png) no-repeat;
height:50px;
display:block;
}
/* -------------------------------------| Punkt 1 |------------------------------------- */
ul#navi #punkt1 {
width:112px;
background-position:0 0;
}
ul#navi #punkt1:hover { background-position:0 -50px; }
ul#navi #punkt1:active { background-position:0 -100px; }
/* ----------------------------------| Punkt 2 |---------------------------------- */
/* -------------------------------------------------------------------------------- */
ul#navi #punkt2 {
width:110px;
background-position:-112px 0;
}
ul#navi #punkt2:hover { background-position:-112px -50px; }
/* ul#navi #punkt2:active { background-position:-112px -100px; } */
/* ----------------------------------| Punkt 2.1 |---------------------------------- */
ul#navi #punkt2.1 {
width:110px;
background-position:-112px -100;
}
ul#navi #punkt2.1:hover { background-position:-112px -150px; }
ul#navi #punkt2.1:active { background-position:-112px -200px; }
/* ----------------------------------| Punkt 2.2 |---------------------------------- */
ul#navi #punkt2.2 {
width:110px;
background-position:-112px -250;
}
ul#navi #punkt2.2:hover { background-position:-112px -300px; }
ul#navi #punkt2.2:active { background-position:-112px -350px; }
/* -------------------------------------------------------------------------------- */
/* --------------------------------------| Punkt 3 |------------------------------------ */
ul#navi #punkt3 {
width:111px;
background-position:-222px 0;
}
ul#navi #punkt3:hover { background-position:-222px -50px; }
ul#navi #punkt3:active { background-position:-222px -100px; }
/* ------------------------------------| Punkt 4 |------------------------------------ */
ul#navi #punkt4 {
width:111px;
background-position:-333px 0;
}
ul#navi #punkt4:hover {background-position:-333px -50px; }
ul#navi #punkt4:active { background-position:-333px -100px; }Das bzw. mein Problem ist, dass es im Internet zwar schon einige Artikel dazu gibt. Jedoch ist leider das CSS immer anders aufgebaut.
Was bei meiner Navigation nicht funktioniert, zeigt die Grafik. Grafik #2 zeigt die Grafik, wie ich die Navigation-Buttons und deren Zustände abgespeichert habe.
Beim Menüpunkt "Punkt 2" fehlt der aktive Zustand, da Punkt 2 ja nicht angeklickt werden soll. Dieser Punkt soll bei Hover ja nur aufklappen. Ich hoffe, dass das ausführlich genug ist, damit ihr das Problem erfassen könnt.
Zuletzt bearbeitet:
