Zmiana wysokości menu podczas przewijania strony

JAK ZMIENIĆ WYSOKOŚĆ NAWIGACJI PRZY PRZEWIJANIU?

Webdesignerzy często decydują się na obfite i bogate w treści menu na górze strony. Jeżeli chcemy, aby menu było przymocowane do górnej krawędzi strony i było dzięki temu zawsze widoczne, to może ono przysłaniać zbyt dużo treści. Pierwsze wrażenie jest bardzo ważne, możemy więc pozostawić duże menu po załadowaniu strony i zmniejszyć je podczas jej przeglądania. Wykonanie takiego zabiegu jest bardzo proste. Poniżej przedstawiam krok po kroku jak osiągnąć taki efekt.

Przykład, na którym będziemy pracować

Na początku stwórzmy szkielet strony. Zwężające się menu będzie działać dzięki bibliotece jQuery. Musimy więc podać ścieżkę do pliku w na końcu sekcji <body>
```
<!DOCTYPE html>
<html lang="pl-PL">
<head>
</head>
	
<body>
	  	<script src="jquery.js"></script>
</body>
	
</html>
```

Umieśćmy teraz proste poziome menu na górze strony. Składa się ono z 5 linków umieszczonych w liście nienumerowanej.

<nav>
	<div>
		<ul>
			<li><a href="#">projekty</a></li>
			<li><a href="#">o nas</a></li>
			<li><a href="#">oferta</a></li>
			<li><a href="#">kontakt</a></li> 
			<li><a href="#">blog</a></li> 
		</ul>
	</div>
</nav>

Czas na style. Menu widoczne po załadowaniu to <nav>. Kiedy strona zacznie się przesuwać w dół, nasze menu otrzyma klasę <small>. W tym przypadku podczas zjazdu strony zmienimy wielkość czcionki w nawigacji, pogrubienie oraz padding wokół <a>.

body{
	background: lightgray; 
	margin: 0px;
	padding: 0px;
}

nav{
	background: white;
	position: fixed;// DZIEKI TEMU MENU BEDZIE ZJEZDZALO WRAZ ZE STRONA
	top: 0px;// MENU BEDZIE ZACZEPIONE U GORY STRONY - 0PX OD GORNEJ KRAWEDZI
	width: 100%;
	transition-timing-function: linear;// przejscie z jednakowa predkoscia od poczatku do konca
	transition-duration: 200ms;	// czas trwania przejscia
	transition-property: all;
}

nav a{// tutaj okreslamy wyglad linkow przed zjazdem menu
	text-decoration: none;
	color: black;
	font-family: Arial;
	text-transform: uppercase;
	font-weight: 900;// ta wartosc ulegnie zmianie podczas zjazdu menu
	display: block;
	transition-duration: 300ms;
	transition-property: all;
	padding: 20px 0px 40px 0px;	// ta wartosc ulegnie zmianie podczas zjazdu menu
}

nav.small a {// tutaj okreslamy jak maja wygladac linki w malym menu - po zjezdzie
  padding: 0px 0px 20px 0px;// maja miec mniejszy padding
  font-size: 14px;// mniejsza czcionke
  font-weight: 100;// oraz nie beda pogrubione
}

nav div{
	width: 80%;
	margin: auto;
}

nav ul{
	list-style: none;
}

nav ul li{
	width: 20%;
	float: left;
	text-align: center;
}

Ostatnim krokiem jest dodanie odpowiedniego kodu jQuery, który sprawi, że po zjeździe w dół, menu otrzyma odpowiednią klasę, a po powrocie na górę, ta klasa zostanie usunięta. Całą resztą zajmuje się kod css, który już umieściliśmy.

$(window).scroll(function(){
   var top = $(window).scrollTop();
   var find_class_small = $.contains('nav', '.small');
 
   if(top > 50 && find_class_small == false) { // tu zmieniamy wysokosc - gdy strona zjedzie 50px w dol
    $('nav').addClass('small'); // nawigacja otrzyma klase small
   }
   else {
    $('nav').removeClass('small'); // w przeciwnym wypadku usuwamy klase small
   }
 
});

To wszystko, poniżej zamieszczam cały kod, dzięki któremu można zmniejszyć menu podczas przewijania strony. Tutaj znajduje się efekt.

POWODZENIA! W razie pytań, zapraszam do kontaktu.

<!DOCTYPE html>

<html lang="pl-PL">

<head>
<meta charset="UTF-8">
  <style>
	#about{
		height: 2000px;
	}

	body{
		background: lightgray;
		margin: 0px;
		padding: 0px;
	}

	nav{
		background: white;
		position: fixed;
		top: 0px;
		width: 100%;
		transition-timing-function: linear;
		transition-duration: 200ms;
		transition-property: all;
	}

	nav.small a {
	  padding: 0px 0px 20px 0px;
	  font-size: 14px;
	  font-weight: 100;
	}

	nav div{
		width: 80%;
		margin: auto;
	}

	nav ul{
		list-style: none;
	}

	nav ul li{
		width: 20%;
		float: left;
		text-align: center;
	}

	nav a{
		text-decoration: none;
		color: black;
		font-family: Arial;
		text-transform: uppercase;
		font-weight: 900;
		display: block;
		transition-timing-function: cubic-bezier(.08,.61,.79,1.75);
		transition-duration: 300ms;
		transition-property: all;
		padding: 20px 0px 40px 0px;
	}


  </style>
</head>

<body>

<nav>
    <div>
        <ul>
            <li><a href="#">projekty</a></li>
            <li><a href="#">o nas</a></li>
            <li><a href="#">oferta</a></li>
            <li><a href="#">kontakt</a></li> 
            <li><a href="#">blog</a></li> 
        </ul>
    </div>
</nav>

<section id="about">
	<h1 style="text-align: center; margin-top: 300px;"> 
		Przewin strone w dol, aby zobaczyc jak zweza sie menu 
	</h1>
</section>


<script src="jquery.js"></script>
	<script>
		  $(window).scroll(function(){
		   var top = $(window).scrollTop();
		   var find_class_small = $.contains('nav', '.small');

		   if(top > 50 && find_class_small == false) {
			$('nav').addClass('small');
		   }
		   else {
			$('nav').removeClass('small');
		   }

		  });
	</script>
</body>
</html>
</html>

KOMENTARZE

Waldek pisze:

20 sierpnia 2016 o 7:15 pm

Witam. Jak dodać do menu logo, które będzie też zmieniać swoją wielkość w zależności od wielkości menu? Pozdrawiam

Odpowiedz
1. Martyna Rejkowicz pisze:
  
  20 sierpnia 2016 o 8:01 pm
  
  Witam, w tym przypadku określiliśmy, że po zjeździe w dół menu otrzyma klasę 'small'. W css natomiast określiliśmy, że wszystkie linki w 'small' mają mieć padding: 0px 0px 20px 0px; font-size: 14px; font-weight: 100;.
  Poza listą, możemy dodać kolejnego linka z logo strony np. <a href="https://www.rejkowicz.pl"> <img src="sciezka"/> </a>. . Wtedy w css możemy dodać nav.small img{ width: 200px; margin-top: -15px;}
  Przykład takiego rozwiązania można znaleźć w kodzie strony dla wypożyczalni samochodów.
  
  Pozdrawiam serdecznie 🙂
  
  Odpowiedz

JAK ZMIENIĆ WYSOKOŚĆ NAWIGACJI PRZY PRZEWIJANIU?

KOMENTARZE

Dodaj komentarz Anuluj pisanie odpowiedzi