Код
<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>
Урока е взет от web-tourist.net
|
Моля влезте, за да коментирате.
|
|
Рейтингите са достъпни само за регистрирани.
Моля влезте или се регистрирайте за да гласувате.
Няма оценки.
|
