WinFuture-Forum.de: Hilfe bei css Dropdown Menü - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Hilfe bei css Dropdown Menü


#1 Mitglied ist offline   R4M1N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 550
  • Beigetreten: 31. Juli 12
  • Reputation: 16

geschrieben 08. Oktober 2015 - 20:06

Hi, ich lerne gerade php und html und damit meine Seite nicht so ätzend aussieht auch ein wenig css. Bin gerade aber am verzweifeln wegen einem Dropdown Menü.. Habe mir schon gefühlt 12890 Tutorials angeschaut. Bei den letzten beiden kann ich echt nicht verstehen, wo mein Fehler ist...
Bin jetzt so weit, dass sobald man mit der Maus über dem einen Feld ist, das Dropdown-Menü "rauskommt", jedoch auf der gleichen Höhe, und nicht etwas weiter unten...

Da das Menü aus einigen Tutorials zusammengeworfen ist, kann es gut sein, dass ich dort inzwischen was doppelt habe oder so, aber ich steige hier atm nicht mehr durch..

Meine horizontale Leiste, welche wunderbar funktioniert. Beim drüber fahren ändert sich die Farbe:
a:link {
	color: #FF6600;
}
a:visited {
	color: #FF944C;

}
a:hover, a:active, a:focus {
	color: #7F3300;
	text-decoration: underline;
}
#mainnav ul {
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#mainnav a {
	width: 25%;
	display: block;
	float: left;
	text-transform: uppercase;
	background-color: #F99736;
	color: #FFFFFF;
	padding-top: 6px;
	padding-bottom: 6px;
	text-align: center;
}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
	background-color: #9EC524;
	text-decoration: none;
}


So, jetzt das Dropdown Menü, welches einfach an einen Punkt aus dem horizontalen Menü unten drunter dran soll:

div {cursor:default;}


#menu li ul{display:none; position: relative;}
#menu li:hover ul {display: block;
  position: absolute;}

#menu li ul li {background-color:#9EC524;}
#menu li ul li a{color:#FFFFFF;}
#menu li ul li:hover {background-color:#9EC524;}


Meine Leiste in HTML:

   <nav id="mainnav">
    <ul id="menu">
     <li><a href="#">Test_oben1</a>
     	<ul>
        	<li><a href="#">Testseite_dropdown</a></li>
            <li><a href="#">Testseite_dropdown2</a></li>
        </ul>
     </li>   
     <li><a href="#" class="thispage">Testseite_oben2</a></li>
     <li><a href="#">Testseite_oben3</a></li>
     <li><a href="#">Testseite_oben4</a></li>
   </ul>
  </nav>


Wäre echt klasse, wenn mir wer die Zeile Code schreiben könnte.. Aktuell "dropt" das Menü halt nicht, sondern erscheint einfach etwas weiter links von dem Menüpunkt...

Dieser Beitrag wurde von R4M1N bearbeitet: 08. Oktober 2015 - 20:06

MfG R4M1N
Eingefügtes Bild
0

Anzeige



#2 Mitglied ist offline   RalphS 

  • Gruppe: VIP Mitglieder
  • Beiträge: 8.394
  • Beigetreten: 20. Juli 07
  • Reputation: 986

geschrieben 08. Oktober 2015 - 20:39

Schau mal in Richtung CSS-Filter bei den Ein-, Um- und Ausblendeanimationen.

Wenn es da nix Passendes gibt, müßtest Du das per J/VBScript implementieren, entweder Zeile-für-Zeile (statt als Block) oder, aufwendiger, Pixelreihe für Pixelreihe und das dann entweder konstant verzögert oder aber mit einer Verzögerungsfunktion in Abhängigkeit der "Ausroll-Länge".

- Idealerweise schaust Du Dir auf irgendeiner Seite mit Dir gefallenden Dropdowns den Quelltext an, wie die das gemacht haben.
"If you give a man a fish he is hungry again in an hour. If you teach him to catch a fish you do him a good turn."-- Anne Isabella Thackeray Ritchie

Eingefügtes Bild
Eingefügtes Bild
0

#3 Mitglied ist offline   R4M1N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 550
  • Beigetreten: 31. Juli 12
  • Reputation: 16

geschrieben 08. Oktober 2015 - 20:46

Ich habe mir auf vielen Seiten Skripte angeschaut, bei vier oder fünf habe ich es versucht nachzubauen. Ich könnte auch schwören, dass ich es so gemacht habe wie auf den Seiten, nur mit meiner Menüleiste (also vom Design her), aber es ging nie.. Entweder war alles klein und verschoben, oder so wie jetzt, oder es wurde gar nicht angezeigt..
http://www.silent-fr...klappmenue.html
http://www.drweb.de/...hne-javascript/
http://codepen.io/philhoyt/pen/ujHzd
Nur ein paar Beispiele.. System ist ja eigentlich überall das gleiche, nur ich scheine irgendwie zu blöd zu sein das auf mein Design zu übertragen mit meinem vorhanden Code :unsure:

Und per CSS sollte das auf jeden Fall machbar sein..
MfG R4M1N
Eingefügtes Bild
0

#4 Mitglied ist offline   aeris 

  • Gruppe: aktive Mitglieder
  • Beiträge: 129
  • Beigetreten: 06. September 08
  • Reputation: 12

geschrieben 08. Oktober 2015 - 20:48

Du positionierst das Dropdown Element absolut, gibst ihm aber keine Position, daher steht es halt links oben.
Statt absolut solltest du es aber relativ lassen, damit es unter dem Parent-Menu bleibt.
Weiters darfst du dem Unterelement auch keine Breite geben. Ein Block-Element nimmt sich soviel wie es bekommen kann.

#menu li ul { 
    display: none;
}
#menu li:hover ul {
    display: block;
}


Weiters solltest du nicht den Link links floaten, sondern das Listenelement und diesen eine Breite geben.

#mainnav > ul > li { 
    width: 25%;
    float: left;
}


Hier ein komplettes, aufgeräumtes Beispiel:
http://codepen.io/anon/pen/xwrrRJ
1

#5 Mitglied ist offline   R4M1N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 550
  • Beigetreten: 31. Juli 12
  • Reputation: 16

geschrieben 08. Oktober 2015 - 20:51

Ich danke dir vielmals :wink:
MfG R4M1N
Eingefügtes Bild
0

#6 Mitglied ist offline   R4M1N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 550
  • Beigetreten: 31. Juli 12
  • Reputation: 16

geschrieben 12. Oktober 2015 - 15:44

Hey @aeris oder andere.
Wie schaffe ich es bei dem Menü jetzt noch, dass die Objekte bzw der Text darunter nicht nach unten verschoben wird, sondern das Menü sozusagen auf einer Ebene über meiner Seite nach unten slidet?

Dieser Beitrag wurde von R4M1N bearbeitet: 12. Oktober 2015 - 15:44

MfG R4M1N
Eingefügtes Bild
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0