| |
|
|
| | Имеющие время, подскажите решение или посоветуйте где посмотреть:
Делаю страницу с каталогом (http://www.obtekatelopt.com/index-1.html), доступ к содержимому каталога делаю на горизонтальном выпадающем меню. Кому интересно, вот образец кода (работает отлично):
<html>
<head>
<script language="JavaScript">
function startMenu() {
// Проверяем, поддерживает ли текущий браузер DOM
if (document.getElementById) {
// Получаем объект с именем идентификатора menu
nav = document.getElementById('menu');
// Пробегаемся по всем дочерним элементам нашего меню
for (i=0; i<nav.childNodes.length; i++) {
node = nav.childNodes[i];
// Если дочерний элемент - LI, то идем дальше
if (node.nodeName == 'LI') {
// При наведении курсора на пункт меню, присваиваем LI класс over
node.onmouseover = function() {
this.className = 'over';
}
node.onmouseout = function() {
// При перемещении курсора за пределы пункта убираем класс over
this.className = '';
}
}
}
}
}
</script>
<style type="text/css">
UL {
width: 180px; /* Ширина меню */
list-style: none; /* Для списка убираем маркеры */
margin: 0px; /* Нет отступов вокруг */
padding: 0px; /* Убираем поля вокруг текста */
font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
font-size: 11pt /* Размер названий в пункте меню */
}
UL LI {
position: relative /* Подпункты позиционируются относительно */
}
LI UL {
position: absolute; /* Подменю позиционируются абсолютно */
display: none; /* Скрываем подменю */
top: 0px; /* По высоте положение подменю исходное */
left: 179px; /* Сдвигаем подменю вправо */
z-index: 1 /* Основное меню находится ниже подменю */
}
LI A {
display: block; /* Ссылка как блочный элемент */
width: 100%; /* Ссылка на всю ширину пункта */
padding: 5px; /* Поля вокруг надписи */
text-decoration: none; /* Подчеркивание у ссылок убираем */
background: /* Для основных пунктов отображаем рисунок */
url(bullet.gif) /* Указываем путь к рисунку со стрелкой */
right center /* Выравниваем рисунок по центру справа */
no-repeat; /* Отменяем повторение фона */
color: #666; /* Цвет текста */
border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
background-color: white; /* Белый цвет фона */
border-bottom: none /* Границу снизу не проводим */
}
LI UL LI A {
background-image: none; /* Для подпунктов рисунок убираем */
z-index: 2 /* Подменю располагаются выше меню */
}
LI A:hover {
color: maroon; /* Цвет текста активного пункта */
background-color: #f0f0f0 /* Цвет фона активного пункта */
}
LI:hover UL, LI.over UL {
display: block /* При выделении пункта курсором мыши отображается подменю */
}
.brd {
border-bottom: 1px solid #ccc /* Линия снизу */
}
</style>
</head>
<body onLoad="startMenu()">
<!--[if IE]>
<style type="text/css">
UL LI {
float: left /* В браузере Internet Explorer пункты выводятся без разрывов */
}
</style>
<![endif]-->
<ul id=menu>
<li><a href=russian.html>Русская кухня</a>
<ul>
<li><a href=linkr1.html>Бефстроганов</a></li>
<li><a href=linkr2.html>Гусь с яблоками</a></li>
<li><a href=linkr3.html>Крупеник новгородский</a></li>
<li><a href=linkr4.html class=brd>Раки по-русски</a></li>
</ul>
</li>
<li><a href=ukrainian.html>Украинская кухня</a>
<ul>
<li><a href=linku1.html>Вареники</a></li>
<li><a href=linku2.html>Жаркое по-харьковски</a></li>
<li><a href=linku3.html>Капустняк черниговский</a></li>
<li><a href=linku4.html class=brd>Потапцы с помидорами</a></li>
</ul>
</li>
<li><a href=caucasus.html>Кавказская кухня</a>
<ul>
<li><a href=linkc1.html>Суп-харчо</a></li>
<li><a href=linkc2.html>Лилибдж</a></li>
<li><a href=linkc3.html>Чихиртма</a></li>
<li><a href=linkc4.html class=brd>Шашлык</a></li>
</ul>
</li>
<li><a href=asia.html style="background-image: none" class=brd>Кухня Средней Азии</a></li>
</ul>
</body>
</html>
|
Можно конечно тупо клонировать данную страницу столько раз - сколько разделов в каталоге и каждый пункт выпадающего меню связать со своей клонированной страничкой с соответствующим содержимым, но подозреваю, что можно сделать в центре страницы одну изменяемую область на которую и будут ссылаться пункты выпадающего меню, а страница при этом будет одна. | |
| |
|
|
| |
|
|
| |
для: UNKEL
(04.10.2008 в 22:40)
| | | А у вас что сайт на статических страницах? | |
| |
|
|
