Mérei Tamás webdesigner

Tutorial: jQuery linkdoboz

Szerző:   |   2012-09-24

Úgy látszik ez a hónap végig a jQuery-ről fog szólni 🙂 Ezúttal egy linkdobozt készítünk, ami akár menüként is használható.

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

A dobozból többet is elhelyezhetünk egymás alá, ugyanúgy működni fognak.

HTML forráskód


	<ul class="menu">
		<li class="title">elso doboz</li>
		<li><a href="">elso almenupont</a></li>
		<li><a href="">masodik</a></li>
		<li><a href="">harmadik</a></li>
	</ul>

	<ul class="menu">
		<li class="title">masodik doboz</li>
		<li><a href="">elso almenupont</a></li>
		<li><a href="">masodik</a></li>
		<li><a href="">harmadik</a></li>
	</ul>

CSS forráskód


* {
	padding: 0;
	margin: 0;
	border: 0;
	font: 98% georgia
}
body {
	background: url('bg.png') #577d5d;
	color: #fff;
	margin: 30px
}
ul.menu {
	width: 180px;
	padding: 0;
	margin: 0 auto 20px auto;
	list-style: none;
	box-shadow: 3px 3px 0 #516750;
	background: #f9d79d;
	background: -moz-linear-gradient(top,  #f9d79d 0%, #fccf7d 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9d79d), color-stop(100%,#fccf7d));
	background: -webkit-linear-gradient(top,  #f9d79d 0%,#fccf7d 100%);
	background: -o-linear-gradient(top,  #f9d79d 0%,#fccf7d 100%);
	background: -ms-linear-gradient(top,  #f9d79d 0%,#fccf7d 100%);
	background: linear-gradient(to bottom,  #f9d79d 0%,#fccf7d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d79d', endColorstr='#fccf7d',GradientType=0 )
}

ul.menu li.title {
	padding: 5px 10px;
	color: #fff;
	font-size: 100%;
	font-family: trebuchet MS;
	text-shadow: 1px 1px 3px #b44c06;
	font-weight: bold;
	border-bottom: 1px solid #d0aa64;
	background: #ffaa60;
	background: -moz-linear-gradient(top,  #ffaa60 0%, #ff7800 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaa60), color-stop(100%,#ff7800));
	background: -webkit-linear-gradient(top,  #ffaa60 0%,#ff7800 100%);
	background: -o-linear-gradient(top,  #ffaa60 0%,#ff7800 100%);
	background: -ms-linear-gradient(top,  #ffaa60 0%,#ff7800 100%);
	background: linear-gradient(to bottom,  #ffaa60 0%,#ff7800 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaa60', endColorstr='#ff7800',GradientType=0 )
}
ul.menu a {
	padding: 5px 10px;
	display: block;
	color: #bf773f;
	text-decoration: none
}
ul.menu a:hover {
	border-left: 5px solid #f2b36b;
	background: #f2c574;
	color: #000
}

jQuery forráskód


$(document).ready(function() {

	// menu() fuggveny meghivasa a .menu class-al ellatott dobozra 200ms es 100ms sebessegekkel
	menu(".menu",200,100);
});

// a menu() fuggveny 3 parametert var:
// a menuhoz tartozo CSS class-t, illetve az animacio be es kifuto sebesseget
function menu(menuclass,overspeed,outspeed) {

	// az li-ken beluli a tagek hover effektje
	$("li a").hover(

		// over-nel 15-re noveljuk a bal padding-et az overspeed valtozoban meghatarozott sebesseggel
		function() { $(this).animate({ paddingLeft: 15 }, overspeed); },

		// out-nal visszaallitjuk 10-re az outspeed valtozoban meghatarozott sebesseggel
		function() { $(this).animate({ paddingLeft: 10 }, outspeed); }
	);
}

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!

12 hozzászólás

  1. Balázs
    2015. január 7. szerda - 17:20

    De ha nem lehet ingyen akkor hol lehet olcsón venni??

    • cyrex
      2015. január 9. péntek - 16:55

      Bármelyik domain szolgáltatónál, már mindenhol nagyon olcsó a domain. Én a Deninet-nél szoktam.

  2. Balázs
    2015. január 4. vasárnap - 15:59

    Szia, Cyrex!

    Azt szeretném megkérdezni, hogy hol lehet ingyen domaint szerezni úgy, hogy azt ne ott a weboldalon keljen szerkeszteni, hanem a códos html/php fájl és a többi részt kell feltölteni.

    • Mérei Tamás
      2015. január 4. vasárnap - 20:10

      A domain névért fizetni kell, azt sehol nem adják ingyen.

  3. Dunk10
    2013. szeptember 21. szombat - 20:31

    Szia!
    Véleményeznéd az oldalamat?:) (egyébként 13 vagyok)

  4. Nemesis
    2012. október 26. péntek - 15:45

    Sziasztok!

    Egy kerdesem lenne hozzatok, hogy lehetne megoldani azt, hogy amikor ravisszuk az egeret a kepre akkor valtozzon meg vagyis…egy kicsit sotetebb legyen a kep, teljesen eltero legyen az eredeti keptol.

    Elore is koszonom a valaszokat!…

    Udv Peter!

    • Szabolcs
      2012. november 23. péntek - 20:53

      ha csak a “sötétségen” akarsz változtatni akkor a css kódban elég a a:hover{}-ben az átlátszóság arányát átírni:)

  5. Raim
    2012. október 19. péntek - 10:46

    Szia Cyrex annyi lenne a kérdésem, hogy nem terveztél be esetleg egy fejléc photoshop tutorialt 🙂 ? 😀

  6. KMartinR4
    2012. szeptember 28. péntek - 18:12

    Bocsánat, a szövegszín problémája megoldódott. 🙂

  7. KMartinR4
    2012. szeptember 27. csütörtök - 17:57

    Szia, Cyrex!

    Úgy gondoltam, hogy a weboldalamat átírom HTML5-re, azonban az Internet Explorer szokásához híven küszködik vele, ezért egyenlőre nem tudtam átírni a weblapom.

    A problémám az, hogy semmi mást nem csináltam, mint a “div#header”-t, “div#footer”-t, “div#menu”-t átírtam CSS-ben és HTML-ben is a neki megfelelő “header”-re, “footer”-re és “nav”-ra. Illetve a kötelező meta tag-eket is átírtam, amire kellett.
    Szóval, az IE erre azt reagálta, hogy a fejlécet, láblécet és menüt formázatlan szöveggé alakította át.

    Te milyen megoldást javasolsz, azon kívül, hogy vessem el a HTML5 ötletét?

    Válaszodat előre is köszönöm.

    • cyrex
      2012. szeptember 27. csütörtök - 19:48

      Kell hozzá enabling script: http://code.google.com/p/html5shiv/

    • KMartinR4
      2012. szeptember 28. péntek - 17:13

      Nagyon köszönöm, Cyrex! Egy weblapot mentettél meg! 🙂
      Annyi kérdésem lenne még, hogy a menü szövege miért változott fehérből a menü hátterével megegyező vörössé?

Hozzászólás

Legújabb hozzászólások