Opacity: 1 voor de dropdown, maar toch doorzichtig?

Status
Niet open voor verdere reacties.
Y

yellowf

Gebruiker
Lid geworden
28 feb 2007
Berichten
34
Op deze site http://www.massagepraktijkhouten.nl/jststdr/2/ heb ik een dropdown menu gemaakt. Het menu klapt uit maar de lijst-items zijn doorzichtig. Opacity staat echter wel op 1. Ik zie niet wat ik fout doe.
Suggesties welkom!

CSS code van de unordered list. Het gaat volgens mij om het onsderste blokje ul li ul li :
Code: 
ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}
ul li {
  width: 120px;
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
 
Om te testen kun je even alles met transition en opacity eruit halen.
Er zit een klein foutje bij -transition: opacity 0.2s; ( '-' weghalen )

Suc6. Have fun.
 
Laatst bewerkt:
bron zei:
Om te testen kun je even alles met transition en opacity eruit halen.
Er zit een klein foutje bij -transition: opacity 0.2s; ( '-' weghalen )

Suc6. Have fun.
Klik om te vergroten...

Alvast bedankt. Ik kom er echter nog niet uit. En ik zie nog iets geks, zie hieronder.
Ik heb getest:

1) zonder het blok:
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
2) Weer met het blok en de voorste "-" overal weggehaald
3) Alleen de tussen "-" overal weggehaald

Dit alles had dus geen effect op de doorzichtigheid. Maar er is nog iets:

Het menu klapt weliswaar uit, maar als je met de muis naar beneden gaat, klapt ie meteen weer in! Getest in Chrome en Firefox.
 
"-ms-transition: opacity ..." kun je weghalen want tot IE9 werken zowel transition als opacity niet. Bij IE9 werkt transition niet volledig. Vanaf IE10 wordt gewoon "transition: opacity ..." gebruikt (de laatste regel).
Hieronder een voorbeeld. Zoals je ziet staat er bij de laatste regel geen '-' voor transition.
Code: 
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
Het principe van opacity...
Code: 
ul { /* of li */
  -webkit-opacity: 0.3;
  -moz-opacity: 0.3;
  opacity: 0.3;
 }
 ul:hover { /* met li:hover */
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
Kun je hier iets mee?
 
Hieronder de uitwerking met behulp van een css menu framework
Code: 
HTML:

  <nav>
  <ul class="menu">
     .......
  </ul>
  </nav>

CSS:

/* menu framework (niet wijzigen) */
.menu, .menu ul, .menu li, .menu a {
  margin: 0; padding: 0; border: 0; outline: 0; list-style: none;
}
.menu {
  position: relative; z-index: 597; float: left;
}
.menu li {
  float: left; min-height: 1px;
  line-height: 1; vertical-align: middle;
}
.menu li:hover {
  position: relative; z-index: 599; cursor: pointer;
}
.menu a, .menu a:visited, .menu a:hover {
  display: block; text-decoration: none; line-height: 1;
}
.menu ul {
  visibility: hidden; position: absolute;
  top: 100%; left: 0; z-index: 598;
}
.menu ul li {
  float: none;
}
.menu ul ul {
  top: 0; left: 100%;
}
.menu li:hover > ul {
  visibility: visible;
}
/* vanaf hier mag je wijzigen */
 
/* menu wrapper */
nav {
  margin: 0;
  display: block;
}

/* menu vormgeving */
.menu li { /*top + submenu*/
  width: 120px;
  padding: 17px 20px;
  font: bold 14px arial,sans-serif;
  background: #fff;
  color: #000;
}
.menu ul { /*submenu*/
  background: #555;
}
.menu ul li { /*submenu*/
  background: #555;
  color: #fff;
}

/* menu hover */
.menu > li:hover { /*topmenu*/
  background: #666;
  color: #fff;
}
.menu ul > li:hover { /*submenu*/
  background: #666;
  color: #fff;
}

/* text-shadow */
.menu ul li {
  text-shadow: 0 -1px 0 #000;
}

/* menu box-shadow */
.menu ul {
  -webkit-box-shadow: 5px 5px 5px #bbb;
     -moz-box-shadow: 5px 5px 5px #bbb;
          box-shadow: 5px 5px 5px #bbb;

}

/* menu transition */
.menu > li > ul {
  opacity: 0;
}
.menu > li:hover > ul {
  opacity: 1;
  -webkit-transition: opacity .3s;
     -moz-transition: opactiy .3s;
       -o-transition: opacity .3s;
          transition: opacity .3s;
}

Test het even in een apart bestandje. Bij mij werkt het.

***aanvulling
Het grote voordeel van de menu framework is dat je direct met de vormgeving aan de slag kunt. De framework werkt bij IE vanaf versie IE8 (dus het werkt ook op XP). De css3 effecten werken niet op IE8 en gedeeltelijk op IE9. Vanaf IE10 werkt css3 prima.

Suc6 & have fun.
 
Laatst bewerkt:
Het kost wat slaap maar getest en het werkt!

Bron je hebt me al eerder goed geholpen, mijn dank is groot!!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan