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

Navbar rozwijany

VPS Starter Arubacloud
+1 głos
224 wizyt
pytanie zadane 13 lutego 2022 w HTML i CSS przez trixter310 Obywatel (1,440 p.)

Witam mam taki  navbar i mam pytanie czy da się zrobić tak, żeby menu-active po włączeniu go i zjechaniu na dół strony zostało przyklejone do góry 

a nie jeździło razem z zjeżdzaniem strony oto kod: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  </head>
  <body>
    <header>
      <div class="inner-width">
        <a href="#" class="logo"><img src="logo.png" alt=""></a>
        <i class="menu-toggle-btn fas fa-bars"></i>
        <nav class="navigation-menu">
          <a href="#"><i class="fas fa-home home"></i> Home</a>
          <a href="#"><i class="fas fa-align-left about"></i> About</a>
          <a href="#"><i class="fab fa-buffer works"></i> Works</a>
          <a href="#"><i class="fas fa-users team"></i> Team</a>
          <a href="#"><i class="fas fa-headset contact"></i> Contact</a>
        </nav>
      </div>
    </header>

    <script type="text/javascript">
      $(".menu-toggle-btn").click(function(){
        $(this).toggleClass("fa-times");
        $(".navigation-menu").toggleClass("active");
      });
    </script>
  </body>
</html>
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Open Sans",sans-serif;
}

header{
  height: 90px;
  background: #2f3640;
}

.inner-width{
  max-width: 1000px;
  padding: 0 10px;
  margin: auto;
}

.logo{
  float: left;
  padding: 20px 0;
}

.logo img{
  height: 50px;
}

.navigation-menu{
  float: right;
  display: flex;
  align-items: center;
  min-height: 90px;
}

.navigation-menu a{
  margin-left: 10px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 4px;
  transition: .3s linear;
}

.navigation-menu a:hover{
  background: #fff;
  color: #2f3640;
  transform: scale(1.1);
}

.navigation-menu i{
  margin-right: 8px;
  font-size: 16px;
}

.home{
  color: #ff6b6b;
}

.about{
  color: #0abde3;
}

.works{
  color: #feca57;
}

.team{
  color: #5f27cd;
}

.contact{
  color: #1dd1a1;
}

.menu-toggle-btn{
  float: right;
  height: 90px;
  line-height: 90px !important;
  color: #fff;
  font-size: 26px;
  display: none !important;
  cursor: pointer;
}


@media screen and (max-width:700px) {
  .menu-toggle-btn{
    display: block !important;
  }

  .navigation-menu{
    position: fixed;
    width: 100%;
    max-width: 400px;
    background: #172b4d;
    top: 90px;
    right: 0;
    display: none;
    padding: 20px 40px;
    box-sizing: border-box;
  }

  .navigation-menu::before{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #172b4d;
    position: absolute;
    top: -10px;
    right: 10px;
  }

  .navigation-menu a{
    display: block;
    margin: 10px 0;
  }

  .navigation-menu.active{
    display: block;
  }
}

 

komentarz 13 lutego 2022 przez Mezeon Obywatel (1,550 p.)

Chodzi Ci o to, aby element header nie przewijał się razem z całą zawartością strony, a zostawał cały czas u góry okna?

komentarz 13 lutego 2022 przez trixter310 Obywatel (1,440 p.)
w sensie nawigacja zostaje do góry w swoim miejscu ale w momencie gdy otwieram

menu-togle-button to wtedy on jeździ ze stroną
1
komentarz 13 lutego 2022 przez Mezeon Obywatel (1,550 p.)
edycja 13 lutego 2022 przez Mezeon

W takim razie dodaj do klasy active style position: sticky i top: 0. Wtedy elementy z nią będą miały takie zachowanie.

komentarz 13 lutego 2022 przez VBService Ekspert (251,210 p.)
edycja 13 lutego 2022 przez VBService

style position: sticky i top: 0  yes

smiley

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  </head>
  <body>
    <header>
      <div class="inner-width">
        <a href="#" class="logo"><img src="logo.png" alt=""></a>
        <i class="menu-toggle-btn fas fa-bars"></i>
        <nav class="navigation-menu">
          <a href="#"><i class="fas fa-home home"></i> Home</a>
          <a href="#"><i class="fas fa-align-left about"></i> About</a>
          <a href="#"><i class="fab fa-buffer works"></i> Works</a>
          <a href="#"><i class="fas fa-users team"></i> Team</a>
          <a href="#"><i class="fas fa-headset contact"></i> Contact</a>
        </nav>
      </div>
    </header>

    <p>
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
    </p>
    <p>
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
      Lorem ipsum ... lorem ipsum ... lorem ipsum ... lorem ipsum
    </p>  

    <script type="text/javascript">
      $(".menu-toggle-btn").click(function(){
        $(this).toggleClass("fa-times");
        $(".navigation-menu").toggleClass("active");
      });
    </script>
  </body>
</html>
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Open Sans",sans-serif;
}

header{
  height: 90px;
  background: #2f3640;
  position: sticky; /* dodane */
  top: 0; /* dodane */
}

.inner-width{
  max-width: 1000px;
  padding: 0 10px;
  margin: auto;
}

.logo{
  float: left;
  padding: 20px 0;
}

.logo img{
  height: 50px;
}

.navigation-menu{
  float: right;
  display: flex;
  align-items: center;
  min-height: 90px;
}

.navigation-menu a{
  margin-left: 10px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 4px;
  transition: .3s linear;
}

.navigation-menu a:hover{
  background: #fff;
  color: #2f3640;
  transform: scale(1.1);
}

.navigation-menu i{
  margin-right: 8px;
  font-size: 16px;
}

.home{
  color: #ff6b6b;
}

.about{
  color: #0abde3;
}

.works{
  color: #feca57;
}

.team{
  color: #5f27cd;
}

.contact{
  color: #1dd1a1;
}

.menu-toggle-btn{
  float: right;
  height: 90px;
  line-height: 90px !important;
  color: #fff;
  font-size: 26px;
  display: none !important;
  cursor: pointer;
}


@media screen and (max-width:700px) {
  .menu-toggle-btn{
    display: block !important;
  }
  nav { /* dodane */
    box-shadow: none;  
    transition: box-shadow 0.8s;
  }
  .navigation-menu{
    position: fixed;
    width: 100%;
    max-width: 400px;
    background-color: #172b4d;
    top: 90px;
    right: 0;
    display: block; /* zmiana */
    opacity: 0; /* dodane */
    padding: 20px 40px;
    box-sizing: border-box;
    transition: opacity 0.6s; /* dodane */
  }

  .navigation-menu::before{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #172b4d;
    position: absolute;
    top: -10px;
    right: 10px;
  }

  .navigation-menu a{
    display: block;
    margin: 10px 0;
  }

  .navigation-menu.active{    
    opacity: 1; /* zmiana */
    box-shadow: -3px 3px 20px 3px black; /* dodane */
  }
}

p {
  height: 1000px;
}

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
0 odpowiedzi 121 wizyt
pytanie zadane 15 marca 2020 w Rozwój zawodowy, nauka, praca przez rice Początkujący (440 p.)
0 głosów
1 odpowiedź 322 wizyt
pytanie zadane 15 sierpnia 2019 w Nasze projekty przez suciorek Nowicjusz (120 p.)
0 głosów
1 odpowiedź 282 wizyt
pytanie zadane 16 lutego 2019 w Offtop przez SAMI Użytkownik (530 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 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!

...