HTML + CSS + jQuery menü

Szerző:   |   2011-05-13

Na már megint egy menü. Ez nem tiszta CSS, kell hozzá pár sor jQuery, de valamivel talán használhatóbb, mint a legutóbbi variáció.

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

Videó

Videó

HTML forráskód


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css menu</title>
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
</head>
<body>

<div id="container">

	<ul id="menu">
		<li>
			<div>lorem ipsum</div>
			<ul>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
			</ul>
		</li>
		<li><a href="">viverra</a></li>
		<li><a href="">vestibulum</a></li>
		<li>
			<div>dolor sit</div>
			<ul>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
				<li><a href="">submenu item 1</a></li>
			</ul>
		</li>
		<li><a href="">faucibus</a></li>
	</ul>

	<div style="clear:both"></div>
	
	<div id="content">
		<h1>Lorem ipsum</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem eros, mollis sed bibendum et, tempus a augue. Nullam tempor, purus eu vulputate lacinia, ante nibh lobortis massa, non hendrerit ligula enim ut nulla. Etiam laoreet lacinia nibh et iaculis. In ac urna massa, non cursus ante. Sed vel magna elit. Nulla consequat turpis a arcu ullamcorper posuere. Nunc accumsan interdum pellentesque. Phasellus at neque elit, et sodales neque. Aenean dapibus sodales blandit. Ut pharetra, nibh vitae rutrum posuere, mauris purus volutpat neque, sit amet dictum purus augue nec ipsum. Etiam ac tortor urna. In hac habitasse platea dictumst. Pellentesque ut tellus placerat velit commodo gravida.</p>
		<p>Suspendisse vitae tellus non nulla malesuada ultricies eget sit amet nunc. Curabitur ultricies orci rutrum ipsum pretium ac suscipit turpis mattis. Donec et gravida diam. Suspendisse vitae lacus quis purus ullamcorper fringilla. Etiam porttitor neque magna. Maecenas et ligula lorem, a laoreet dolor. Duis sollicitudin pulvinar ligula, eget imperdiet nisl varius vel. Nulla facilisi. Vestibulum orci felis, semper nec sodales eget, molestie vel lorem. Integer tincidunt, est non fermentum dignissim, neque magna vehicula sapien, eget blandit ante nibh eu lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam justo magna, molestie et scelerisque quis, convallis in diam. Nam diam enim, sagittis venenatis tempus vel, imperdiet in mauris. Suspendisse viverra tortor ac tellus molestie placerat. Aliquam ligula lacus, viverra quis pretium at, dignissim vel leo. Integer tristique massa ut magna eleifend eget laoreet tellus rutrum.</p>
	</div>
</div>

</body>
</html>

CSS forráskód


* {
	padding: 0;
	margin: 0;
}
body {
	background: #999;
	font-family: arial,tahoma,verdana;
	font-size: 11px;
	margin-top: 30px;
}
div#container {
	width: 740px;
	margin: 0 auto;
}
div#content {
	background: #898989;
	color: #fff;
	padding: 20px;
	margin-top: 1px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow: 2px 2px 2px #787878;
}
div#content h1 {
	font-family: georgia;
	font-size: 30px;
	margin: 0 0 20px 0;
	padding: 0;
}
div#content p {
	text-align: justify;
	line-height: 18px;
	margin: 0 0 10px 0;
}
ul#menu a,
ul#menu div {
	padding: 10px 20px;
	display: block;
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
	font-weight: bold;
}
ul#menu div {
	cursor: pointer;
	background: url('arrow_down.png') no-repeat 95% 50%;
}
ul#menu li {
	list-style: none;
	float: left;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	background: #7d1783;
	background: -moz-linear-gradient(top, #a821b0 0%, #7d1783 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#a821b0), to(#7d1783));
	margin-right: 1px;
	width: 140px;
	text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
ul#menu li:hover {
	background: #650c6a;
}
ul#menu li ul {
	display: none;
	position: absolute;
	border-top: 1px solid transparent;
}
ul#menu ul li {
	float: none;
	text-transform: lowercase;
	margin: 0;
	background: url('arrow_right.png') no-repeat #3f3f3f 5% 50%;
	font-size: 11px;
	border-radius: 0;
	box-shadow: none;
}
ul#menu ul li:hover {
	background: url('arrow_right.png') no-repeat #000 5% 50%;
}
ul#menu ul li a {
	padding: 10px;
}

jQuery forráskód


$(document).ready(function(){
	
	$("ul#menu li:last-child").css("margin-right",0);

	$("ul#menu div").click(
		function(){

			$(this).parent().find("div").css("background-image","url(arrow_up.png)");
			$(this).parent().find("ul").slideDown("slow");

			$(this).parent().hover(
				function(){},
				function(){
					$(this).parent().find("ul").slideUp('slow');
					$(this).parent().find("div").css("background-image","url(arrow_down.png)");
				}
			);

		}
	);
});

77 hozzászólás

  1. 2013. október 22. kedd - 16:35

    Helló!

    Először is köszi a kódot és a tutorialt! 🙂 Egy gyakran visszatérő problémám lenne viszont: IE alatt nem oké a dolog. (Nekem IE 10 van a gépen.) Van valami ötleted hogy lehetne ezt kiküszöbölni? Az átszínezéseket, meg hogy elcsúszik a menüsor még csak-csak megoldom egy külön css-ben, de sajnos a legördülő menü egyáltalán nem működik. Szakdogához kéne a honlap, szóval nagyon hálás lennék bármilyen ötletért, válaszért. 🙂

    Üdv!

    • 2013. október 22. kedd - 17:33

      Bocs, azt kihagytam, hogy offline nem működik. Kíváncsiságból feltettem ideiglenesen egy ingyenes uw.hu-s tárhelyre, és ott jó volt…

    • 2013. október 23. szerda - 19:32

      Lokálban engedélyezni kell IE alatt, hogy működjön a JS, elvileg fel is dobja a kérdést amikor megnyitod a fájlt.

  2. 2013. szeptember 2. hétfő - 16:17

    Üdv.

    Egy kérdésem lenne, hogy lehetne azt megoldani, hogy csak a kis nyílra kattintva jöjjön elő a menü? Szóval a menügomb nyisson meg egy adott hivatkozást, és a kis képre,nyílra kattintva tudjam előhozni a menüt?

    Tisztelettel: Rp

    • 2013. szeptember 5. csütörtök - 14:20

      Adsz egy classnevet a DIV-nek amiben a nyilacska található, és arra írsz jQuery-ben click eseményt ami megjeleníti az almenüt.

  3. 2013. május 12. vasárnap - 14:20

    Szia!

    Nagyon tetszik a vweboldalad és a bemutató videóid! Nagyon örültem, mikor megtaláltam, mert ezek az első olyan videók, amiről lejött azonnal, hogy aki csilája, az profi!

    Tetszett a menü megoldásod és ez miatt is írok.
    Kérlek segíts abban, hogy lehet megoldani, hogy a menüben lévő hivatkozások a “content” részben jelenjenek meg!

    Jelenleg a kezdő, illetve a tanuló fázisban vagyok, de felválaltam a vállalkozásom weboldalának elkészítését és ehhez szükségem van a segítségedre!

    Előre is köszi!

    Csövi

    • 2013. július 13. szombat - 22:19

      Nem értem a kérdést pontosan.

    • 2013. december 15. vasárnap - 12:37

      értem mire gondolsz, de szerintem május óta a kedved elment az egésztől :DDDD

  4. 2013. február 24. vasárnap - 15:19

    Üdv! Meg szeretném tudakolni miként tudnék még további almenüket be tenni nagyon fontos volna számomra.
    Előre is köszi a segítséget.

  5. 2012. október 5. péntek - 14:30

    Szia!
    Van egy weboldalam, melyben egy javascript menu segítségével váltogatom az oldalakat, s töltöm be őket középre. Az egyik ilyen új oldalra szeretném berakni az általad készített jQuery menüt. Ha csak ezt az oldalt nyitom meg akkor minden simán klappol, viszont ha a főoldalról nyitom meg, akkor csak a menüpontok jelennek meg, de már nem gördül le a menü. Volna esetleg ötleted, hogy mi lehet a gond ezzel?
    Üdv: jack

  6. 2012. augusztus 5. vasárnap - 12:26

    Szia Cyrex!

    azt hogyan csináljam meg, hogy ha ráviszem az egeret egy almenü pontra ott még egy menü jelenjen meg?

    • 2013. július 13. szombat - 22:18

      “CSS multilevel drop down menu” kulcsszavakra guglizz.

  7. 2012. augusztus 5. vasárnap - 12:24

    Szia Cyrex!

    Azt hogyan csináljam meg, hogy ha ráviszem az egeret az egyik almenü pontra ott legördüljön még egy menü?

    A választ előre is köszönöm!

  8. 2012. június 19. kedd - 12:06

    Üdv!
    Nagyon tetszett videód.
    A nyilakat feltudnád tölteni valahova mert már többször is okozott nekem problémát az hogy nem találtam megfelelő képet.Előre is köszi.:)

    • 2012. június 19. kedd - 21:57

      Nincs már meg nekem ez a cucc. Photoshop-ban 5 kattintással tudsz rajzolni ilyen nyilat.

  9. 2012. április 17. kedd - 16:04

    Szia Cyrex.

    Nagyon jó a menű, és szeretném is használni, de van egy gondom. Flash et szeretnék a menü alá közvetlen berakni. Firefoxba müxik a dolog, de se ie. ben, se chrome ban nem müxik. Tudnál valamiféle megoldást a problémámra?

    Köszi előre is

    • 2012. május 7. hétfő - 21:41

      Mi a gond vele? Eltakarja a flash a menüt? Mert ez szokott tipikus probléma lenni amin a z-index-el, illetve wmode=”trasparent” segítségével lehet javítani.

  10. 2012. március 29. csütörtök - 19:22

    Amúgy SlideUp helyett használhattok sllideToggle-t is és akkor nem kell szórakozni azzal hogy leellenőrizd hogy mikor lép életbe az onmouseover.

  11. 2012. március 10. szombat - 23:19

    A nyilakat honnan lehet letölteni? :$

  12. 2012. február 22. szerda - 19:03

    Hello.Eloszor is gratulalni szeretnek a videoidhoz nagyon jok sokat lehet tanulni beloluk.
    Ennek a videonak az alapjan keszitettem a most keszulo veboldalamra egy olyan reszt ahol egy gomb katintasara lenyilik egy ablak.Eddig meg is van szepen is nez ki de hogyan tudnam azt megcsinalni hogy a lenyilo ablakban legyen egy “bezar” feliratu gomb es csak annak a lenyomasavval zaruljon be az ablak es nem hover esemenyre.
    A bezar gombot meg is csinaltam a lenyilo ablakban csak azt nem tudom hogy birjam mukodesre kesztetni:).
    Elore is koszonom a valaszt.
    Segitsegnek itt van a link ahol meg is tekintheto: http://www.play.erneszthome.com/

    • 2012. február 26. vasárnap - 17:08

      Az eredeti kerdesemet megoldottam megpeddig igy :

      $(document).ready(function(){
      $(“ul#fixed_top li div”).click(function(){
      $(this).parent().find(“div.button_fixed_top”).css(“background-image”,”url(style/img/menu/arrow_up.png)”);
      $(this).parent().find(“ul div”).slideUp(“slow”);
      $(this).parent().find(“ul div”).slideDown(“slow”);
      });
      $(“div.close”).click(function(){
      $(this).parent(“div:first”).slideUp(‘slow’);
      });
      });

      de ujabb problemaba utkoztem,espeddig,hogy mivvel tobb divet is le lehet nyitni evvel a koddal amit csinaltam nem lehet bezarni oket csak ugy ha a close gombra van katintva.
      Ugy szeretnem megoldani hogy ha le van nyitva egy div es meg szeretnek nyitni egy masikat is akkor az elozo az automatikusan bezarodjon es minddig csak az utolag megnyitott legyen nyitva.
      Nagyon sokat jelentenne nekem ennek a dolognak a megoldasa ,kerem segitsen aki tudja a valaszt ra.
      Koszonom elore is

  13. 2012. február 17. péntek - 12:27

    nagyon jó ez a tutorial cyrex 🙂 Abban kérem a segítségedet hogy mi lehet a probléma és a megoldás. Van egy article fejléc teg em, az alatt van egy törzs teg em ugyan csak article ben, a törzs ben pedig 3 további article van folat al egymás mellé lebegtetve. A fejléc és a törzs pozicionálása relatív, a többi pedig absolute. A probléma az, hogy amikor rá kattintok a a menüre és le gördül azok az almenük amik bele lógnak az alatta lévő teg ekbe nem lehet rá kattintani, de még azt sem érzékeli hogy egér mutató van fölötte. Ha feljebb viszem a menüt akkor probléma nélkül működik. Mi lehet a probléma?

  14. 2011. december 16. péntek - 07:52

    Hali kérhetnék olyan nyilakat? PS 3maqmmal nem tok csinálni :O és kiakarok próbálni vmit 🙁

  15. 2011. november 18. péntek - 18:37

    Nagyon jó a videó, köszi! Sokat segített (meg a többi is)! 🙂

    Az a problémám, hogy a “Tutorial: HTML + CSS az alapoktól 8. rész” (cyrex.hu/2010/12/14/tutorial-html-css-az-alapoktol-8-resz) videóban látott weboldalt és ezt a jQuery menüt kombinálni akartam, azzal a változtatással, hogy a ‘container’ id-jű div-ben lévő tartalmat egy újonnan létrehozott ‘content’ div-be helyeztem (és minden stíluselemet is, kivéve a 800pixeles szélességet).
    De a menü nem akar a container-en belül bal oldalt helyezkedni.

    Tehát a lényeg az lenne, hogy a menü nem akar bal oldalt elhelyezkedni a menü, ha pedig ‘float: left’-et használok, akkor csak megnő a távolság a menü és az oldal között. Ezt hogy lehetne megoldani?

    • 2011. november 27. vasárnap - 16:25

      Ez a problémám is megoldódott, én hülye elfelejtettem kikapcsolni a magrin-t és a padding-et. 😀

  16. 2011. október 14. péntek - 18:23

    Helo! Az előző kommenthez kicsit kapcsolódik a kérdésem, de csak annyiban, hogy én egy olyan javascriptet helyeztem az oldalra, ami ha egy linkre viszem az egeret, megjelenít egy képet szöveget stb, ami követi az egeret, amíg a linken mozgatom. és automatikusan úgy teszi a képet, hogy beférjen az ablakba. Innen: http://mootools.net/ De az a problémám, hogy ekkor a jquerry meghal. Ezzel mit lehet kezdeni? Miért nem megy egymással a kettő? Köszi

    • 2011. október 14. péntek - 19:10

      Eddig divekkel oldottam meg egyszerű js-sel, de annak az volt a hátránya hogy css-ben meg kellett adnom a div pontos helyét, ezáltal, ha 1024-nél nagyobb képernyővel nyitják meg, máshova került az oldalhoz képest. Van még valamilyen js megoldás, ami nem ütközik a jqurreyvel?

    • 2011. október 15. szombat - 15:51

      köszi. megoldottam. Találtam jquery-t, ami ugyan nem ismeri fel a window széleit, de legalább nem ezer soros kód, és így nem akad össze a másikkal, kis barkáccsal jól működik. 🙂 A diveket meg (abszolút-relatív) kombó helyzetbe raktam, hogy erre eddig miért nem gondoltam? 🙂

  17. 2011. október 11. kedd - 21:13

    Én nem azt kérdeztem ,hogy lehet-e több javascript egy oldalon hanem ,”hogy lehet rakni több javascriptet egy oldalra?”

    • 2011. október 12. szerda - 14:23

      Az előző hozzászólásomba beraktam a példát is csak nem jeleníti meg az oldal a html tagokat.
      De itt van képben mit hogyan kell remélem tudtam segíteni ha nem akkor írj ismét hozzászólásban.
      kép: http://noob.hu/2011/10/12/jshelper.png

  18. 2011. október 9. vasárnap - 21:37

    Üdv
    Lenne egy olyan kérdésem ,hogy lehet több javascript rakni 1 oldalra?Mert nekem nem jön össze sehogy.

    • 2011. október 10. hétfő - 10:44

      Szia.

      Már miért ne lehetne több javascriptet berakni 1 oldalra?

  19. 2011. október 6. csütörtök - 00:01

    hali nekem anyi gondom lenne hogy beraktam a menüt a weblapomhoz.
    és a css fájlban ugye egy * karakterrel kezdődik. Nah ha azt kihagyom gondolom észrevétlenül hagya a padding,margin beállítást, de ilyenkor az al-menük elcsüsznak, ha oda rakom a * karaktert akkor jó helyen van az al menü, viszont az egész weblapom középre igazítását figyelmen kívül felrak mindent a bal sarokba.. mi lehet a gond?

  20. 2011. október 2. vasárnap - 17:14

    szia hogy kell aszt megcsinálni hogy a menü linkeit középre nyisa meg?

    • 2011. október 8. szombat - 10:46

      asztat, előbb írd le rendesen….

      menü linkjei középen legyenek,
      vagy amit a linkekkel nyitsz meg középre tegye
      de legegyszerűbb a text-align: center;

    • 2011. október 12. szerda - 23:27

      amit a linkekkel nyitok meg

  21. 2011. szeptember 28. szerda - 19:15

    Szia cyrex!!! Lenne egy olyan kérdésem hogy hogyan lehetne azt megcsinálni hogy felfele nyíljanak a rejtett menük?

  22. 2011. szeptember 8. csütörtök - 13:21

    Szia! Grat a videóidhoz! Végre nálunk is csinál valaki minőségi, logikus tutoriálokat. Nekem az lenne a kérdésem, hogy mit kell átírni, hogy amikor a menüre kattintok, betöltetem az új oldalt, akkor az új oldalon a menün ahová kattintottam, más színű maradjon, jelezve, hogy hol vagyok? Köszi

    • 2011. szeptember 10. szombat - 19:34

      Hát én azt inkább php-val oldanám meg! ha nemtudod hogykell akkor msn:papri07@hotmail.com és segítek:)

    • 2011. szeptember 15. csütörtök - 10:13

      Szia.

      Szerintem az lenne a leg kézenfekvőbb ha php-ban lekérnéd az URL-ből hogy éppen melyik oldalon vagy, és akkor 1 if-es feltétellel megadni hogy ha X oldalon van akkor a link legyen Y színű.

      Üdv.: Ps

    • 2011. szeptember 17. szombat - 15:06

      Oh, köszi. Nem értek PHP-hoz egyáltalán. Megoldottam máshogy 🙂 Köszi

    • 2011. szeptember 17. szombat - 20:19

      Máshogy nemtudom hogylehetne megcsinálni:D

    • 2011. szeptember 19. hétfő - 23:14

      Hát úgy, hogy nálam mák, mivel a lenyíló menükön csak file-ok megnyitását használom új ablakban, ezért ott nem kell, a többinél meg egyszerűen kiszedem a href linkelést az adott oldalon, ezáltal a block típus megszűnik, és összemegy a menü padding, így máris elkülönül a többitől azon az oldalon 🙂 kissé barkácsmegoldás, de megteszi 🙂
      Most a wordpressel bajlódom, ami tele php-val, ebben lehet segítségedet kérném majd, ha elakadok a kódturkászásban néhol, és megköszönöm, ha segítesz

    • 2011. szeptember 20. kedd - 00:22

      PHP-val célszerű megoldani, a legelegánsabb megoldás, ha arra az LI tag-re teszel egy class-t amelyik éppen aktív.
      Tehát valami ilyesmi: <li class=”selected” > és akkor utána azt csinálsz vele a CSS-ben amit akarsz.

  23. 2011. augusztus 31. szerda - 07:37

    Üdv!
    Még eléggé kezdő vagyok, szeretnék egy kis segítséget kérni. Hogyan tudom elérni azt, hogy az egyes menüpontokra kattintva, a tartalom az oldalon belül, egy DIV-ben jelenjen meg? Jó lenne akár oktatóvideó formában is 🙂 , de bármilyen segítséget szivesen fogadnék 🙂 Előre is köszönöm.

  24. 2011. augusztus 15. hétfő - 15:38

    hello. lenne egy kérdésem h a ” border-top-left-radius ” meg a hasonlo barátai nem jelennek meg minden böngészőn kerekítve és az lenne a kérdésem h ezt h lehetne kiküszöbölni ? :/

    • 2011. augusztus 15. hétfő - 15:48

      Háttérképekkel lehet ügyködni, de szerintem fölösleges. Aki szar böngészőt használ, megérdemli, hogy ne lássa a lekerekítéseket.

  25. 2011. augusztus 3. szerda - 20:03

    igen sajnos és másik gépeken is

  26. 2011. augusztus 3. szerda - 09:12

    Ez időközben megoldódott a karakterkódolásom volt rossz, de most lenne egy másik kérdésem: miért van az, hogy a legördülő menü a tetejéhez képest arréb csúszik kb. egy centit? Mindent úgy csináltam ahogy a videóban mondtad, de nem sikerül.

    • 2011. augusztus 3. szerda - 16:29

      Mindegyik böngészőben rossz?

  27. 2011. augusztus 1. hétfő - 20:19

    Szia megnéztem a videódat nagyon tetszett. Leszedtem a teáltalad írt kódot kipróbáltam és ment úgy ahogy a videóban,csak az ékezetes betűk nem hogyan lehetne ezt kiküszöbölni? mihamarabbi válaszát előre is köszönöm.

  28. 2011. július 17. vasárnap - 16:13

    Helloka, nézegettem a vidid sokat segített, viszont csináltam egy oldalt amire előre elkészítettem a gombokat, lennének almenük is, viszont nem tudtam még elkészíteni a jQueryvel esetleg más megoldást tudsz javasolni üdv.

    • 2011. augusztus 3. szerda - 16:30

      Igen, tiszta CSS-t, javascript nélkül. Erre is találsz videót az oldalon.

  29. 2011. július 9. szombat - 08:47

    Hello!Szeretném megkérdezni hogy ehez hasonló http://noob.hu/2011/07/09/hehe.png legördülő menüt hogy tudnék csinálni? nem a legördülő menüevl van problémám hanem hogy jobb kezdődjön a legördülő rész mármint hogy ha a jobb felső sarokban van a cucc akkor ne tolja el az egész oldalt jobbra! nemtudom mennyire érthető a kérdésem:D ha valaki tudja aválaszt pls írja meg:) köszi előre is:D

    • 2011. július 11. hétfő - 20:49

      szval azt akarod h olyan irányban jöjjön le…azt csak a css-ben kell beállítanod…

    • 2011. július 11. hétfő - 22:00

      hát de pontosan mivel tudom azt beállítani?

  30. 2011. június 25. szombat - 15:03

    Szia :)!
    Remélem jó helyre írok :D. Szóval szeretnék egy ” legördülő szöveget “! Kicsit utánaolvastam a neten, de egyértelmű választ nem kaptam. Tehát azt szeretném, hogyha egy adott szövegre rákattintok, akkor alatta legördül a megjelenítendő szöveg, valahogy olyasmi formában mint ahogyan ezt a menüt is elkészítetted, csak itt simán egy szöveg jön le, hogy Elérhetőségek, stb. DE, ugyanakkor ezt fel is lehetne görgetni, hogy eltűnjön a szöveg. Angol megnevezést is kerestem és valamelyik hozzászólásban ” fieldset ” -nek írták.

    Ha tudnál nekem segíteni azt nagyon megköszönném.
    A választ előre is köszi.

    (Remélem eltudtam magyarázni. :])

    • 2011. június 25. szombat - 15:08

      Bocsi, nem reklámozni akarok, de ezen a honlapon: “http://ucp.seerpg.net/tamogatas.see” megtalálod amire gondoltam. Tehát ott a Fehér “Támogatás” szöveg alatt és a táblázat felett, tehát a fehér Támogatás és a táblázat között van egy “Beváltás” felirat előtte meg egy + jel. Ha arra szövegre rákattintasz, akkor majd előhoz alatta egy szöveget. 🙂

      Remélem így már kicsivel érthetőbb. 😀

  31. 2011. június 18. szombat - 14:27

    Nagyon jó videó, ez egy gyakran előfordul probléma. Ha ezt elsajátítja az ember utána jöhet ez -> http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
    Igaz ehhez nagyon kevés angol tudás nem ár.

  32. 2011. június 13. hétfő - 20:03

    Klassz videó!
    Köszönjük, hogy elkészítetted!

  33. 2011. május 19. csütörtök - 14:33

    Szia! Csinálnál egy olyan vidit amiben sima képekből csinálsz egyszerü menüt előre kösz

    • 2011. június 5. vasárnap - 19:08

      Szerintem ilyen már van. Nézz körbe

  34. 2011. május 14. szombat - 17:32

    Üdv.

    Ez a jQuery-menü nagyon jó.
    Én még szívesen látnék JavaScriptes és jQuery dolgokat.

    Köszönjük a videót!

  35. 2011. május 14. szombat - 12:03

    ez nem ide tartozik, de segítség kéne akárkitől…feltettem a wordpresst és mikor bejegyzést szerkesztek, amit a szerkesztőbe írok azt nem látom csak ha kijelölöm…de az oldalon normálisan megjelenik…csak így rossz vaktában szerkeszteni…nem tudtok rá valami megoldást?…előre is köszi…

    • 2011. május 15. vasárnap - 20:04

      nah?…tud valaki valami megoldást?…

  36. 2011. május 14. szombat - 10:38

    Nagyon vártam az új videódat!
    Jó lett, köszi!
    Remélem mihamarabb nézhetem a következőt!

  37. 2011. május 13. péntek - 21:16

    Köszönjük ezt a friss profi videót. 🙂

  38. 2011. május 13. péntek - 14:42

    Grat jó videó 🙂

  39. 2011. május 13. péntek - 14:33

    Ohóó!! Végre egy új videó! Nagyon jó! Köszönjük Cyrex! 😀

  40. 2011. május 13. péntek - 14:30

    ÜDV! szép videó, a kérdés az lenne, hogy hogyan lehetne azt megoldani, hogy ne kelljen rakattintani a menupontra hanem csak fole mozgatni es igy jojjenek elo az almenuk?

    • 2011. május 13. péntek - 14:38

      Hát nem a click, hanem a hover eseményt vizsgálod. De akkor ezt a kódot át kell alakítani hozzá egy kicsit.

    • 2011. május 13. péntek - 16:30

      2 óra alatt idáig jutottam el : http://pepeweb.square7.ch/ a jQuery valami miatt nem ugy megy ahogy kene, valami tipp?

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A Bootstrap 4 grid használata

    100% magasságot kell adni a bal oszlopnak....

  • WordPress sablon készítés

    Ne plugint használj, hanem írd bele a header.php-ba....

  • WordPress sablon készítés

    Hali. Beállítottam egy fav icont a weboldalamra, viszont nem látszik egyáltalán, csak akkor ha a WordPress adminjában vagyok. Szerinted ez miért van? ...

  • A Bootstrap 4 grid használata

    Hali. Nekem egy bootstrap 4-et használó oldalon van egy sorom, amiben van két oszlop. A bal oldali oszlopban van egy h2-es címsor, és két bekezdés. A ...

  • Az Advanced Custom Fields plugin használata

    Persze, a wysiwyg szerkesztővel tudsz videót is beszúrni....

  • Az Advanced Custom Fields plugin használata

    Ezzel a pluginnal youtube videót lehet beszúrni ugyanígy mint képet? Mert én nem tudtam igazán rájönni mit kéne kiválasztanom ehhez....

  • Bootstrap 4 setup

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...