✔ Problem (position:absolute) mit sliding Panel und CSS3 Menu, Demoseite vorhanden!

azoo

azoo

Mitglied
Hallo Screenworker!
Nach langer langer Zeit habe ich mir, ein für mich unlösbares, Problem gebastelt ;)

Ich verwende in einem neuen Projekt ein sliding Panel von Jeremie T. und ein CSS3 dropdown Menu.

Im Grunde alles keine große Sache doch aus ästhetischen Gründen möchte ich das die Links des Menus auf der gleichen Höhe sind wie das Panel, so wirkt der Panel-Effekt eher.
http://greenversand.de/playground/pos.html

Nun zum Problem, wie ihr auf dieser Demoseite feststellen könnt, klappt das Menu nur aus, wenn man mit der Maus unterhalb des Links fährt und nicht über den Linktext.

Dieses Problem liegt an dem Panel CSS und wahrscheinlich an der position:absolute Vergabe in selbiger, vermutet ein Ahnungsloser ;)

Beobachtet man die genaue Stelle, ab wann das Mouse Event wirkt, ist es genau die untere Linie des Panels und nicht der Linktext.

Ich würde wirklich ungerne das Menu tiefer setzen und hoffe das Ihr mir bei diesem Problem helfen könnt.
Also, hier noch mal der Link der Demoseite:
http://greenversand.de/playground/pos.html

Gruß Markus
 
Zuletzt bearbeitet:
Naja. Einmal neu wäre gut.

Du musst die Stapelreihenfolge von li ändern.

#menu li {
z-index:99;
}

Der Wert ist willkürlich.
 
Naja, ich finde es etwas unübersichtlich. Meine Empfehlung ist eine weitere Datei anlegen und ganz in Ruhe eine neue Topbar erstellen.
 
Ich habe die Demoseite gestern nur eben fix angelegt um euch das zu demonstrieren, in mein Projekt kann ich nicht verlinken da es nicht öffentlich ist.
Besteht also keine Notwendigkeit, dachte die Bezeichnung "Demoseite" würde das erklären...
 
Wenn ich den Wert des z-index von Menü höher setze als den Wert des Panels, geht es zwar aber ich sehe dann trotz aufgeklappten Panel das Menu ;(
So sollte es dann doch nicht sein, kann man da noch etwas tricksen?

Gruß Markus
 
Na dann mach es mal so
Code: 
/* sliding panel */
#toppanel {
    position: absolute;   /*Panel will overlap  content */
    /*position: relative;*/   /*Panel will "push" the content down */
    top: 0;
    width: 100%;
                                                                  weg damit ->  z-index: 999;
    text-align: center;
   /* margin-left: auto;
    margin-right: auto;*/
}

#panel {
	width: 100%;
	height: 270px;
	color: #999999;
	background: #272727;
	overflow: hidden;
	position: relative;
	                                                                z-index: 1;
	display: none;
}

Den Indexwert bei #menu li wieder entfernen. Dann sollte es funktionieren. Zumindestens bei mir funktionierts.
 
Habe #toppanel und #panel geändert und z-index bei menu li entfernt, nun sind wir wieder bei dem Problem in meinem Ausgangspost.
Der Link reagiert erst unterhalb des Text.

Gruß Markus

Ps: Hab die Demo mal mit geändert, auch dort geht es bei mir nicht.
 
Zuletzt bearbeitet:
So scheint es zu klappen! Ich übernehme das gleich mal ins andere Projekt und hoffe das es nun die Lösung war :) Danke nochmals für deine Hilfe!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück