Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Построение вёрстки меню, прошу написать скрипт 
V
    Опции темы
ОнКофе
Дата 14.3.2006, 20:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет
Ciber SLasH, через ноды не работает... да и ты не в том направлении пошел... посмотрий мое прошлое сообщение!
PM MAIL WWW   Вверх
Ciber SLasH
Дата 14.3.2006, 20:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
Ну ведь разметка такая и получается через NODE-ы. Раскомментируй 60-ю строку и посмотри разметку.
А NODE-ы почему-то при таком раскладе работают только в Opera, FireFox, а в IE — нет.
PM   Вверх
ОнКофе
Дата 14.3.2006, 20:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет
Ciber SLasH,
блин мне IE - это основное!!! это главное так сказать!!!
ты можешь отвлечься от нодов? вернись к старому!... нужно теперь только <DIV> каким-то образом определить!
PM MAIL WWW   Вверх
Ciber SLasH
Дата 14.3.2006, 20:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
Почему-то DIV-ы не хотят становится на места. Как я понял они должны обрамлять строки таблицы, а они почему-то ничего не обрамляют. С этой багой я не знаю как бороться.
PM   Вверх
ОнКофе
Дата 14.3.2006, 20:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет
Ciber SLasH, я верю в тебя!!! ты можешь!!!
нужно перед каждым началом подменю поставить <DIV> и после того как массив с подменю закончится тоже поставить </div>

ТЫ СМОЖЕШЬ!!!
PM MAIL WWW   Вверх
Ciber SLasH
Дата 14.3.2006, 20:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
Цитата(ОнКофе @ 14.3.2006, 20:48 Найти цитируемый пост)
нужно перед каждым началом подменю поставить <DIV> и после того как массив с подменю закончится тоже поставить </div>

Именно так и не получается, что-то где-то глючит и разметка получается другая.
Добавлено @ 20:52
А для чего эти DIV-ы?
PM   Вверх
ОнКофе
Дата 14.3.2006, 20:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет
Ciber SLasH,
смотри а вот так сможешь сделать???

Код

<table>
<tr>
<td><a href="пункт 1">Пункт 1</a> </td>
<td>
<div id=1>
 <table>
   <tr><td><a href="подменю 1.1">Подменю 1.1</a></td></tr>
   <tr><td><a href="подменю 1.2">Подменю 1.2</a></td></tr>
   <tr><td><a href="подменю 1.3">Подменю 1.3</a></td></tr>
   <tr><td><a href="подменю 1.4">Подменю 1.4</a></td></tr>
</table>
</div>
</td>
</tr>

<tr>
<td>Пункт 2 </td>
<td>
<div id=null> <!--  id=null так как не содержит подменю -->
</div>
</td>
</tr>

<tr>
<td><a href="пункт 3">Пункт 3</a></td>
<td>
<div id=2>
 <table>
   <tr><td><a href="подменю 3.1">Подменю 1.1</a></td></tr>
   <tr><td><a href="подменю 3.2">Подменю 3.2</a></td></tr>
   <tr><td><a href="подменю 3.3">Подменю 3.3</a></td></tr>
   <tr><td><a href="подменю 3.4">Подменю 3.4</a></td></tr>
</table>
</div>
</td>
</tr>

</table>
PM MAIL WWW   Вверх
Ciber SLasH
Дата 14.3.2006, 21:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
В таком варианте DIV-ы становятся абсолютно ненужными, т.к. ID-шник можно засунуть внутрь TABLE.
Добавлено @ 21:11
Вместо DIV, в строках 20 и 27 пропиши TABLE и будет тебе счастье.
PM   Вверх
ОнКофе
Дата 15.3.2006, 00:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет
Ciber SLasH, пожалуйста напиши как это все будет выглядеть!
И чтобы номера у id автоматически проставлялись и в случае отсутствия подменю ставился null...
Смотри как много народу просматривает наш топик!!! Наверно интересно! Думаю что всем новичкам есть что тут почитать!!! Жду с нетерпением твоего кода!!! У тебя аси нет?
PM MAIL WWW   Вверх
Ciber SLasH
Дата 15.3.2006, 17:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<script type='text/javascript'>
/*** Конструктор элементов меню ***/
function MainMenuItem (title, link, submenu, submenulink) {
this.Title = title;
this.Link = link;
this.SubMenu = submenu;
this.SubMenuLink = submenulink;
}

var index = 1;
/*** Создание разметки для меню ***/
function buildMenu(obj) {
var content = "<table><tr><td class='mainMenu'><a href='"+obj.Link+"'>"+obj.Title+"</a></td></tr>";
    // Если подменю НЕ пустое
    content += (obj.SubMenuLink.length > 0) ? "<table id='"+index+"'>" : "<table id='null'>";
    if (obj.SubMenuLink.length > 0)    index++;
    // Пробегаем по всем элементам массива "подменю ссылок", т.е. то, что идёт 4-м параметром ф. MainMenuItem
    for (var i = 0; i < obj.SubMenuLink.length; i++) {
        // Дополняем content
        content += "<tr><td class='subMenu'><a href='"+obj.SubMenuLink[i]+"'>"+obj.SubMenu[i]+"</a></td></tr>";
    }
    content += "</table></table>";
return content;        // собрали всё разметку для олного элемента массива myMenu
}
function showMenu(num) {
    menuObj.style.display = num ? "block" : "none";
}
onload = function () {
menuObj = document.getElementById("menu");
    // Пробегаем по всему массиву myMenu и создаём разметку для каждого его елемента
    for (var i = 0; i < myMenu.length; i++) {
        menuObj.innerHTML += buildMenu(myMenu[i]);
    }
alert(menuObj.innerHTML);
}

var myMenu = [
    new MainMenuItem("пункт 1", "index1.htm", ["подменю 1.1", "подменю 1.2"], ["new1.htm", "new2.htm"]),
    new MainMenuItem("пункт 2", "index2.htm", [], []),
    new MainMenuItem("пункт 3", "index3.htm", ["подменю 3.1", "подменю 3.2"], ["new5.htm", "new6.htm"])
];
</script>
<style type='text/css'>
table, td {border: 1px solid black; width: 100%}
td.mainMenu {background: #CCCCFF}
td.subMenu {background: #CCFFCC}
#menu {width: 200px; display: none}
</style>
</head>

<body>
<div onMouseOver='showMenu(1)' onMouseOut='showMenu(0)' style='width: 150px; cursor: pointer'>&gt;&gt; Меню здесь &lt;&lt;
    <div id='menu'></div>
</div>
</body>
</html>

для скрытия alert-а, закомментируй 39-строку.
PM   Вверх
ОнКофе
Дата 16.3.2006, 19:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет
Ciber SLasH,
хм..... не плохо!! ЗДОРОВО!!!
а как сделать чтобы оно сразу появлялось, чтобы не нужно было подводить мышь к надписи "Меню здесь"???
PM MAIL WWW   Вверх
Ciber SLasH
Дата 16.3.2006, 19:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
Цитата(ОнКофе @ 16.3.2006, 19:11 Найти цитируемый пост)
а как сделать чтобы оно сразу появлялось, чтобы не нужно было подводить мышь к надписи "Меню здесь"???

Но ведь тогда это уже не меню, а простая таблица...
А так вообще адаляешь DIV, где прописаны обработчики событий (оставляешь только DIV с id='menu') и в стилях у #menu убираешь display: none
PM   Вверх
ОнКофе
Дата 17.3.2006, 19:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет
Ciber SLasH,
прикольно!!!
СПАСИБо!
PM MAIL WWW   Вверх
ОнКофе
Дата 20.3.2006, 13:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет
Цитата(Ciber SLasH @ 14.3.2006, 17:33)
Поставь обработчики onMouseOver, onMouseOut событий на DIV с менюхой.
По onMouseOver — показываешь весь DIV (display: block), по onMouseOut — скрываешь (display: none).

Если внутри <div> стоит <iframe> то onMouseOut не работает! Как быть?

Это сообщение отредактировал(а) ОнКофе - 20.3.2006, 13:14
PM MAIL WWW   Вверх
Ciber SLasH
Дата 20.3.2006, 16:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
Цитата(ОнКофе @ 20.3.2006, 13:12 Найти цитируемый пост)
Если внутри <div> стоит <iframe> то onMouseOut не работает! Как быть?

Ставь onMouseOut в <iframe>:
Код

<div style='background: red'><iframe onMouseOut='this.style.display = "none"'></iframe></div>
PM   Вверх
Страницы: (5) Все 1 2 [3] 4 5 
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0515 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.