Antworten auf deine Fragen:
Neues Thema erstellen

Prinzip: Rollover-Menü

Biernase

Nicht mehr ganz neu hier

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:
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:

Sutefuan

Adobetiert

AW: Prinzip: Rollover-Menü

@Pionierbrigade70
was nützt dir die frage nach dem programm?
man kann den quelltext genauso gut über den normalen
texteditor erstellen... die frage is schließlich auf ein
quelltext-problem zurück zu führen und nich
programmspezifisch
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben