• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Kurs Css od.3 Rozwijane menu a opacity

VPS Starter Arubacloud
0 głosów
521 wizyt
pytanie zadane 4 stycznia 2017 w HTML i CSS przez Asokus Początkujący (450 p.)
zamknięte 5 stycznia 2017 przez Asokus

Witam, problem wygląda następująco. Strona działa dokładnie tak jak Pan Mirosław ale zauważyłem ze gdy ustawimy diva pod naszym rozwijanym menu nadamy mu kolor tła i dodatkowo zniwelujemy jego przezroczystość komendą opacity to menu przestaje funkcjonować. Mianowicie, po najechaniu kursorem na opcje menu się rozwija ale gdy próbujemy zjechać niżej aby wybrać którąś z rozwiniętych opcji, jednocześnie wjedziemy na obszar diva z opcją opacity menu się zwija (znika). zauważyłem też że gdy przykleimy menu do góry ekranu to wszystko działa prawidłowo (Tak jak na początku). Dlaczego tak się dzieje, z czego to wynika, dziękuję i pozdrawiam.

 

<!DOCTYPE HTML>
<html>

<head>
   <meta charset="utf-8"/>
   <title>Comrekt</title>
   <meta name="discription" content=""/>
   <meta name="keywords" content=""/>
   <meta http-eguip="X-UA-Compatible" content="IE=edge,chrome=1"/>
   <link rel="stylesheet" href="styleC.css" type="text/css"/>
   <link href='https://fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

</head>
<body>

<div class="nav">
  <ol>
       <li><a href="#"><span style=" color: #bc2e2c;">Bl</span>OG</a></li>
       <li><a href="#">RECENZJE</a>
          <ul>
             <li><a href="#">KLAWIATURY</a></li>
             <li><a href="#">MYSZKI</a></li>
             <li><a href="#">PODKŁADKI</a></li>
          </ul>
       </li>
       <li><a href="#">ARTYKUŁY</a></li>
       <li><a href="#">AKTUALNOŚCI</a></li>
       <li><a href="#">KONTAKT</a></li>
  </ol>  

</div>
<div></div>
<div id="work_place"></div>  

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

   
  <script src="jquery-1.12.3.min.js"></script>
  <script>

$(document).ready(function() {
   var stickyNavTop = $('.nav').offset().top;

   var stickyNav = function(){
   var scrollTop = $(window).scrollTop();

   if (scrollTop > stickyNavTop) {
      $('.nav').addClass('sticky');
   } else {
      $('.nav').removeClass('sticky');
    }
   };

   stickyNav();

   $(window).scroll(function() {
      stickyNav();
   });
   });

  </script>
  

</body>

</html>


 

body
{
    margin: 0px !important;
    font-family: 'Exo', sans-serif;
    /*background-image: url(poro.png)*/
    background-color: #f3f3f3;
}
.nav
{
    width: 100%;
    background-color: #2d2929;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    box-shadow: 0px 2px 8px;
    text-align: center;
}

ol
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    height: 40px;
    line-height: 235%;
    font-size: 18px;
    display: inline-block;
    
}

ol a
{
    color: white;
    text-decoration: none;
    display: block;
}

ol > li
{
    float: left;
    width: 150px;
    height: 45px;
}

ol > li:hover
{
    border-bottom: 3px solid #bc2e2c;
}

ol > li:first-child
{
    float: left;
    width: 150px;
    height: 45px;
    background-color: #221d1d;
    border-left: 3px solid #332e2e;
    border-right: 2px solid #332e2e;
    
}
ol > li:first-child > a
{
    color: #ba5d64;
    text-decoration: none;
    font-weight: bold;
}

ol > li > ul
{
    list-style-type: none;
    padding: 0;
    height: 30px;
    padding-top: 6px;
    display: none;
    
}
ol > li:hover > ul
{
    display: block;

}
ol > li > ul > li
{
    background-color: #2d2929;    
    z-index: 100;
    border: 2px solid #221d1d;
    border-left: 4px solid #221d1d;
    border-right: 4px solid #221d1d;

}
ol > li > ul > li:hover > a
{
    background-color: #1b1717;
    color: #dbdbdbk;
}

#work_place
{
    height: 5000px;
    width: 1200px;
    margin-right: auto ;    
    margin-left: auto ;
    border-left: 2px solid black;
    border-right: 2px solid black;
    
    background-color: gray;
    opacity: 0.2;
}    
.sticky
{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;    
}




 
 

komentarz zamknięcia: Problem rozwiązany.
komentarz 4 stycznia 2017 przez KamilloPL Gaduła (3,470 p.)
daj może jakiś kod
komentarz 4 stycznia 2017 przez Asokus Początkujący (450 p.)
Ok, sorki wypadło mi. Już daję.
komentarz 4 stycznia 2017 przez Asokus Początkujący (450 p.)
Upps, chyba mało praktycznie to wkleiłem do pytania ;/
komentarz 4 stycznia 2017 przez KamilloPL Gaduła (3,470 p.)
<div id="work_place"></div>  

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

nie lepiej css dać jakiś margin czy coś a nie br?

ol > li > ul > li
{
    background-color: #2d2929;    
    z-index: 100;
    border: 2px solid #221d1d;
    border-left: 4px solid #221d1d;
    border-right: 4px solid #221d1d;

}

co to oznacza bo ja mało programuje ale z czymś takim się w css nie spotkałem
komentarz 4 stycznia 2017 przez Asokus Początkujący (450 p.)
Rodzic: ol > li :potomek itd.

3 odpowiedzi

+1 głos
odpowiedź 4 stycznia 2017 przez Czort Nałogowiec (32,500 p.)
wybrane 5 stycznia 2017 przez Asokus
 
Najlepsza

W tym wypadku najlepszym rozwiązaniem będzie użycie:

background-color: rgba(50,50,50,.2)

Zamiast tego co masz, czyli:

background-color: gray;
    opacity: 0.2;

Dlaczego tak się dzieje? Bo dodanie opacity do elementu jakby "przenosi" go ponad elementy bez opacity. Również jeśli zostawisz opacity, można rozwiązać problem, ale wtedy do elementu .nav musisz na sztywno dodać z-index, oraz zmienić jego pozycjonowanie na relatywne albo absolutne (żeby ten z-index zadziałał).

Polecam ten artykuł, razem ze wszystkimi podpunktami. Jak przeczytasz, to z-index nie będzie taki straszny;)

https://developer.mozilla.org/pl/docs/Web/CSS/CSS_Positioning/Understanding_z_index

komentarz 4 stycznia 2017 przez Asokus Początkujący (450 p.)
Dzięki wielkie, po godzinach frustracji jestem niezmiernie wdzięczny!
0 głosów
odpowiedź 4 stycznia 2017 przez jaca121212 Nałogowiec (40,760 p.)

Proszę o zapoznanie się z faq.

komentarz 4 stycznia 2017 przez Asokus Początkujący (450 p.)
Dziękuję.
0 głosów
odpowiedź 4 stycznia 2017 przez pablop76 VIP (123,060 p.)
Witam. Dzieje się tak ponieważ menu po rozwinięciu chowa się pod <div id="work_place"></div>. Poczytaj o właściwościach position oraz z-index; i zastosuj dla <div id="work_place"></div>
komentarz 4 stycznia 2017 przez Asokus Początkujący (450 p.)
Czytałem o z-indeks jakieś cztery godziny temu i to niestety nie jest to, rozwinięte menu wyświetla się prawidłowo, ale gdy chce na nie najechać znika. Znalazłem metodą prób i błędów wstępnie powód, mianowicie: ażeby było widać podświetlenie ustawiłem padding pomiędzy Div nav a rozwijaną listą, i jeżeli ten padding jest zbyt duży to kursor nie zdąża najechać na menu w trakcie jego wyświetlania.
komentarz 4 stycznia 2017 przez pablop76 VIP (123,060 p.)
Spróbuj dać dla work_place

position: relative;
z-index: -1;

Podobne pytania

0 głosów
1 odpowiedź 182 wizyt
pytanie zadane 28 grudnia 2016 w HTML i CSS przez kubekzone Użytkownik (620 p.)
0 głosów
0 odpowiedzi 1,445 wizyt
pytanie zadane 12 lutego 2017 w JavaScript przez perlik1990 Nowicjusz (180 p.)
0 głosów
1 odpowiedź 206 wizyt
pytanie zadane 2 kwietnia 2017 w HTML i CSS przez SoDoIt Obywatel (1,190 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...