Меню с всплывающими вложениями

[Fosbury]

Здравствуйте!

Прошу помочь в создании меню со всплывающими вложениями, которые появляются при наведении курсора мыши на одну из ссылок меню. Насколько я знаю, это делаются с помощью Java.

Кто может, объясните пожалуйста, как это делается

[IceBeerG]

http://htmlbook.ru/books/?id=2&m=2

здесь есть два примера меню с подменю и ниспадающее меню.

[Fosbury]

Большое спасибо)))

[Fosbury]

Создал с помощью Вашего кода меню со всплывающими ссылками.

Но есть проблема: в Internet Explorer при наведении мыши на главные пункты меню сначала появляются подпункты, но как только пытаешься кликнуть на один из них, они сразу исчезают. В Firefox и Opera все работает нормально. В чем тут проблема?

[Fosbury]

Помогите, пожалуйста.

Посмотрите страницу http://www.megamat.ru/in.html в Explorer и в Opera (или Firefox). В Explorer нельзя кликнуть на всплывающе меню. в чем дело?

[yopopt]

Измените

* HTML LI UL { /* Только для браузера Internet Explorer */
 left: 0px; /* Положение подменю по горизонтали */
 top: 30px /* Положение подменю по вертикали */
}

На

LI UL { /* Только для браузера Internet Explorer */
 left: 0px; /* Положение подменю по горизонтали */
 top: 23px; /* Положение подменю по вертикали */
}

[Fosbury]

спасибо

[Termit?]

Создал с помощью Вашего кода меню со всплывающими ссылками.

Но есть проблема: в Internet Explorer при наведении мыши на главные пункты меню сначала появляются подпункты, но как только пытаешься кликнуть на один из них, они сразу исчезают. В Firefox и Opera все работает нормально. В чем тут проблема?

Баг, который наблюдается лишь в IE. В файле стилей *.css для параметров "ul li a" и "ul" необходимо задать фон, иначе если выпадающее подменю будет больше (по высоте), чем само родительское меню, то часть ссылок просто исчезнет с экрана ещ? до того, как можно будет кликнуть по ним.

IE понимает псевдокласс :hover лишь для тега - так что li:hover, на который завязано появление подменю, ему ни о ч?м не говорит.

Этот JavaScript приведет IE в чувство:

JavaScript немного отличающийся от скрипта в справке Влада

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
 }
 node.onmouseout=function() {
 this.className=this.className.replace(" over", "");
 }
 }
 }
 }
}
window.onload=startList;

И опять вс? о н?м.

IE понимает разрывы строк между ссылками в оформленном HTML коде как незаполненное пространство. Из-за этого в IE можно увидеть, что ссылки не прилегают тесно одна к другой.

Так же пользователи IE5 могут заметить, как меню прыгает вокруг при наведении мыши на любой из элементов списка.

Этот баг IE можно обойти внесением в файл стилей *.css следующего пункта:

/* Fix IE. Hide from IE Mac */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

Далее надо связать JavaScript с главным списком меню, добавив это в HTML документ:

<ul id="nav">

Файлы образца моего меню: =>> Скачать

Первоисточник: =>> by Patrick Griffiths, Dan Webb

Перевод - Максим Россомахин. Источник =>> Выпадающие меню с помощью CSS

P.S. Сори, если нельзя давать ссылки на другие ресурсы.

Просто не хотел чтоб это выглядело буд-то я Америку открыл. +)))

[Fosbury]

Я не вносил изменений в код, о которых вы написали (Termit).

Однако, щас в IE все работает вроде бы нормально. Посмотрите:

www.megamat.ru/in.html

[Termit?]

Да, вс? работает. Только я бы рекомендовал вам, так сказать, разложить HTML документ на 3 документа.

Тоесть:

1. Ваша главная страница - index.html

2. файл Java Script например - fixes.js

3. файл стиля - menu.css

Думаю так будет вс? же грамотней, а заодно и страница уменьшится в размере.

Просто скачайте мой архив в посте выше и посмотрите, как вс? сделано на наглядном примере.

[shkoda]

И еще. Какая у тебя картинка по размеру? Она же грузится нереально долго? Сделай ее поменьше, или разрежь на несколько кусков.

[Fosbury]

2 shkoda - картинка 300кб. разрежу, когда начну верстку))

2 Termit - товарисч, напишите, пожалуйста, подробнее про разложение HTML документа на три части.

Как потом их соединить воедино на главной странице?

[Termit?]

Fosbury

Я скачал вашу картинку и она у меня сохранилась в формате *.bmp хотя в коде она прописана, как *.jpg

Я сделал такой вывод, что вы просто сделали и сохранили рисунок в bmp, а потом просто переименовали расширение вручную. ХитрО конечно, но только это вс? бестолку. От этого размер файла не уменьшиться. Для размешения картинок на сайте желательно использовать формат *.jpg или *.gif в редких случаях выпрямленный *.png

Вобщем я форматнул картинку в jpg и она в 10 раз уменьшилась в размере. Сейчас она весит 33 кб.

По поводу, как разложить документ на 3 части и потом, как их соединить воедино: - "Я вобщем вам вс? сделал. Не беспокойтесь у меня не заняло это много времени."

"Соединяются" воедино все файлы Java Script и файл стилей *.css следующим образом:

Когда документ разделен и у вас есть три файла

1. Главная страница - index.html где у нас осталось от меню только то, что между тегами

• .......

включая их.

2. Файл Java Script например - fixes.js

3. Файл стиля меню - menu.css

Делаем следущее: - в коде страницы между тегами

...... прописываем путь к нашим файлам. Естественно взависимости от того в какой директории они находятся.

В данном случае menu.css лежит в папке menu

Скрип fixes.js лежит в папке scripts

Основной файл оформления всех страниц style.css лежит в корневой директории сайта вместе со всеми *.html документами.

<head>

<link href="menu/menu.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="scripts/fixes.js" type="text/javascript"></script>

</head>

Таким образом зрительно мы получаем тот же самый вид документа, только более удобный для редактирования в дальнейшем, потому что вс? находится на своих местах.

Рекомендую и дальше придерживаться такого расположения ресурсов на сервере, чтобы вс? находилось в своих папках. Иначе по мере увеличения материалов сайта вы рискуете просто запутаться среди кучи наваленых вместе ява скриптов, картинок, файлов стилей и т.д. и т.п.

Вобщем я взял на себя смелость немного подредактировать ваш сайт.

Скачайте и посмотри, как вс? сделано. Что от куда было вырезано, что куда переложено и что добавлено.

Скачать =>> megamat

Ах, да вот ещ?, что...

По поводу создания таблиц: - не забывайте про тег

который создает новый ряд (строку) ячеек таблицы. Без него таблица может некоректно отображаться да и это просто не правильно.

Элемент

..... создает ячейку с данными в текущей строке.

Скажу проще, правильно вот так:

<table width="250" border="0">
 <tr>
 <td>Математика 400 руб.</td> 
 </tr>
 <tr>
 <td>Математика 400 руб.</td> 
 </tr>
 <tr>
 <td>Математика 400 руб.</td> 
 </tr>
</table>

[Fosbury]

Cпасибо большое.

Только почему-то в главном меню не отображается фоновый рисунок пунктов меню.

[Termit?]

И на старуху бывает проруха...

Разложить по папочкам файлы я разложил, а вот поправить путь к фоновому рисунку в menu.css забыл.

Сделайте следующее:

Откройте файл menu.css найдите там строку LI A и в ней исправьте путь background: url(menu/wall4.jpg) на background: url(wall4.jpg)

Просто надо убрать отрезок пути menu/ потомучто стиль меню и файл фонового рисунка лежат в одной директории. Вс?.

[Fosbury]

Termit, у Вас есть ICQ?

У меня к Вам еще вопросы