HTML + CSS + jQuery menü

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
  • A villanyszerelés örömei panelben

    Gratulálok! Szép leírás! Azt szeretném kérdezni, hogy nálam 3×32 amper lessz, bővítés után. Laikusként kérdem, így három Fi-relé kell? És mekkorát, é...

  • A villanyszerelés örömei panelben

    @Utolsó hozzászóló: Szia, olyan nincs, hogy 3 fázis érkezik be 3 külön vezetéken. Vagy 1 fázis 1, vagy 3 fázis 3 vezetéken. (+ a nulla) Ha az óráná...

  • A Pico CMS

    pico-release-v2.1.0, nincs benne content-samle, a content üres, nincs benne php nincs sub mappa és fájl sem, mégis ott van a subindex a menunuben...

  • CSS transition

    Köszönöm a válaszod! Igen ezzel már, próbálkoztam, de amint sikrül térben elhelyezni a megfelelő helyre a köröket, megszűnik működni rajtuk az effek...

  • CSS transition

    z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték....

  • CSS transition

    Kedves Tamás! Remélem még aktív a blog és tudsz nekem segíteni. Nagyon tetszett a videód, ki is próbáltam. A videód alapján beépitettem ezeket az ...

  • A villanyszerelés örömei panelben

    Egy fázis jön be három vezetéken keresztül. Az óránál egy darab megszakító van csak. Ezért kérdeztem, hogy milyen fi relét javasoltok?...

  • A villanyszerelés örömei panelben

    Ez nem igaz, mert az óránál ott a 3 biztosító darabja 20 A...

  • A shape-outside CSS property

    Olyasmit találtam hogy a szöveg részt 2 részre osztjuk bal és jobb......

  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....