Egyoldalas navigáció bemutatkozó oldalakhoz, landing pagekhez

Címkék: , , ,

one

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 bejegyzés?

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



Akikre büszkék vagyunk

Siker sztorik

Molnár Erika

Molnár Erika

Nekem borzasztó érthető volt, követhető és minden támogatást megkaptam. A facebook csoportban lehet kérdezni, rávezetnek a megoldásra és így nagyon gyorsan lehet fejlődni. Mindenképp ezzel akarok foglalkozni. Leginkábban abban szeretnék fejlődni, hogy egyedi sablonokat építsek, mert nagyon sok olyan felhasználó van, aki előre készített komponensekből akarja összerakatni a weboldalát, de én jobbat szeretnék, főleg így, hogy beleláttam a HTML és a sablonkészítés rejtelmeibe.

Elolvasom >>>

Nekem való?

Maradtak még kérdéseid?

Ha nem vagy biztos benne, hogy ez Neked való, vagy további kérdéseid vannak a kurzusokkal kapcsolatban,
írd meg chaten és 48 órán belül válaszolok!

Kérdezek!

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 bevezetlek a programozás alapismereteibe teljesen programfüggetlenül.

Megismerkedhetsz az algoritmusokkal, ciklusokkal, logikai műveletekkel és adattípusokkal, emellett gyakorlati feladatokat is kapsz minden témakörhöz. Mindezt egy kényelmes online oktatófelületen.

Regisztrálj és kezdd el még ma!

szám, kisbetű, nagybetű, legalább 8 karakter

Elolvastam és elfogadom az Adatvédelmi Nyilatkozatot

A programozás alapjai

Kövesd közösségi csatornáinkat is!