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. 2014. szeptember 28. vasárnap - 19:09

    Köszi a segítséget, megoldódott. Inkább php val foglalkozom, ezért néha igénybe veszem a segítségedet. Hasznos oldal számomra.

  2. 2014. szeptember 26. péntek - 00:16

    Szia Cyrex!
    Használom ezt a menüt és tetszik, csak az a gondom, hogy ha olyan oldalt nyitok meg, ahol szövegmező van, a legördülő rész alámegy. Van erre megoldás? Köszi előre is.

    Krapu

    • 2014. szeptember 28. vasárnap - 16:38

      Tegyél z-index-et a menüre!

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Dia szkennelés házilag

    Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....

  • Bootstrap carousel

    Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...

  • Adobe XD VS. Lunacy

    Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....

  • Adobe XD VS. Lunacy

    Kedves Cyrex! A Sketch és az Axure UX-UI designer programok? Te melyiket használod ha használsz ilyen programokat? Köszönöm, üdv Balázs...

  • Bootstrap carousel

    Kedves Tamás! Az megoldható, hogy mobilon ne a nyilakra koppintva, hanem ujjal húzva váltsam a képeket? Köszönöm a sok hasznos videót. Üdvözlettel:...

  • Dia szkennelés házilag

    Ilyen diavetítőt hol lehet beszerezni?...

  • A villanyszerelés örömei panelben

    Ha nincsen a házban központilag rendbe rakva, akkor veszett fejsze nyele... Kialakíthatsz otthon EPH sínt, de ez már egy másik szint. 7kW felett 10m...

  • A villanyszerelés örömei panelben

    Ez a kábelcsatornás szegőléc nagyon jól néz ki. Szinte biztos, hogy a fürdő / konyha földelése lesz. Máshova nem vittek régen földet. Ha te húzod be a...

  • A villanyszerelés örömei panelben

    Köszönöm a gyors választ, akkor megpróbálom multiméterrel megkeresni, remélem csak a fürdő és a konyha földelését vitték innnen, nem a szomszéd lakásé...

  • A villanyszerelés örömei panelben

    A folyosón kábelcsatornában jött az órától, a bejárató ajtó felett meg be volt vakolva a falba a három bejövő vezeték. Szerencsére minimális romboláss...

  • A villanyszerelés örömei panelben

    Szia Tamás! Már hosszú ideje nézem ezt a cikkedet (szó szerint évek óta), de pár kérdésem felmerült a témában: 1. Az elosztóban az a piros vezeték, ...

  • A villanyszerelés örömei panelben

    MMCu a megnevezése (fekete, kék ér egymás mellett majd picit távolabb a zöld-sárga). Léteznek olyan fehér köpenyszigetelésű Mfal (nem írtam el, csak ...