"Pop-Out" Menü bei anklicken

jeanorwin · 11.12.2011, 21:24

Guten Abend,
ich habe (mal wieder) ein CSS Problem, bei dem ich etwas Hilfe gebrauchen könnte. Erst einmal ein Link zur Seite, auf der das Problem besteht:

http://jeanorwin.bplaced.net/neu/index.html

Das Problem an sich liegt am Menü: Das Menü soll so funktionieren, dass man zuerst einen Oberpunkt anklicken soll, erst dann sollen die Unterpunkte so wie jetzt implementiert "rauspoppen". Ich hab bereits vor gut einem Monat da fast 6 Stunden rumexperimentiert, weshalb ich jetzt euch frage - wie mache ich das am Klügsten?

Das CSS:

PHP-Code:

  @charset "utf-8";

 
body{background-color:#9A9FAD; }

 
.main {

    font-family: Verdana, Geneva, sans-serif;

    font-size: 12px;

    font-style: normal;

    font-weight: normal;

    width: 900px;

    clear: both;

    margin-left: auto;

    margin-right: auto;

    position:relative;

    margin-top:-10px;

}

 
#logo_banner {

    clear: both;

    height: 200px;

    width: 900px;

    background-image:url(banner.png)

}

#nav {

    font-family: Verdana, Geneva, sans-serif;

    float: left;

    height: 100%;

    width: 138px;

    margin-left:15px;

    margin-top:15px;

    list-style:none;

}

#wrapper {

    background-image:url(faux_column.png);

    width: 900px;

    }

#content {

    text-align:justify;

    font-family: Verdana, Geneva, sans-serif;

    font-size: 12px;

    float: right;

    width: 657px;

    height: 200%;

    margin-left: 20px;

    margin-right: 20px;

    margin-top: 10px;

    margin-bottom:30px;

}

#footer {

    clear: both;

    width:900px;

    height:5px;

    background-image:url(footer.png);

}

 
/* Menue - based on: CSS Tutorial @ [url]http://www.alistapart.com/d/horizdropdowns/horizontal2.htm[/url] - adapted and edited by Michael N. to fit requirements for website*/

 
 
ul {

    margin: 0;

    padding: 0;

    list-style: none;

    width: 150px;

    }

    

ul li {

    position: relative;

    }

    

li ul {

    position: relative;

    left: 20px;

    top: 0;

    display: none;    

    }

    

ul li a {

    display: block;

    text-decoration:none;

    }

    

li:hover ul, li.over ul { 

    display: block;

    padding-bottom:5px; }

    

    

a:link {color:#000}

Danke & Grüße
Michael

mquadrat · 12.12.2011, 11:34

Mit purem CSS gar nicht, außer ich hätte die Einführung neuer Pseudo-Klassen verpennt. JavaScript ist an dieser Stelle dein Freund. Event-Handler auf das Klick-Ereignis des Elements deiner Wahl und dort ändern der CSS Klasse des Pop-Outs.

jnv · 21.12.2011, 22:33

Zitat:

Zitat von mquadrat

Mit purem CSS gar nicht, außer ich hätte die Einführung neuer Pseudo-Klassen verpennt. [...]

Pseudoklasse :target

mquadrat · 22.12.2011, 11:31

Stimmt. Muss ja immer nur eine Box sichtbar sein.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Update: Offen (!): Zend Menü an URI anpassen	dreamcatcher	PHP-Fortgeschrittene	5	23.07.2011 19:51
Menüleiste mit CSS erstellen	monty.x	HTML, Usability und Barrierefreiheit	9	16.05.2011 08:55
[Erledigt] CSS Drop Down Menu mit Zend Framework	MLang	PHP-Fortgeschrittene	8	22.04.2011 22:12
[Erledigt] Textdatenbank zeilenweise alphabetisch sortieren - Drop Down Menü alphabet	UdoDirk	PHP Tipps 2010	1	24.07.2010 10:45
Drop Down Menü aus text-Datenbank - andere Möglichkeit für erste Zeile?	UdoDirk	PHP Tipps 2010	7	21.07.2010 22:25
Menü mittels php automatisch an Inhalt von text-Datenbank anpassen - Lösung	UdoDirk	PHP Tipps 2010	0	15.07.2010 14:31
[Erledigt] IE Quirks Modus und Menu	chunky	HTML, Usability und Barrierefreiheit	9	10.02.2010 16:27
Aktives Menü ausgeklappt lassen	Black_Sheep	JavaScript, Ajax und mehr	12	14.03.2009 21:25
menu in einer xhtml seite	stripes	PHP Tipps 2009	31	04.01.2009 14:26
horizontales Menü	Fritz73	Scriptbörse	9	26.05.2008 22:26
wie gehts schöner/besser?	AliceD	HTML, Usability und Barrierefreiheit	1	06.09.2005 08:59
Menü aus MySQL Datenbank ausgelesen		PHP Tipps 2005	9	02.06.2005 17:11
PHP Menu mit 2 untermenus		PHP Tipps 2005	3	23.05.2005 00:04
Menü auf php-Seite		PHP Tipps 2005	20	01.02.2005 20:24
[Erledigt] PopDown Menü fast fertig!!		HTML, Usability und Barrierefreiheit	3	27.07.2004 00:11

11.12.2011, 21:24
jeanorwin Neuer Benutzer Registriert seit: 11.06.2010 Beiträge: 17 PHP-Kenntnisse: Anfänger	"Pop-Out" Menü bei anklicken Guten Abend, ich habe (mal wieder) ein CSS Problem, bei dem ich etwas Hilfe gebrauchen könnte. Erst einmal ein Link zur Seite, auf der das Problem besteht: http://jeanorwin.bplaced.net/neu/index.html Das Problem an sich liegt am Menü: Das Menü soll so funktionieren, dass man zuerst einen Oberpunkt anklicken soll, erst dann sollen die Unterpunkte so wie jetzt implementiert "rauspoppen". Ich hab bereits vor gut einem Monat da fast 6 Stunden rumexperimentiert, weshalb ich jetzt euch frage - wie mache ich das am Klügsten? Das CSS: PHP-Code: @charset "utf-8"; body{background-color:#9A9FAD; } .main { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; width: 900px; clear: both; margin-left: auto; margin-right: auto; position:relative; margin-top:-10px; } #logo_banner { clear: both; height: 200px; width: 900px; background-image:url(banner.png) } #nav { font-family: Verdana, Geneva, sans-serif; float: left; height: 100%; width: 138px; margin-left:15px; margin-top:15px; list-style:none; } #wrapper { background-image:url(faux_column.png); width: 900px; } #content { text-align:justify; font-family: Verdana, Geneva, sans-serif; font-size: 12px; float: right; width: 657px; height: 200%; margin-left: 20px; margin-right: 20px; margin-top: 10px; margin-bottom:30px; } #footer { clear: both; width:900px; height:5px; background-image:url(footer.png); } /* Menue - based on: CSS Tutorial @ [url]http://www.alistapart.com/d/horizdropdowns/horizontal2.htm[/url] - adapted and edited by Michael N. to fit requirements for website*/ ul { margin: 0; padding: 0; list-style: none; width: 150px; } ul li { position: relative; } li ul { position: relative; left: 20px; top: 0; display: none; } ul li a { display: block; text-decoration:none; } li:hover ul, li.over ul { display: block; padding-bottom:5px; } a:link {color:#000} Danke & Grüße Michael


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

12.12.2011, 11:34
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Mit purem CSS gar nicht, außer ich hätte die Einführung neuer Pseudo-Klassen verpennt. JavaScript ist an dieser Stelle dein Freund. Event-Handler auf das Klick-Ereignis des Elements deiner Wahl und dort ändern der CSS Klasse des Pop-Outs. __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de

22.12.2011, 11:31
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Stimmt. Muss ja immer nur eine Box sichtbar sein. __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de