VPF::Построение вёрстки меню - Форум программистов

ОнКофе

Дата 14.3.2006, 16:58 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: нет
Всего: нет

Ciber SLasH,
оно может и стоит заглянуть... только ведь там скрип скачаешь и все.. и никто не поможет разобраться, никто не поможет переделать.... такие вот дела....

еще наткнулся на непонятное.... а как сделать пункт меню например второй, чтобы у него не было подпунктов???

Ciber SLasH

Дата 14.3.2006, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Просто пишешь пустые массивы:

Код


new MainMenuItem("пункт 2", "index2.htm", [], []),

Это сообщение отредактировал(а) Ciber SLasH - 14.3.2006, 17:03

ОнКофе

Дата 14.3.2006, 17:05 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: нет
Всего: нет

Цитата(Ciber SLasH @ 14.3.2006, 17:02)

Код


new MainMenuItem("пункт 2", "index2.htm", [], []),

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

Ciber SLasH

Дата 14.3.2006, 17:10 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Поменять стиль на такой:

Код


<style type='text/css'>
table, td {border: 1px solid black; width: 100%}
#menu {margin: 10px; width: 200px}
</style>

ОнКофе

Дата 14.3.2006, 17:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: нет
Всего: нет

Ciber SLasH,
ОГРОМНОЕ СПАСИБО!!!!
только вот теперь такой вопрос!!!
А как мне определить цвет ячеек, чтобы у меню был одного цвета а у подменю другого!???

Ciber SLasH

Дата 14.3.2006, 17:20 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

В 23-строке и в 28-строке в генерируемой ячейке пропиши класс, а затем опиши класс в стилях.
Вообще-то это уже к JS не имеет отношение, это в "Вёрстка web-сайтов".

ОнКофе

Дата 14.3.2006, 17:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: нет
Всего: нет

Ciber SLasH,
так... разобрался....
вот еще вопрос! а можно сделать чтобы подменю было отдельным слоем? ну чтобы его можно было потом сбоку приделать... тоесть подводишь мышку к пункту меню, а подменю вылазит сбоку...
Я понимаю что это все переделать нужно, просто если есть возможность подскажи..., так сказать дай направление...

Ciber SLasH

Дата 14.3.2006, 17:33 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Поставь обработчики onMouseOver, onMouseOut событий на DIV с менюхой.
По onMouseOver — показываешь весь DIV (display: block), по onMouseOut — скрываешь (display: none).

ОнКофе

Дата 14.3.2006, 17:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: нет
Всего: нет

Ciber SLasH,
не пойму куда <DIV> засунуть нужно .... подскажи, пожалуйста!
а во всех браузерах работать будет?
Добавлено @ 17:43
Ciber SLasH,

попоробовал изменить класс вот так
var content = "<table>\n<tr><td class="menu"><a href='"+obj.Link+"'>"+obj.Title+"</a></td></tr>\n";

ничего не получилось... выходит пустое окно... в стилях этот клас прописал... КАК БЫТЬ?

ОнКофе

Дата 14.3.2006, 17:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: нет
Всего: нет

Ciber SLasH,

вот еще оказывается что мне нужно, чтобы у всех <DIV> id автоматически выстанавливался в очередном порядке начиная с 1.... , но только чтобы у тех пунктов меню, у которых нет подменю, id <div> был равен null

вот например

Код


<table>
<tr><td>Пункт 1</td></tr>
<div id=1>
<tr><td>Подменю 1.1</td></tr>
<tr><td>Подменю 1.2</td></tr>
</div>

<tr><td>Пункт 2</td></tr>
<div id=null>
</div>

<tr><td>Пункт 1</td></tr>
<div id=2>
<tr><td>Подменю 2.1</td></tr>
<tr><td>Подменю 2.2</td></tr>
</div>

</table>

Что-то примерно так.... ЗАРАНЕЕ БЛАГОДАРЕН!!!

Ciber SLasH

Дата 14.3.2006, 18:24 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Цитата(ОнКофе @ 14.3.2006, 17:36

)

не пойму куда <DIV> засунуть нужно

Никуда его засовывать не надо. Его надо по умолчанию скрыть и определить элемента, на который при наведении грызуном будет показываться этот DIV.

Цитата(ОнКофе @ 14.3.2006, 17:36

)

попоробовал изменить класс вот так
var content = "<table>\n<tr><td class="menu">

Ну так кавычки аедь обрывают строку! Их либо надо экранировать \", либо использовать одинарные.

Цитата(ОнКофе @ 14.3.2006, 17:59

)

чтобы у всех <DIV> id автоматически выстанавливался

Ну так определить нужно глобальную переменную, которую прописывать в ID при генерации таблицы, а следом увеличивать эту переменную.

Цитата(ОнКофе @ 14.3.2006, 17:59

)

у которых нет подменю, id <div> был равен null

Условие можно вставить: если длина массив подменю 0, то вставить null.
Это уже елементарщина пошла, тут всего-лишь нужно чуть-чуть напрячь мозг.

ОнКофе

Дата 14.3.2006, 18:37 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: нет
Всего: нет

Ciber SLasH,
я понимаю что элементарщина, но так ведь это для тебя оно так, для меня иначе...
все равно не могу понять как <DIV> сделать чтобы он не к каждой ячейке прописывался а только к тем которые лежат в подменю.... и как описать условие если длина массив подменю 0, то вставить null, тоже не пойму...

После того как присвоил класс для <td> между ячейками стало видно пространсто... это можно как-нибудь избежать? с этим разобрался... вместо <table> написал <table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tr><td class=\"menu\">

Прошу о помощи!
Еще раз прошу написать код! СПАСИБО!

Это сообщение отредактировал(а) ОнКофе - 14.3.2006, 18:59

Ciber SLasH

Дата 14.3.2006, 19:41 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 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) ? "<div id='"+index+"'>" : "<div 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 += "</div></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]);
    }
}

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='cursor: pointer'>&gt;&gt; Меню здесь &lt;&lt;
    <div id='menu'></div>
</div>
</body>
</html>

ОнКофе

Дата 14.3.2006, 19:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: нет
Всего: нет

Ciber SLasH,
немного не то.... но это я виноват.. поспешил.... давай по порядку разберемся...
нужно чтобы в конечном счете получилось вот так

Код


<table>    
<tr><td>Пункт 1</td></tr>    
<div id=1>    
<tr><td>Подменю 1.1</td></tr>    
<tr><td>Подменю 1.2</td></tr>    
</div>    
<tr><td>Пункт 2</td></tr>    
<div id=null> <!-- id=null так как нет понктов подменю  -->    
</div>    
<tr><td>Пункт 1</td></tr>    
<div id=2>    
<tr><td>Подменю 2.1</td></tr>    
<tr><td>Подменю 2.2</td></tr>    
</div>    
</table>

так можно сделать?

Ciber SLasH

Дата 14.3.2006, 20:19 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

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

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

Вот ещё вариант через NODE-ы:

Код


<!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 objTable = document.createElement("TABLE");
var objTR = document.createElement("TR");
var objTD = document.createElement("TD");
    objTD.className = "mainMenu";
var objA = document.createElement("A");
    objA.href = obj.Link;
    objA.innerHTML = obj.Title;
    objTD.appendChild(objA);
    objTR.appendChild(objTD);
    objTable.appendChild(objTR);
    // Если подменю НЕ пустое
var objDiv = document.createElement("DIV");
    if (obj.SubMenuLink.length > 0) {
        objDiv.id = String(index);
        index++;
    } else {
        objDiv.id = "null";
    }
    // Пробегаем по всем элементам массива "подменю ссылок", т.е. то, что идёт 4-м параметром ф. MainMenuItem
    for (var i = 0; i < obj.SubMenuLink.length; i++) {
        objTR = document.createElement("TR");
        objTD = document.createElement("TD");
        objTD.className = "subMenu";
        objA = document.createElement("A");
        objA.href = obj.SubMenuLink[i];
        objA.innerHTML = obj.SubMenu[i];
        objTD.appendChild(objA);
        objTR.appendChild(objTD);
        objDiv.appendChild(objTR);
    }
    objTable.appendChild(objDiv);
return objTable;
}
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.appendChild(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}
#1 {background: red}
</style>
</head>

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »