Разгъващо се меню с помнене кое е разгънато след рефреш.
Публикувана от smilev на January 12 2011 07:27:22
Разширена новина
[code]
<html>
<head>
<title>Уроци за уеб програмиране</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
//С тази функция запазваме бисквитка
function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}
//С тази функция четеме бисквитките
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
//функцията за отваряне и затваряне на менютата
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);
}
//тази функция проверява дали има бисквитка записана с резултат за менюто
function openclosemenu(name)
{
obj = document.getElementById(name);
if(readCookie(name))
{
obj.style.display = readCookie(name);
}
}
//Функция която визуализира менюто според това кое сте избрали да е отворено или затворено
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>
[/code]
Урока е взет от web-tourist.net