Mérei Tamás webdesigner

Tutorial: menüpontok váltása jQuery-vel 2

Szerző:   |   2012-09-21

Íme egy újabb, látványosabb megoldás, az előző bejegyzés mintájára.

A működő kódot ide kattintva tudod megnézni.

HTML forráskód


	<div id="wrapper">
		<h1>.: jQuery demo :.</h1>
		<h2>elso cimsor</h2>
		<div class="content">
			<img src="1.png" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, quam eu lobortis malesuada, tortor sapien molestie ante, vel pulvinar mi tortor a nunc. Aliquam sollicitudin tortor et eros mattis lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada erat at arcu dapibus cursus. Fusce urna mi, congue quis egestas sit amet, scelerisque at turpis. Suspendisse potenti. Sed consectetur quam eu risus sodales placerat. Sed lectus nisi, fermentum sed porttitor quis, tempus eget dui. Duis condimentum posuere consectetur. Fusce vel enim felis, vel posuere orci. In non nibh risus, sit amet ultrices lacus.</p>
		</div>

		<h2>masodik cimsor</h2>
		<div class="content">
			<img src="2.png" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, quam eu lobortis malesuada, tortor sapien molestie ante, vel pulvinar mi tortor a nunc. Aliquam sollicitudin tortor et eros mattis lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada erat at arcu dapibus cursus. Fusce urna mi, congue quis egestas sit amet, scelerisque at turpis. Suspendisse potenti. Sed consectetur quam eu risus sodales placerat. Sed lectus nisi, fermentum sed porttitor quis, tempus eget dui. Duis condimentum posuere consectetur. Fusce vel enim felis, vel posuere orci. In non nibh risus, sit amet ultrices lacus.</p>
		</div>

		<h2>harmadik cimsor</h2>
		<div class="content">
			<img src="3.png" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, quam eu lobortis malesuada, tortor sapien molestie ante, vel pulvinar mi tortor a nunc. Aliquam sollicitudin tortor et eros mattis lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada erat at arcu dapibus cursus. Fusce urna mi, congue quis egestas sit amet, scelerisque at turpis. Suspendisse potenti. Sed consectetur quam eu risus sodales placerat. Sed lectus nisi, fermentum sed porttitor quis, tempus eget dui. Duis condimentum posuere consectetur. Fusce vel enim felis, vel posuere orci. In non nibh risus, sit amet ultrices lacus.</p>
		</div>
	</div>

CSS forráskód


* {
	padding: 0;
	margin: 0;
	border: 0
}
body {
	background: #2f2333;
	margin: 20px;
	font-family: arial;
	font-size: 12px
}
div#wrapper {
	width: 400px;
	margin: 0 auto
}
div#wrapper h1 {
	font-size: 30px;
	margin: 50px 0 20px 0;
	text-align: center;
	color: #f5b431
}
div#wrapper h2 {
	background: url('arrow.png') no-repeat #c1cca0 right -45px;
	padding: 7px 10px;
	margin: 0 0 10px 0;
	font: bold 15px Arial, Helvetica, sans-serif;
	cursor: pointer;
	color: #737d56;
	border-radius: 10px
}
div#wrapper h2:hover {
	background-color: #737d56;
	color: #c1cca0
}
div#wrapper h2.active {
	background-position: right 5px
}
div#wrapper div.content {
	margin: 10px 0;
	border-radius: 10px;
	padding: 10px;
	display: none;
	background: #4e3e54;
	color: #beaec4
}
div#wrapper div.content p {
	line-height: 20px
}
div#wrapper div.content img {
	margin: 0 0 10px 0
}

jQuery forráskód


$(document).ready(function(){
	// az elso H2 tag-re rateszi az active class-t
	$("h2").eq(0).addClass("active");

	// megjeleniti az elso .content class-al ellatott DIV-et
	$(".content").eq(0).show();

	// kattintas valamelyik H2 tagen
	$("h2").click(function(){
		// megjeleniti a hozza tartozo DIV-et
		// valamint osszecsukja a megnyitottakat
		$(this).next(".content").slideToggle("slow").siblings(".content").slideUp("slow");
		// rateszi az active class-t
		$(this).toggleClass("active");
		// az osszes tobbi H2-rol leveszi az active class-t
		$(this).siblings("h2").removeClass("active");
	});
});

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

23 hozzászólás

  1. Szabi
    2014. április 30. szerda - 09:00

    Szija egy olyan kérdésem lenne, hogy link-ek után gördüljenek le , azt meg lehet csinálni?… PL. Home
    és akkor ha rákattanok a home linkre, akkor gorduljon le a home div

    • cyrex
      2014. május 28. szerda - 22:41

      Miért ne lehetne? Lecseréled a H2 tag-et A tagre és ennek megfelelően módosítod a JS-t.

  2. Hanga
    2013. szeptember 23. hétfő - 19:06

    Sziasztok!

    Nekem e107 hez kellene,de sehogysem boldogulok,valaki tudna nekem segíteni???????
    tehát hogy mit hogy,és mit hová kell rakni???előre is köszönöm!

    • cyrex
      2013. szeptember 29. vasárnap - 23:49

      Nem ismerem az e107 tartalomkezelőt, sosem használtam még.

  3. popa
    2013. június 7. péntek - 22:41

    Nagyszerűen működik, csak a kis háromszög nem vált irányt. Mit tegyek?

    • Kóró Papa
      2014. július 9. szerda - 10:49

      Töltsd le a demo lapról az arrow.png nevű képet!

  4. Valentin
    2013. február 18. hétfő - 13:00

    Szia Cyrex!
    Nekem nem akar legördűlni Chrome böngésző alatt. Mit csináljak? :/

    • cyrex
      2013. február 18. hétfő - 17:02

      Itt a link, működik króm alatt: cyrex.hu/uploads/2012/09/jquery_menu2

    • KikI
      2013. június 18. kedd - 09:25

      Mert a html kódba nincs benne a jquery kód amit a code.jquery.com-ről kell betöltened 🙂

  5. Szepi
    2012. december 21. péntek - 14:25

    Szia nekem olyan gondom lenne hogy Chrome alatt fut, de IE alatt nem akar legördülni a sáv azzal mit lehetne kezdeni?:) Köszi csáó

    • Szepi
      2012. december 26. szerda - 22:49

      Sziasztok 🙂 megoldottam 🙂 de most olyan kérdésem lenne hogy olyat nem lehet rá tenni hogy automatikusan váltsa egymást??:) a három címsor?

  6. Tom007
    2012. december 14. péntek - 20:35

    Lenne hozzád egy olyan kérdésem hogy itt a blogodon a hozzászólás rendszert milyen programozási nyelvvel készítetted?
    Nem csinálsz ehhez kapcsolódó tutorialt?
    🙂

    • cyrex
      2012. december 14. péntek - 21:01

      Ez a WordPress blogmotor része.

    • Tom007
      2012. december 14. péntek - 21:31

      Értem. Ez hasonló mint a CSS? WordPresshez még nem értek. Lehet hogy nagy baromságot kérdezek de ezt le kell tölteni valahol hogy használni lehessen?

    • cyrex
      2012. december 14. péntek - 22:56

      Gugli első találatot nézd meg.

  7. Bergkamp
    2012. november 1. csütörtök - 14:45

    Szia!

    Tudsz mondani valami megoldást arra hogy ez oldalra nyíljon így ki? SlideLeft függvényt nem találtam :/

  8. Raim
    2012. október 6. szombat - 23:41

    Ez örült jó! Nagyon szépen köszönöm a feltöltésed! 🙂

  9. mihalyka96
    2012. október 3. szerda - 14:38

    szia!!
    jQuery forráskódot hova kell berakni?

    • Cristensen
      2012. november 19. hétfő - 15:23

      hello!

      jquery.com oldalon a jobb sarokban a download gomb felett a második lehetőséget jelöld be majd katt a downloadra, ekkor sok sok kód fog megjelenni a böngésző ablakodban. Nem is kell sehova menned, nyomsz egy Ctrl+s bill. kombinációt és beteszed a html meg többi a weboldallal kapcsolatos fájlod közé, és végül a html fájlodban a közé beírod ezt: (vagyis amit letöltöttél azt a fájlt kell berakni)!

      Remélem érthető volt valamennyire:)!

    • Cristensen
      2012. november 19. hétfő - 15:25

      na bakker a kód részleteket nem engedélyezte! remek, annyi maradt ki hogy a headek közé kell script ek közé betallózni(src) a fájl nevét amit letöltöttél

  10. Sim
    2012. október 2. kedd - 09:39

    Szia Cyrex!

    Nagyon szép megoldás, gratulálok. Chrome alatt tökéletes!
    Azonban IE 8 alatt a váltáskor h2 tagok közvetlenül egymás alá csúsznak. (10px ? eltartás nincs meg!)
    Az egér mozgatása után valahogy beáll az optimális állapot. Nem lehetne megoldani az IE alatt is a Chrome –hoz hasonló működést?

    Válaszodat, segítségedet előre is köszönöm

  11. tichi
    2012. szeptember 22. szombat - 16:01

    Kedves cyrex!
    Nagyon jó lett ez is és többi tutorialod is!!!
    Jó lenne több videó tutorial, mert már az összeset (!) megnéztem és többségüket meg is csináltam!

  12. ViSTA
    2012. szeptember 21. péntek - 22:02

    Üdv!

    Jól néz ki, köszi!

Hozzászólás

Legújabb hozzászólások