Jump to content
  • 0

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

Пятница

Asked by Пятница,

 Share

Question

Пятница Explorer

Пятница

Posted
Posted

Помогите.

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

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

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

ВОТ ПРИМЕР ЭТОГО МЕНЮ: 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);

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept