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

jak zrobić nav taki jak na tej stronie

Hosting forpsi easy 1 pln
0 głosów
148 wizyt
pytanie zadane 17 lutego 2022 w HTML i CSS przez trixter310 Obywatel (1,440 p.)

Dzień dobry mam pytanie odnośnie nava takiego jak na stronie. Można rozwinąć menu pojechać w dół strony i on nie jedzie w dół a jak wrócimy dalej jest rozwinięty. Mam taki kod:

<!DOCTYPE html>
<html lang="pl" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/fontello.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://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
    <title>Moja strona</title>
</head>
<body>
    <h2 class="logotype">Tytuł strony</h2>
<header class="nav">
    <div class="inner-width">
        <a href="strona-główna" class="logo"><img src="img/logo.png" alt="logo"></a>
        <i class="menu-toggle-btn fas fa-bars"></i>
        <nav class="navigation-menu">
          <a href="strona-główna"><i class="fas fa-home home"></i>Strona główna</a>
          <a href="#"><i class="fas fa-bone suki"></i>#i</a>
          <a href="#"><i class="fas fa-dog psy"></i>#</a>
          <a href="#"><i class="fas fa-paw mioty"></i>#</a>
          <a href="#"><i class="fas fa-book tm"></i>#</a>
          <a href="#"><i class="fas fa-envelope con"></i>Kontakt</a>
  <a href="home"><img height= "29px" src="img/wb.png" alt="Język angielski"></a>
        </nav>
    </div>
</header>
    <div id="container">
 
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Open Sans",sans-serif;
  box-sizing: border-box;
}
::-webkit-scrollbar
{
 width: 0;
}
header.nav{
  height: 90px;
  background: #0066CC;
}

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

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

.logo img{
  height: 75px;
}

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

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

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

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

.home{
  color: #ff6b6b;
}

.suki{
  color: #0abde3;
}

.psy{
  color: #feca57;
}

.mioty{
  color: #5f27cd;
}

.tm{
  color: #1dd1a1;
}
.con{
  color: #CC6600;
}
.slidershow{
  width: 700px;
  height: 400px;
  overflow: hidden;
}
.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.navigation{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.bar{
  width: 50px;
  height: 10px;
  border: 2px solid #fff;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}
.bar:hover{
  background: #fff;
}
.sliderek
{
  margin-top: 50px;
  padding-bottom: 500px;
  position: sticky;
}
.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:1010px) {
  .menu-toggle-btn{
    display: block !important;
  }

  .navigation-menu{
    position: fixed;
    width: 100%;
    max-width: 400px;
    background: #172b4d;
    top: 94px;
    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;
    margin-top: 90px;
    z-index: 1;
  }
}
body
{
  background-color: #3399CC;
}
#container
{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #fff;
}
h2.logotype{
  color: #ddd;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 5px;
  font-size: 40px;
  padding: 20px 0;
  white-space: nowrap;
}
.miotzapowiedz{
    color: #fff;
    font-size: 44px;
    font-family: 'Open Sans', sans-serif;
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 40px;
  }
h1{
    font-size: 44px;
    font-weight: 400;
    color: #CCCC33;
    margin: 40px 0;
}
p {
    color: yellow;
    font-size: 20px;
}
.info {
    width: 100%;
    background-color: #0066CC;
    color: white;
    text-align: center;
    padding: 40px;
    margin: 50px 0;
}
a.bluebutton
{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background: linear-gradient(90deg, #03d6f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 30px;
  padding: 15px 25px;
}
a.bluebutton:hover
{
  animation: animate 8s linear infinite;
}
@keyframes animate {
  0%
  {
    background-position: 0%;
  }
  100%
  {
    background-position: 400%;
  }

}
a.bluebutton:before
{
  width: 200px;
  height: 60px;
  content: '';
  position: relative;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 30px;
  filter: blur(20px);
}
.fb
{
  width: 100px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}
ul
{
  position: relative;
  display: flex;
}
ul li
{
  position: relative;
  list-style: none;
}
ul li a
{
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  margin: 0 10px;
  text-decoration: none;
  font-size: 30px;
  border-radius: 50%;
  color: #e2e2e2;
  box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2),
                    2px 2px 5px rgba(0,0,0,0.2);
  transition: 0.5s;
}
ul li a:hover
{
  color: #999;
  transform: translateY(-20px);
  box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2),
                    2px 24px 10px rgba(0,0,0,0.1);
}
ul li a:before
{
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
}
ul li a .icon-facebook
{
  color: #fff;
  position: relative;
  z-index: 1;
}
ul li:nth-child(1) a:before
{
  background: #1077f2;
}

.stopka{
  color: #fff;
  background-color: #0066CC;
  text-align: center;
  width: 100%;
  padding: 15px;
  margin-top: 20px;
}

#container a
{
	opacity: 0.9;
}
#container a:hover
{
	opacity: 1;
}
.molly{
  margin-top: 50px;
  position: relative;
}
.mio{
  color: #fff;
}
.scrollup
{
  width: 64px;
  height: 64px;
  text-decoration: none;
  background: url("img/up.png") no-repeat 0px 0px;
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: none;
	border-radius: 5px;
}
.rodowod{
  width: 90%;
}
h2.rasa
{
  color: #333300;
}
.responsive
{
  max-width:100%;
}
#slider {
	overflow: hidden;
  margin-top: 40px;
}
#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	animation: 20s slider infinite;
}
#slider figure img {
	width: 20%;
	float: left;
}

@keyframes slider {
	0% {
		left: 0;
	}
	20% {
		left: 0;
	}
	25% {
		left: -100%;
	}
	45% {
		left: -100%;
	}
	50% {
		left: -200%;
	}
	70% {
		left: -200%;
	}
	75% {
		left: -300%;
	}
	95% {
		left: -300%;
	}
	100% {
		left: -400%;
	}
}
@media screen and (min-width: 320px) {
  h2.logotype {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
    .navigation-menu{
      top: 62px;
  }
}
@media screen and (min-width: 1000px) {
  h2.logotype {
    font-size: 40px;
  }
}
.jezyka
{
  height: 29px;
  padding: 0;
  margin: auto;
}


#scrollPath
{
  position: fixed;
  top: 0;
  right: 0;
  width: 15px;
  height: 100%;
  background: rgba(255, 225, 225, 0.05);
}
#progressbar
{
  position: fixed;
  top: 0;
  right: 0;
  width: 15px;
  background: linear-gradient(to top, #008aff, #00ffe7);
  animation: animate 5s linear infinite;
}
@keyframes animate {
  0%,100%
  {
    filter: hue-rotate(0deg);
  }
  50%
  {
    filter: hue-rotate(360deg);
  }

}
#progressbar:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #008aff, #00ffe7);
  filter: blur(10px);
}
#progressbar:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #008aff, #00ffe7);
  filter: blur(30px);
}

i chciałbym naprawić menu active tak żeby nie odczepiało się od menu i jechało wraz z zjeżdżaniem na dół strony 

tak jak jest na tym forum 

 

1 odpowiedź

+1 głos
odpowiedź 17 lutego 2022 przez VBService Ekspert (246,010 p.)
wybrane 27 lutego 2022 przez trixter310
 
Najlepsza

Tu  position: fixed.

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

na:  position: absolute.

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

 

P.S no i np.  (tak jak masz tu)

      $(".menu-toggle-btn").click(function() {
        $(this).toggleClass("fa-times");
        $(".navigation-menu").toggleClass("active");
      });

 

Podobne pytania

0 głosów
2 odpowiedzi 537 wizyt
pytanie zadane 27 czerwca 2016 w HTML i CSS przez Jakub Wróbel Użytkownik (920 p.)
0 głosów
1 odpowiedź 154 wizyt
pytanie zadane 4 listopada 2015 w PHP przez Radekoslaw123 Gaduła (3,080 p.)

92,092 zapytań

140,751 odpowiedzi

317,718 komentarzy

61,409 pasjonatów

Advent of Code 2023

Top 15 użytkowników

  1. 0p. - shogunalke
  2. 0p. - Sambor1313
  3. 0p. - Whistleroosh
  4. 0p. - Hubert Chęciński
  5. 0p. - the Bielsky
  6. 0p. - s. Dorota Kowalewska
  7. 0p. - Mikbac
  8. 0p. - Poftorek
  9. 0p. - KreciX h
  10. 0p. - Adrian Wieprzkowicz
  11. 0p. - TheLukaszNs
  12. 0p. - nidomika
  13. 0p. - Dewidos
  14. 0p. - mjavor
  15. 0p. - Fiji404
Szczegóły i pełne wyniki

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 w koszyku, uzyskując rabat aż -50% (jeszcze tylko dziś 30.11 z okazji Black Week, a potem będzie to 30%) na bilety w wersji "Standard"! Więcej informacji na temat akademii znajdziecie tutaj. Dziękujemy Sekurakowi za tak fajną zniżkę dla 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 15% 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!

...