web-touristCSS – Javascript меню
Автор: akolevutd
Eто го направо. Ползват се различни техники и крайния ефект е задоволителен. специално примерните цветове които съм дал не са много подходящи но не ми се занимава да търся подходящи. всеки би могъл да си ги нагласи според тематиката на сайта му 🙂
Ето и кода(направо го давам цял без да го разделям):
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
function ChangeStyle(sender, _class) {
sender.className=_class;
}
</script>
<style type="text/css">
.left_side ul {
list-style-type: none;
width: 100px;
margin: 0 0 20px 0;
}
.left_side li {
padding-top: 5px;
}
.out a {
color: #fff;
display: block;
width: 100px;
background-color: #000;
padding-left: 5px;
}
.over a:hover {
color: #fff;
text-decoration: none;
display: block;
width: 100px;
background-color: #000;
padding-left: 5px;
}
.left_side {
width: 100px;
float: left;
}
a {
text-decoration: none;
color: #326CB6;
display: block;
width: 100px;
background-color: #d5d5d5;
padding-left: 5px;
}
a:hover {
text-decoration: underline;
display: block;
width: 100px;
background-color: #000;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="left_side">
<ul class="out" onmouseover="ChangeStyle(this,'over')" onmouseout="ChangeStyle(this,'out')">
<li> <a href="#">Меню 1</a></li>
<li> <a href="#">Меню 2</a></li>
<li> <a href="#">Меню 3</a></li>
<li> <a href="#">Меню 4</a></li>
<li> <a href="#">Меню 5</a></li>
<li> <a href="#">Меню 6</a></li>
<li> <a href="#">Меню 7</a></li>
<li> <a href="#">Меню 8</a></li>
<li> <a href="#">Меню 9</a></li>
<li> <a href="#">Меню 10</a></li>
</ul>
</div>
</body>
</html>
