honeybee
Sep 16, 2017
view6809
view6
0
Goto Top

CSS: Menü ein- und ausblenden

GermansolvedQuestionCSSDevelopment
Hallo,

ich erstelle gerade ein Navigationsmenü mit CSS. Leider kann ich das Untermenü nicht ein- und ausblenden. Habe ich hier was falsches gemacht?

.navigation {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
        margin-bottom: -99999px !important;
        padding-bottom: 99999px !important;
}

nav {
	background-color: #FFFFFF;
        overflow: hidden;
	border-top: 3px solid #668BCC;
	border-bottom: 3px solid #668BCC;
}

nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

nav ul li {
	display: inline-block;
	padding: 10px 0 0 40px;
}

nav ul li ul {
	text-align: left;
	position: absolute;
	background-color: #FFFFFF;
	top: 160px;
	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	opacity: 0;
	max-height: 0px;
	overflow: hidden;
}

nav ul li ul li {
	display: block;
	padding: 2px 8px;
}
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 349282

Url: https://administrator.de/contentid/349282

Printed on: April 25, 2024 at 08:04 o'clock

6 Comments
Latest comment
Goto Top
Member: wiesi200
wiesi200 Sep 16, 2017 at 11:27:58 (UTC)
Goto Top
Hallo,
Wie kommst du da drauf das es so überhaupt funktionieren kann?
Hast du das irgendwo kopiert oder kpl. selber ohne Vorlage erstellt?

Du wirst hier noch etwas JavaScript brauchen.
Member: em-pie
Solution em-pie Sep 16, 2017 at 11:55:42 (UTC)
Goto Top
Moin,

@wiesi200
Es geht auch ohne Javascript face-wink

Und hier mal ein Beispiel (von mir) mit fertigem CSS und einem HTML-Auszug.
die CSSmuss dann via dem LINK-Tag noch in die HTML-eingebunden werden, wenn die css-Klassen in einer dedizierten Datei stehen (so wie bei mir):

.dropbtn {
    background-color: grey;
    color: white;
    padding: 8px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
	font-size: 11px;
    color: black;
    padding: 6px 6px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
	background-color: #E31E27;
	color: white;
	font-size: 11px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #E31E27;
}

.active {
    background-color: #4CAF50;
}


Und eingebunden in der HTML/ PHP-Seite wurde dass dann wie folgt:
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=LEFT BGCOLOR=grey>
 <TR>
  <TD>
   <DIV class="dropdown">  
    <BUTTON class="dropbtn">Main 1</Button>  
    <DIV class="dropdown-content">  
     <A href="index.php?main=main1k&arg2=sub1"> Sub 1</A>  
     <A href="index.php?main=main1k&arg2=sub2"> Sub 2 </A>  
     <A href="index.php?main=main1k&arg2=sub3"> Sub 3 </A>  
    </DIV>
   </DIV>
  </TD>
  <TD>
   <DIV class="dropdown">  
    <BUTTON class="dropbtn">Main 2</Button>  
    <DIV class="dropdown-content">  
     <A href="index.php?main=main2k&arg2=sub1"> Sub 1</A>  
     <A href="index.php?main=main2k&arg2=sub2"> Sub 2 </A>  
     <A href="index.php?main=main2k&arg2=sub3"> Sub 3 </A>  
     <A href="index.php?main=main2k&arg2=sub4"> Sub 4 </A>  
    </DIV>
   </DIV>
  </TD>
 </TR>
</TABLE>

Ich habe mir das damals ich glaube von hier erarbeitet.


Gruß
em-pie
Member: wiesi200
wiesi200 Sep 16, 2017 at 12:01:26 (UTC)
Goto Top
Ja ohne geht es auch. Nur hätte ich da immer Probleme mit Mobilen Endgeräten.

Aber meine Vermutung hier das er sich was zusammen Kopiert hat und eben das JavaScript vergessen hat.
Member: honeybee
honeybee Sep 16, 2017 at 12:10:43 (UTC)
Goto Top
Der Beitrag von em-pie hat mir weitergeholfen. Danke!
Member: em-pie
em-pie Sep 16, 2017 at 13:03:36 (UTC)
Goto Top
Zitat von @wiesi200:

Ja ohne geht es auch. Nur hätte ich da immer Probleme mit Mobilen Endgeräten.
Jo, da macht JS natürlich wiederum sinn face-smile

Aber meine Vermutung hier das er sich was zusammen Kopiert hat und eben das JavaScript vergessen hat.
Gehe ich auch mal von aus. Die ganzen nav, ul, li, ... "Tags" sehen sehr stark nach C&P aus.
Ich nehme auch mal an, dass er nicht wirklich recherchiert hat, was welches Klassenattribut hier genau bedeutet...

@to:
Und, an welcher Stelle hatte es bei dir gehakt?
ODer verwendest du jetzt einfach überall ein rotes Hauptmenü mit grauen Submenüs? :-P
Würde vermutlich auch Anderen helfen, sollten die mal ähnliche Probleme haben face-wink
Member: honeybee
honeybee Sep 18, 2017 at 07:25:37 (UTC)
Goto Top
Bei mir haben die mit "hover" gefehlt...
GermansolvedQuestionCSSDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 Comments