Хитрое меню

okunev2 · December 18, 2010

ребят, вот дизайнер нарисовал, голову сломал как верстануть меню слева. Центр фиксировано 1024 выделено красными линями, а слева меню ещё тянется фоном.

Edited December 18, 2010 by okunev2

Int · December 18, 2010

Нууу, слева блок с нужным отступом сверху и повторяющимся по горизонтали фоном. А вот чтобы в нём выделение за мышкой бегало, тут наверное понадобится яваскрипт.

okunev2 · December 19, 2010

Нууу, слева блок с нужным отступом сверху и повторяющимся по горизонтали фоном. А вот чтобы в нём выделение за мышкой бегало, тут наверное понадобится яваскрипт.

ни разу такого не делал, и как быть с этим ява скриптом, нету примеров, был бы благодарен

Edited December 19, 2010 by okunev2

mishka · December 19, 2010

можно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>nav</title>
	<style type="text/css">
		#wrapper {
			width: 1000px;
			margin: 0 auto;
		}
		#wrapper:after {
			content: '';
			display: block;
			clear: both;
		}
		#content {
			width: 750px;
			float: right;
		}
		#sidebar {
			width: 250px;
			float: left;
		}
		#sidebar h3 {
			margin: 0 0 20px -9999px;
			width: 100%;
			padding: 0 0 0 9999px;
			background: #ff0;
			position: relative;
		}
		#sidebar .menu {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#sidebar .menu li {
			width: 100%;
			vertical-align: top;
		}
		#sidebar .menu a {
			display: block;
			width: 100%;
			margin: 0 0 0 -9999px;
			padding: 0 0 0 9999px;
			background: #f0f;
			position: relative;
		}
		#sidebar .menu a:hover {
			background: #f00;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="content">
			<p>Lorem ipsum dolor sit amet consectetuer velit Curabitur Proin condimentum congue. Ipsum tortor congue lacinia ante sollicitudin hac urna tellus dignissim ligula. Consectetuer sapien ut Ut amet dictumst Phasellus ac sed montes Vestibulum. Sapien Nullam lobortis nisl Donec magnis quis sed quis libero id. Vestibulum sem semper ac condimentum.</p>
		</div>
		<div id="sidebar">
			<h3>Heading</h3>
			<ul class="menu">
				<li><a href="#">link</a></li>
				<li><a href="#">link</a></li>
				<li><a href="#">link</a></li>
				<li><a href="#">link</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

Sign In

Хитрое меню

Question

okunev2

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Int

Link to comment

Share on other sites

okunev2

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information