Egyoldalas navigáció bemutatkozó oldalakhoz, landing pagekhez

2020.12.11. Címkék: , , ,

Egyoldalas navigáció bemutatkozó oldalakhoz, landing pagekhez

Ez egy olyan megoldás, amikor egy menüpont nem a weboldal egyik aloldalára mutat, hanem a weblapon belül egy adott szakaszhoz ugrik kattintásra. Ehhez nincs más dolgod, csak a menüben horgony linkeket elhelyezni, amelyek az oldal megfelelő szekcióira mutatnak. Ez egy általános HTML technika, ami már a weboldal készítés első napjaiban is létezett és használjuk ma is, a jobb felhasználói élmény érdekében. Nézzük át hogyan tudod megvalósítani ezt a megoldást.

1. Hozzd létre a HTML struktúrát

Készítsd el a szakaszokat, állítsd be az azonosítókat és tegyél bele megfelelő mennyiségű szöveget is.

<section id="home">
	<div class="content-box">
		<h2>Hello</h2>
	</div>
</section>
<section id="about">
	<div class="content-box">
		<h2>Rólam</h2>
	</div>
</section>
<section id="services">
	<div class="content-box">
		<h2>Szolgáltatások</h2>
	</div>
</section>
<section id="portfolio">
	<div class="content-box">
		<h2>Porfólió</h2>
	</div>
</section>
<section id="contact">
	<div class="content-box">
		<h2>Kapcsolat</h2>
	</div>
</section>

2. Szakaszok megjelölése

Az első dolog, hogy meg kell jelölni a tartalomban, hogy hol kezdődnek az egyes szakaszok, amikre majd hivatkozol a menüből horgony linkekkel. Erre 3 alapvető módszer létezik:

  1. Horgonycímke név attribútummal
    <a name="section_one"></a>

  2. ID a szakasz címéhez
    <h3 id="section_one">Első szakaszom</h3>

  3. Vagy használható a szakasz ID-ja
    <div id="section_one"></div>

Mindhárom technika beállít az oldalon egy “jelölőt”, amit felhasználhatsz a menüben. Ne használj ékezetet, nagybetűt, se fura karaktereket.

3. Készítsd el a menüt

A menü elemeihez pontosan olyan horgony hivatkozásokat kell készíteni, mint, ahogyan elnevezted a szakaszokat. Ha a hivatkozásban nincs semmilyen domain, vagy útvonal, az azt jelenti, hogy a link ugyanazon az oldalon belül hivatkozik egy.

<nav>
	<ul>
		<li><a class="jump" href="#home">Hello</a></li>
		<li><a class="jump" href="#about">Rólam</a></li>
		<li><a class="jump" href="#services">Szolgáltatások</a></li>
		<li><a class="jump" href="#portfolio">Porfólió</a></li>
		<li><a class="jump" href="#contact">Kapcsolat</a></li>
	</ul>
</nav>

4. CSS formázások

Formázz meg mindent CSS-el tetszés szerint, tegyél mindenhova megfelelő méretű margót és állíts be minden szükséges stílust.

5. jQuery smooth görgetés

Az alábbi script futtatásához először be kell töltened a jQuery könyvtárat a HTML dokumentumod </body> címkéje elé, majd ezt követően másold a kódot az oldalaba. A görgetés mértékéhez érdemes hozzáadni a fejléc magasságát, hogy a görgetés után a szakasz ne csússzon be a menü alá. Az animáció 500 milliszekundum alatt történik, ezt tetszés szerint módosítható.

<script>
 $(document).ready(function () {
 	var header = $('#header').height(); // fejléc magassága
 	$('body').css('padding-top', header + 'px'); // body padding növelése
 	$('.jump').click(function () {
 		$('html, body').animate({
 			scrollTop: $($.attr(this, 'href')).offset().top - header // ugrás a megfelelő szekcióhoz
 		}, 500);
 	});
 });
</script>

Most már nincs más hátra mint mindent egybe fűzni.

Töltsd le a demót



Tetszett a segédlet?

Iratkozz fel és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.


A programozás alapjai

Ingyenes leckesorozat!

Ahhoz, hogy később kód szinten is meg tudj valósítani összetettebb frontend igényeket, tisztában kell lenned a programozás alapfogalmaival. Ebben a leckesorozatban megismerkedhetsz a programozás alapismereteivel, teljesen programfüggetlenül. Gyakorlati feladatokat is kapsz minden témakörhöz, melyek kidolgozását a következő heti levél tartalmazza majd.

Egyetértek és elfogadom az adatvédelmi tájékoztatóban foglaltakat.

Ingyenes leckesorozat!

A weboldalon sütiket használunk, hogy fokozzuk a teljesítményét és a felhasználói élményt. Az oldal további használatával beleegyezik a sütik használatába. Cookie tájékoztató

A süti beállítások ennél a honlapnál engedélyezett a legjobb felhasználói élmény érdekében. Amennyiben a beállítás változtatása nélkül kerül sor a honlap használatára, vagy az "Elfogadás" gombra történik kattintás, azzal a felhasználó elfogadja a sütik használatát.

Bezárás