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ó

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

		}
	);
});