<html>
<head>
<title>Уроци за уеб програмиране</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
//функцията за отваряне и затваряне на менютата
function menuop(id)
{
var x = document.getElementById('menu'+id); //викаме определеното id за менюто
if(x.style.display == "block") //проверяваме дали е block
{ resu = "none"; } //връща като резултат none
else
{ resu = "block"; } //връща като резултат block
x.style.display = resu;
setCookie('menu'+id,resu);
}
//Функция която визуализира менюто според това кое сте избрали да е отворено или затворено
window.onload = function()
{
for(i=0;i<document.all.tags('ul').length;i++)
{
name=document.all.tags('ul')[i].id;
openclosemenu(name);
}
}
</script>
<style type="text/css">
ul
{
width: 160px; /* ширина */
list-style: none; /* казваме на списака да няма никакъв стил , обикновенно е с точка пред всеки елемент*/
margin: 0px; /* премагваме мерджина не ни трябва тук*/
display: none; /* казваме на списака да не се показва*/
border: 1px solid #3366FF;
}
.topmenu
{
width: 160px; /* ширина */
height: 20px; /* височина */
cursor: hand; /* изглед на курсора */
border: 1px solid #3366FF; /* цвят на бордера */
color: #FFFF99; /* цвят на шрифта */
background: #3399FF; /* цвят на задния фон */
}
#menu a
{
text-decoration: none; /* без декорация на текста */
color: #FF3300; /* цвят на шрифта */
}
#menu a:hover
{
text-decoration: none; /* без декорация на текста */
color: #990000; /* цвят на шрифта */
}
</style>
</head>
</body>
<div id="menu">
<div class="topmenu" onclick="menuop('1')">Menu 1</div>
<ul id="menu1">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
<div class="topmenu" onclick="menuop('2')">Menu 2</div>
<ul id="menu2">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
<div class="topmenu" onclick="menuop('3')">Menu 3</div>
<ul id="menu3">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
<li><a href="#">link5</a></li>
<li><a href="#">link6</a></li>
<li><a href="#">link7</a></li>
</ul>
</div>
</body>
</html>
