Из горизонтального в вертикальное меню!

Пятница · June 2, 2008

Помогите.

На неком сайте имеется прекрасный образец горизонтального меню.

Мне нужно, чтобы оно было вертикальным!

Как сделать - ума не приложу!

ВОТ ПРИМЕР ЭТОГО МЕНЮ: http://www.shtogrin.com/design/menu/horizo...ts/example.html

Вот сайт: http://www.shtogrin.com/design/menu/horizontal_lists/

Вот сам код:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="example.css">
<script language="javascript" src="example.js" type="text/javascript"></script>
<title></title>
</head>

<body topmargin="10" leftmargin="10">

<ul id="hmenu" style="width:400px;">
	<li><a href="#">About</a>
		<ul>
			<li><a href="#">Contacts</a></li>
			<li><a href="#">Sitemap</a></li>
		</ul>
	</li>
	<li><a href="#">News</a></li>
	<li><a href="#">Products</a>
		<ul>
			<li><a href="#">Group #1</a></li>
			<li><a href="#">Group #2</a></li>
			<li><a href="#">Group #3</a></li>
			<li><a href="#">Group #4</a></li>
			<li><a href="#">Group #5</a></li>
		</ul>
	</li>
	<li><a href="#">Support</a>
		<ul>
			<li><a href="#">Download center</a></li>
			<li><a href="#">FAQ</a></li>
		</ul>
	</li>
</ul>
</body>

</html>

CSS:

ul#hmenu {
	margin: 0;
	border: 0 none;
	padding: 0;
	  list-style: none;
	background: #565766;
	  height: 28px;
	font: bold 12px/28px Verdana, Arial;
}

ul#hmenu li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: left;
	display: inline;
	list-style: none;
	position: relative;
	height: 28px;
}

ul#hmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 160px;
	list-style: none;
	display: none;
	position: absolute;
	top: 28px;
	left: 0;
}

ul#hmenu ul:after {
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

ul#hmenu ul li {
	width: 160px;
	float: left;
	display: block !important;
	display: inline;
}

/* Main Menu */
ul#hmenu a {
	border: 0px;
	padding: 0 6px;
	float: none !important;
	float: left;
	display: block;
	background: #565766;
	color: #FFFFFF;
	font: bold 12px/28px Verdana, Arial;
	text-decoration: none;
	height: auto !important;
	height: 1%;
}

/* Main Menu Hover */
ul#hmenu a:hover,
ul#hmenu li:hover a,
ul#hmenu li.iehover a {
	background: #808298;
	color: #FFFFFF;
}

/* Second Menu */
ul#hmenu li:hover li a,
ul#hmenu li.iehover li a {
	border-top: 1px solid #FFFFFF;
	float: none;
	background: #565766;
	color: #FFFFFF;
}

/* Second Menu Hover */
ul#hmenu li:hover li a:hover,
ul#hmenu li:hover li:hover a,
ul#hmenu li.iehover li a:hover,
ul#hmenu li.iehover li.iehover a {
	border-top: 1px solid #FFFFFF;
	background: #808298;
	color: #FFFFFF;
}

ul#hmenu ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 160px;
}

ul#hmenu li:hover ul ul,
ul#hmenu li.iehover ul ul {
	display: none;
}

ul#hmenu li:hover ul,
ul#hmenu ul li:hover ul,
ul#hmenu li.iehover ul,
ul#hmenu ul li.iehover ul {
	display: block;
}

Javascript (для IE):

function hmenuhover()
{
	if(!document.getElementById("hmenu"))
		return;
	var lis = document.getElementById("hmenu").getElementsByTagName("LI");
	for (var i=0;i<lis.length;i++)
	{
		lis[i].onmouseover=function(){this.className+=" iehover";}
		lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehoverb"), "");}
	}
}
if (window.attachEvent)
	window.attachEvent("onload", hmenuhover);

Dimitry Wolotko · June 2, 2008

Легче или написать с нуля, или найти готовый скрипт.

Этот переделывать - смысла не вижу.

mmm Проблемы с версткой

Пятница · June 2, 2008

Да не могу я ТАКОЕ написать, пойми ты!))

Не представляю возможным!!!

Но очень хочу переделать под вертикальное!!!!!!!

Dimitry Wolotko · June 2, 2008

Если очень хочешь - то сможешь.

Пятница · June 2, 2008

...девиз форума, на котором всегда и всем помогают!

Мог бы - не просил.

Ну и ладно, больше сюда ни ногой.

ZoNT · June 2, 2008

странно, украинцы все такие?

Victor Ananiev · June 2, 2008

Неправда, я с Украины, и ничего, пока живой))

ZoNT · June 2, 2008

Значит ты - исключение из правил!

Dimitry Wolotko · June 2, 2008

Которое подтверждает правило.

Вот скажите мне - где я был неправ?

Ogalig · June 3, 2008

Ты не предоставил ему готовый код!!!!

Sign In

Из горизонтального в вертикальное меню!

Question

Пятница

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

Пятница

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Пятница

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Ogalig

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information