zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden DropDown Menu mit klick

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.06.2014, 03:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.06.2014
Beiträge: 2
Joerg744 befindet sich auf einem aufstrebenden Ast
Standard DropDown Menu mit klick

Hallo zusammen,

ich habe ein Menu gebaut, was auch soweit super funktioniert.
Jetzt moechte ich gerne, dass das Menu nicht bei Hover aufklappt, sondern mit einem Mausklick. Soweit ich weiss, geht es nur mit Javascript. Google habe ich schon bedient, aber nicht hilfreiches gefunden fuer mein Menu oder ich bin zu dumm dafuer.

Hier mein HTML

Code:
<div class="colnav">
		<ul class="nav">
		<li class="navtop"><a class="navtop_link" href="#">Menu</a> 
		<ul class="sub1">
		<li class="sub11"><a href="link1.php">Link1</a>
		<li class="sub12"><a href="link2.php">Link2</a> 
        	<li class="sub13"><a href="link3.php">Link3</a>
		<li class="sub14"><a href="link4.php">Link4</a>
		</li>
		</ul>
        	</li>
		<li class="navtop"><a class="navtop_kontakt" href="kontakt.php">Kontakt</a> </li>
		</ul>
		</div>
Hier die CSS

Code:
.nav {z-index:500; list-style-type:none; position:relative; height:180px;}
.nav li.navtop {display:block; float:left; padding-right:20px;}
.nav li a.navtop_link, .nav li a.navtop_kontakt {display:block; cursor:pointer; color:#fff; line-height:250px; height:180px; width:160px; text-decoration:none; text-align:center; font-size:20px;}
.nav li a.navtop_link {background:url(img/blockmenu.png) no-repeat;} 
.nav li a.navtop_kontakt {background:url(img/blockkontakt.png) no-repeat;}
.nav li:hover > a.navtop_link, .nav li:hover > a.navtop_kontakt { text-decoration:none}
.nav a:hover, .nav a:focus {z-index:200; visibility:visible; position:relative;}
.nav li:hover, .nav li:focus {z-index:200; position:relative;}
.nav ul {z-index:300000; left:-9999px; padding:0; margin:0; width:0px; list-style-type:none; position:absolute; top:-9999px; height:0;}
.nav ul.sub1 {z-index:400000; width:180px;}
.nav :hover ul, .nav :focus ul {z-index:1000; left:-180px; color:#000; white-space:nowrap; top:180px; height:auto; width:750px;}
.nav :hover ul li, .nav :focus ul li {	float:left; width:180px; display:block; font-weight:normal; z-index:1000; position:relative; height:200px;}
.nav :hover ul li.sub11 a,
.nav :hover ul li.sub12 a,
.nav :hover ul li.sub13 a,
.nav :hover ul li.sub14 a {display:block; font-size:20px; z-index:1000; width:160px; color:#fff; padding:0; line-height:250px; text-align:center; text-decoration:none; background:url(img/block1.png) no-repeat;}
.nav :hover ul li.sub12 a {background:url(img/block2.png) no-repeat;}
.nav :hover ul li.sub13 a {background:url(img/block3.png) no-repeat;}
.nav :hover ul li.sub14 a {background:url(img/block4.png) no-repeat;}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.06.2014, 11:13
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Joerg744 Beitrag anzeigen
Google habe ich schon bedient, aber nicht hilfreiches gefunden fuer mein Menu oder ich bin zu dumm dafuer.
Das Wissen wir nicht, dazu müßten wir Wissen, was du nicht hilfreiches gefunden hast und was du versucht hast.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.06.2014, 03:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.06.2014
Beiträge: 2
Joerg744 befindet sich auf einem aufstrebenden Ast
Standard

Ich hatte mal versucht, an diesem Beispiel das Javascript einzubauen.
Siehe hier: Beispielseite zu iPhone-Events
Aber ich weiss nicht, wo ich anzusetzen habe.
Mit Zitat antworten
  #4 (permalink)  
Alt 30.06.2014, 04:41
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Es ist doch erklärt. schau doch mal in den Quelltext der Seite.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit PullDown Menu auf ipad/iphone smisonline2 CSS 1 13.05.2013 18:13
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 20:51
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
Drop Down Menu Positionsproblem Schky CSS 4 21.04.2008 14:09
Problem mit vertikaler Navigation Krissie CSS 0 15.08.2007 13:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:03 Uhr.