jQuery linkdoboz

Szerző:   |   2012-09-24

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); }
	);
}

12 hozzászólás

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

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

    • 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. 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.

    • 2015. január 4. vasárnap - 20:10

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

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

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

  4. 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!

    • 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. 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. 2012. szeptember 28. péntek - 18:12

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

  7. 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.

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

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

    • 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

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...