Очень понравилось! Коротко и понятно. Отсутствие ЭУ (элементов управления) в HTML меня удивляет. Может сделать что-то вроде библиотеки, где были бы собраны стандартные ЭУ?
Я постарался доработать полученный вариант, чтобы было удобней редактировать меню, навесил побольше комментариев.
Предлагаю желающим дорабатывать и улучшать.
| Код |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
мое меню
</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<script type="text/javascript">
// список главного меню(GM), всех подменю (PM) и адресов-ссылок (AD)
var GM = ['Первый','Второй','Третий','Четвертый','Пятый'],PM ={},AD = {};
PM[0] = ['1_Первый','2_Второй','3_Третий','4_Четвертый','5_Пятый'];
AD[0] = ['000.php','000.php','000.php','000.php','000.php'];
PM[1] = ['01_Первый','02_Второй','03_Третий','04_Четвертый','05_Пятый','06_Шестой','07_Седьмой'];
AD[1] = ['000.php','000.php','000.php','000.php','000.php','000.php','000.php'];
PM[2] = ['001_Первый','002_Второй','003_Третий','004_Четвертый'];
AD[2] = ['000.php','000.php','000.php','000.php'];
PM[3] = ['0001_Первый','0002_Второй','0003_Третий'];
AD[3] = ['000.php','000.php','000.php'];
PM[4] = ['00001_Первый','00002_Второй','00003_Третий','00004_Четвертый','00005_Пятый'];
AD[4] = ['000.php','000.php','000.php','000.php','000.php'];
var y0 = '28px', x0 = '10px'; // cмещение вниз и вправо от пункта главного меню
// формируем меню
function zmnu(){
var tt = '', jm = GM.length;
for (var j=0;j<GM.length;j++){
tt +='<div class="gmnu" id="m'+j+'" onmouseover="activ(this);" onmouseout="hide(this);">'+GM[j];
tt +='<div class="pmnu" id="pm'+j+'">';
for (var i=0;i<PM[j].length;i++){tt +='<div><a href="'+AD[j][i]+'">'+PM[j][i]+'</a></div>';}
tt +='</div></div>';
}
document.getElementById('menu').innerHTML = tt;
}
// активируем подменю
function activ(el){
el.style.border = '1px solid #ff0000'; // меняем цвет рамки выбранного пункта
//el.style.background = '#ff77ff'; // меняем цвет фона или заливку url('000.gif')
var pm = document.getElementById('p'+el.id); // получаем ссылку на контейнер с подменю
pm.style.top = y0; pm.style.left = x0; pm.style.display="block"; // смещаем и показываем
}
function hide(el){
el.style.border = '1px solid #0000ff'; // возвращаем цвет рамки выбранного пункта
//el.style.background = '#ffaaff'; // возвращаем цвет фона
document.getElementById('p'+el.id).style.display="none"; // скрываем подменю
}
</script>
</head>
<body onload="zmnu()">
<div id="menu"></div> <!--в этот элемент мы поместим наше меню-->
</body>
<style>
#menu {position:fixed; top:20px; left:200px} /* задаем позицию контейнера главного меню */
.gmnu{border:1px solid #0000ff; background:url('000.gif'); /* задаем цвет рамки и заливку главного меню */
color: #000000; font-size: 24px; /* цвет и размер шрифта*/
padding: 1px 8px 1px 8px; height:26px; /* отступы и высота меню (надо согласовывать с y0)*/
position:relative; float:left; cursor:pointer}
.pmnu{border:1px solid #00ff00; position:absolute; display:none;}
.pmnu div{border-bottom:1px solid #00ff00; background: url('000.gif')} /* задаем цвет рамки и заливку подменю*/
.pmnu a {text-decoration:none;padding: 1px 8px 1px 8px; height:26px; /* отменяем подчеркивание у ссылки*/
color: #000000; font-size: 18px} /* цвет и размер шрифта невыделенного подменю*/
.pmnu a:hover{background-color:#aaffaa; /* линия-разделитель в подменю*/
color: #0000ff;} /* цвет шрифта выделенного подменю*/
</style>
</html>
|
|
