kostenloser Webspace werbefrei: lima-city

Server-Status

Untermenüs bei FOCUS und ACTIVE anzeigen

lima-city: free Hosting → Forum → Die eigene Homepage → HTML, CSS & Javascript

2. 16:50, 2.7.2010
   Autor dieses Themas

   psd

   Büttler

   

   2731 Gulden

   Webspace unbegrenzt

   Hey,
   
   nach langem herumprobieren wollt ich jetzt mal euch fragen, da ich keine lösung finde.
   
   Ein reines CSS menu welches durch HOVER sichtbar wird soll bei klick also durch ACTIVE sichtbarbleiben auch wenn man die maus vom HOVER nimmt.
   
   Aufbau:
   

   <ul>
   	<li.dir><a href="#">Lorem Ipsum</a>
       	<ul>
           	<li><a href="#">Lorem Ipsum</a></li>
               <li><a href="#">Lorem Ipsum</a></li>
           </ul>
       </li>	
   </ul>

   
   
   CSS bis jetzt (etwas unaufgeräumt vom testen )
   

   #main_menu ul {
   	width:800px;
   	margin:auto;
   	text-align:center;
   	position:relative;
   }
   #main_menu ul li.dir {
   	height: 30px;
   	width:160px;
   	float:left;	
   }
   #main_menu ul li.dir:hover {
   	height: 30px;
   	width:160px;
   	float:left;
   	background: url(../images/li_bg.png) no-repeat center top;
   }
   #main_menu ul li.dir ul {
   	height: 30px;
   	width:800px;
   	position:absolute;
   	left:0;
   	top:30px;
   	background:#df0279;
   }
   #main_menu ul li.dir ul li {
   	height: 30px;
   	width:120px;
   	float:left;
   	display:block;
   	background:#df0279;
   }
   #main_menu ul li.dir a {
   	line-height:30px;
   	vertical-align:middle;
   	letter-spacing:0.25px;
   	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   	color:#006f9f;
   	display:block;
   }
   #main_menu ul li.dir:hover {
   	line-height:30px;
   	vertical-align:middle;
   	letter-spacing:0.25px;
   	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   	color: #FFF;
   }
   #main_menu ul li.dir ul li a {
   	display:block;
   	line-height:30px;
   	vertical-align:middle;
   	font-size:12px;
   	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   }
   #main_menu ul li.dir ul li a:hover {
   	line-height:30px;
   	vertical-align:middle;
   	font-size:12px;
   	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   }
   
   #main_menu ul ul {
   	display:none;
   }
   #main_menu ul li.dir:hover ul {
   	display:block;
   }

   
   
   danke schonmal im vorraus
   

3. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

4. 18:34, 2.7.2010

   fatfreddy

   

   Prinz

   

   21496 Gulden

   Webspace unbegrenzt

   Das wird so nicht funktionieren.
   
   Dein Menüpunkt hat nur solange den Status Active, wie die Maustaste gedrückt ist.
   
   Ähnlich ist es beim Focus, der eigentlich für Tastatur-/ Tabnavigation gedacht ist und prinzipiell die gleichen Eigenschaften wie Hover hat. Hilft also auch nicht weiter.
   
   FF
   
   
   
5. 19:10, 2.7.2010
   Autor dieses Themas

   psd

   Büttler

   

   2731 Gulden

   Webspace unbegrenzt

   danke .. schade hat wer dann villeicht eine andere lösung ? php / javascript ?
   
   Ja mit Flash wäre das einfach aber flash menu sollte die letzte Option sein !
   
   Beitrag zuletzt geändert: 2.7.2010 19:11:36 von psd
6. 16:11, 10.8.2010

   matthiasdunker

   Ketzer

   

   45 Gulden

   Webspace unbegrenzt

   Wenn du es in JavaScript umsetzen willst, kannst du einfach beim Klicken die CSS-Eigenschaft display deines Layers auf block stellen.
   (Muss natürlich vorher auf none gesetzt sein)

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?