Tutorial: HTML + CSS + jQuery menü
2011. május 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ó.
HTML + jQuery forráskód
1 2 3 4 5 6 7 8 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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> <script type="text/javascript"> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(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)"); } ); } ); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | </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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | * { 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; } |
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
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.
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.
A nyilakat honnan lehet letölteni? :$
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/
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
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?
Hali kérhetnék olyan nyilakat? PS 3maqmmal nem tok csinálni :O és kiakarok próbálni vmit
http://kepfeltoltes.hu/111216/hiba_www.kepfeltoltes.hu_.png
megcsináltam így de van egy 40 pxes becsúszás :O
vki segítene?
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” ( http://www.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?
Ez a problémám is megoldódott, én hülye elfelejtettem kikapcsolni a magrin-t és a padding-et.
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
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?
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? 
Én nem azt kérdeztem ,hogy lehet-e több javascript egy oldalon hanem ,”hogy lehet rakni több javascriptet egy oldalra?”
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
Üdv
Lenne egy olyan kérdésem ,hogy lehet több javascript rakni 1 oldalra?Mert nekem nem jön össze sehogy.
Szia.
Már miért ne lehetne több javascriptet berakni 1 oldalra?
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?
szia hogy kell aszt megcsinálni hogy a menü linkeit középre nyisa meg?
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;
amit a linkekkel nyitok meg
Szia cyrex!!! Lenne egy olyan kérdésem hogy hogyan lehetne azt megcsinálni hogy felfele nyíljanak a rejtett menük?
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
Hát én azt inkább php-val oldanám meg! ha nemtudod hogykell akkor msn:papri07@hotmail.com és segítek:)
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
Oh, köszi. Nem értek PHP-hoz egyáltalán. Megoldottam máshogy
Köszi
Máshogy nemtudom hogylehetne megcsinálni:D
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
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.
Üdv!
, de bármilyen segítséget szivesen fogadnék 
Előre is köszönöm.
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
http://www.code-art.hu/css/egyszeru-fules-doboz-css-es-jquery-hasznalataval.php
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 ? :/
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.
igen sajnos és másik gépeken is
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.
Mindegyik böngészőben rossz?
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.
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.
Igen, tiszta CSS-t, javascript nélkül. Erre is találsz videót az oldalon.
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
szval azt akarod h olyan irányban jöjjön le…azt csak a css-ben kell beállítanod…
hát de pontosan mivel tudom azt beállítani?
Szia
!
. 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.
Remélem jó helyre írok
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. :])
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.
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.
Klassz videó!
Köszönjük, hogy elkészítetted!
Szia! Csinálnál egy olyan vidit amiben sima képekből csinálsz egyszerü menüt előre kösz
Szerintem ilyen már van. Nézz körbe
Ü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!
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…
nah?…tud valaki valami megoldást?…
Nagyon vártam az új videódat!
Jó lett, köszi!
Remélem mihamarabb nézhetem a következőt!
Köszönjük ezt a friss profi videót.
Grat jó videó
Ohóó!! Végre egy új videó! Nagyon jó! Köszönjük Cyrex!
Ü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?
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.
2 óra alatt idáig jutottam el : http://pepeweb.square7.ch/ a jQuery valami miatt nem ugy megy ahogy kene, valami tipp?