untermenü geöffnet lassen

[tropenberta]

hi leuts

ich hab eine navigation nachgebaut, die auch super funktioniert. jetzt ist es aber so, das wenn ich mit der maus über ein element fahre sich die untermenüs öffnen, geh ich mit der maus woanders hin schliesst sich das untermenü wieder. ich möchte aber wenn der user auf das element klickt das das untermenü geöffnet bleibt. nach möglichkeit würde ich es gerne mit css lösen, aber wenn nicht anders geht nehm ich auch ne js lösung. danke.

html:

  
  
      <ul class="navimenu">  
       <li><a href="#">Unternehmen</a>  
        <ul>  
         <li><a href="#">Startseite</a></li>  
         <li><a href="#">Geschichte</a></li>  
         <li><a href="#">Team</a></li>  
        </ul>  
       </li>  
      </ul>  
  

css:

  
.navimenu, .navimenu ul, .navimenu li, .navimenu a {  margin: 0;  
                                                      padding: 0;  
                                                      border: none;  
                                                      outline: 5; }  
  
.navimenu { height: 40px;  
            width: 170px;  
            background: #4c4e5a;  
            background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  
            background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  
            background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  
            background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  
            background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  
            -webkit-border-radius: 5px;  
            -moz-border-radius: 5px;  
            border-radius: 5px;  
            -webkit-border-radius: 5px;  
            -moz-border-radius: 5px;  
            border-radius: 0px; }  
  
.navimenu li { position: relative;  
               list-style: none;  
               float: left;  
               display: block;  
               height: 40px; }  
  
  
  
  
.navimenu li a { display: block;  
                 padding: 0 14px;  
                 margin: 6px 0;  
                 line-height: 28px;  
                 text-decoration: none;  
                 border-left: 1px solid #393942;  
                 border-right: 1px solid #4f5058;  
                 font-family: Helvetica, Arial, sans-serif;  
                 font-weight: bold;  
                 font-size: 13px;  
                 color: #f3f3f3;  
                 text-shadow: 1px 1px 1px rgba(0,0,0,.6);  
                 -webkit-transition: color .5s ease-in-out;  
                 -moz-transition: color .2s ease-in-out;  
                  -o-transition: color .2s ease-in-out;  
                 -ms-transition: color .2s ease-in-out;  
                  transition: color .2s ease-in-out; }  
  
.navimenu li:first-child a { border-left: none; }  
  
.navimenu li:last-child a{ border-right: none; }  
  
.navimenu li:hover > a { color: #8fde62; }  
  
.navimenu li:hover > ul { opacity: 1; }  
  
.navimenu li:hover > ul li { height: 36px;  
                             overflow: hidden;  
                             padding: 0; }  
  
.navimenu ul li a { width: 120px;  
                    padding: 4px 0 4px 30px;  
                    margin: 0;  
                    border: none;  
                    border-bottom: 0px solid #353539; }  
  
.navimenu ul li:last-child a { border: none; }  
  
.navimenu ul li { height: 0;  
                  overflow: hidden;  
                  padding: 0;  
                  -webkit-transition: height .25s ease .1s;  
                  -moz-transition: height .25s ease .1s;  
                  -o-transition: height .25s ease .1s;  
                  -ms-transition: height .25s ease .1s;  
                  transition: height .25s ease .1s; }  
  
.navimenu ul { position: absolute;  
               top: 0px;  
               left: 170px;  
               opacity: 0;  
               background: #1f2024;  
               -webkit-border-radius: 0 0 5px 5px;  
               -moz-border-radius: 0 0 5px 5px;  
               border-radius: 0 0 5px 5px;  
               -webkit-transition: opacity .25s ease .1s;  
               -moz-transition: opacity .25s ease .1s;  
               -o-transition: opacity .25s ease .1s;  
               -ms-transition: opacity .25s ease .1s;  
               transition: opacity .25s ease .1s; }  
  
.navimenu li:active > ul li { height: 36px;  
                             overflow: hidden;  
                             padding: 0; }  

[henman]

servus tropenberta,

ich hab eine navigation nachgebaut, die auch super funktioniert. jetzt ist es aber so, das wenn ich mit der maus über ein element fahre sich die untermenüs öffnen, geh ich mit der maus woanders hin schliesst sich das untermenü wieder. ich möchte aber wenn der user auf das element klickt das das untermenü geöffnet bleibt. nach möglichkeit würde ich es gerne mit css lösen, aber wenn nicht anders geht nehm ich auch ne js lösung. danke.

haste schon http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:active ausprobiert?

henman

[tropenberta]

haste schon http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:active ausprobiert?

hi henman

yo ich hab alle hover in der css mit active ausgetauscht - ergebnis war die untermenüs klappen nicht bei mouseover noch bei klick auf. aber danke für den tip

[henman]

servus tropenberta,

yo ich hab alle hover in der css mit active ausgetauscht - ergebnis war die untermenüs klappen nicht bei mouseover noch bei klick auf. aber danke für den tip

Dann wirste um Javascript wohl nicht herumkommen. Mit Eventhandlern und so.

henman

[tropenberta]

ok  henman. hab ich mir fast gedacht. naja schau ich mal ob ich das hin bekomme.

[tropenberta]

problem ist indirekt gelöst.

ich hab mal meine navileiste auf dem ipad ausprobiert und anscheinend lässt der hover effekt
das untermenü geöffnet. das wollte ich eigentlich erreichen.

[Matthias Apsel]

Om nah hoo pez nyeetz, tropenberta!

ich hab mal meine navileiste auf dem ipad ausprobiert und anscheinend lässt der hover effekt
das untermenü geöffnet.

Wie hoverst du denn auf dem ipad?

https://twitter.com/knrs_de/status/324169504479379456

Matthias

[Gunnar Bittersmann]

@@tropenberta:

nuqneH

ich hab eine navigation nachgebaut, die auch super funktioniert. jetzt ist es aber so, das wenn ich mit der maus über ein element fahre sich die untermenüs öffnen

Was heißt „super funktioniert“ für Nutzer ohne Maus?

outline: 5; }

'5' ist kein gültiger Wert für outline.

background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

'0%' und '100%' kannst du auch weglassen.

background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

Die Angabe 'top' ist bei dem präfixfreien Wert falsch.

-webkit-border-radius: 5px;
            -moz-border-radius: 5px;

-moz-border-radius wird schon seit Urzeiten nicht mehr unterstützt. Wenn man nicht noch Wert auf alte WebKits legt, genügt die präfixfreie Eigenschaft border-radius.

-webkit-border-radius: 5px;
            -moz-border-radius: 5px;

Doppelt hält besser?

border-radius: 0px; }

Wenn du keine runde Ecken haben willst, hättest du dir das Ganze gleich sparen können.

-webkit-transition: opacity .25s ease .1s;
               -moz-transition: opacity .25s ease .1s;
               -o-transition: opacity .25s ease .1s;
               -ms-transition: opacity .25s ease .1s;
               transition: opacity .25s ease .1s; }

Auch -moz-transition ist überholt. -ms-transition hat es nie gegeben.

Qapla'

[T-Rex]

Ich kann es mir so richtig schön vorstellen. Der Azubi am ersten Tag hat sein erstes HTML Script fertig gestellt und präsentiert es stolz.
Dann kommt Gunnar und holt tief Luft.

Gruß
Azubi Tröster
T-Rex

[Gunnar Bittersmann]

@@T-Rex:

nuqneH

Ich kann es mir so richtig schön vorstellen. Der Azubi am ersten Tag hat sein erstes HTML Script fertig gestellt und präsentiert es stolz.
Dann kommt Gunnar und holt tief Luft.

Bei manch Quältext trifft es „Gunnar schnappt nach Luft“ besser.

Qapla'