|
|||
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> 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;} |
Sponsored Links |
|
|||
Ich hatte mal versucht, an diesem Beispiel das Javascript einzubauen.
Siehe hier: Beispielseite zu iPhone-Events Aber ich weiss nicht, wo ich anzusetzen habe. |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |