| |
|
|
| | Здравствуйте Уважаемое сообщество. Ни подскажете как создать горизонтальное динамическое меню на css. Что то подобное реализовывал Влад Маржевич. | |
| |
|
|
| |
|
|
| |
для: pautina
(03.06.2008 в 09:53)
| | | http://www.realcoding.net/article/view/2731
Вот рабочий пример.
css - заносишь в свой css, а код генеришь динамически, с нужными названиями пунктов и ссылками. | |
| |
|
|
| |
|
|
| |
для: tuder
(04.06.2008 в 06:05)
| | | Я использовал немного другой код, но за ссылку спасибо.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<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">
#content { left:0px; right:0px; top:0px; width:100%; height:100px; position:absolute; background-color:#2afcb4}
#content-menu { left:5px; top:107px; position:absolute; }
#content-center { left:10px; top:140px; width:70%; position:absolute; z-index:-1}
UL {
list-style: none; /* Для списка убираем маркеры */
margin: 0px; /* Нет отступов вокруг */
padding: 0px; /* Убираем поля вокруг текста */
font-family:Verdana, Helvetica, sans-serif; /* Рубленый шрифт для текста меню */
font-size: 14px /* Размер текста в пункте меню */
}
UL LI {
position: relative; /* Подпункты позиционируются относительно */
background: #9bff4a; /* Цвет фона пунктов меню */
float: left; /* Пункты первого уровня располагаются горизонтально */
padding: 4px 0px; /* Поля вокруг пунктов первого уровня */
margin-right: 0px /* Расстояние между пунктами по горизонтали */
}
UL LI UL LI {
padding: 0px /* Отменяем поля вокруг рамки пунктов меню второго уровня */
}
LI UL {
position: absolute; /* Подменю позиционируются абсолютно */
display: none; /* Скрываем подменю */
width: 180px; /* Ширина пунктов подменю */
margin-top: 5px /* Сдвигаем подменю немного вниз */
}
* HTML LI UL { /* Только для браузера Internet Explorer */
left: 0px; /* Положение подменю по горизонтали */
top: 21px /* Положение подменю по вертикали */
}
LI A {
padding: 3px; /* Поля вокруг надписей основного меню */
padding-left: 12px; /* Добавляем отступ слева для рисунка */
text-decoration: none; /* Подчеркивание у ссылок убираем */
color:#000000; /* Цвет текста */
border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
background: /* Для основных пунктов отображаем рисунок */
url(bullet2.gif) /* Указываем путь к рисунку со стрелкой */
left center /* Выравниваем рисунок по центру слева */
no-repeat /* Отменяем повторение фона */
}
LI UL LI A {
display: block; /* Отображаем ссылку как блочный элемент */
padding: 4px; /* Поля вокруг надписей подменю */
width: 180px; /* Ширина пунктов подменю */
border-bottom: none; /* Границу снизу не проводим */
background-image: none /* Для подпунктов рисунок убираем */
}
LI A:hover {
color:#000000; /* Цвет текста активного пункта */
background-color: #6ce10e /* Цвет фона активного пункта */
}
LI:hover UL, LI.over UL {
display: block /* При выделении пункта курсором мыши
открывается подменю */
}
.brd {
border-bottom: 1px solid #ccc /* Добавляем линию снизу */
}
</style>
</head>
<body onLoad="startMenu()" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<div id="content">
<img src="image/content.gif" width="990" height="100" border="0">
</div>
<div id="content-menu">
<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; padding-left: 3px">Кухня Средней Азии</a></li>
</ul>
</div>
<div id="content-center">
Пример текстового наполнения
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: pautina
(04.06.2008 в 16:09)
| | | 1. Вы похвалились здесь найденным вами "меню с использованием Javascript'a", а спрашивали изначально "меню с CSS". Это вообще-то две разные вещи. :-)
2. Код вполне себе рабочий, при условии, что браузер поддерживает DOM. А что будет, если DOM не поддерживается? Задумывались вы? Видимо, не задумывались, ибо варианта для "безDOMового" браузера скрипт не поддерживает. Также не задумывался об этом неизвестный мне автор скрипта.
3. Очень плохо слизывать чужие скрипты, не пытаясь даже "врубиться" в их содержание.
PS. А вообще смешно... идет проверка на поддержку DOM, но вариант меню - только для тех браузеров, что DOM поддерживают :-)
Для приличия прописали бы, что-ли, alert с призывом загрузить свежую версию браузера.
А то зайдет человек из Эксплорера4, увидит меню, а попасть куда-либо не сможет... и никто ничего ему не скажет... чего он о вас подумает? :-) | |
| |
|
|
| |
|
|
| |
для: PAT
(04.06.2008 в 18:37)
| | | из Эксплорера4
а что, много таких ... динозавров? :О
не больше 0,0001 процента | |
| |
|
|
| |
|
|
| |
для: elenaki
(04.06.2008 в 19:17)
| | | Правильно, и я о том же.
Но в скрипте-то это дело на всякий случай ведь проверяют, что, в принципе, правильно - не будет сообщения об ошибке у обладателей древних браузеров. Но и НИКАКОГО сообщения/действия ведь для них тоже не будет, что неправильно :-)
Положим, в клубе на входе действует фейс-контроль. Охранникам даны указания - белым людям оказывать уважение и впускать вовнутрь. Но что делать с чёрными - не сказали СОВСЕМ. Что будет в результате? В результате будут проблемы. :-) | |
| |
|
|
