Двухуровневое меню

@xand · Регистрация: 12.04.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Делаю двухуровневое меню - html и css сгенерировал при помощи данного генератора - вроде симпотишно

Конечно хочется чтобы меню создавалось динамически. Но вот конкретно как не могу додуматься. Предпологал что нужно сделать 2 таблицы, одну с заголовками разделов, вторую с пунктами определённого раздела и связать их через столбец. Но вот при выводе не знаю как быть...
Нужно чтобы на выходе получилось такое:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="nav">
    <div class="table">
        <ul class="select">
            <li>
                <a href="#">Заголовок 1</a> 
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="">ссылка</a></li>
                        <li><a href="">ссылка</a></li>
                        <li><a href="">ссылка</a></li>
                        <li><a href="">ссылка</a></li>
                    </ul>
                </div>
            </li>
        </ul>
        <ul class="select">
            <li>
                <a href="#">Заголовок 2</a>
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="">ссылка</a></li>
                        <li><a href="">ссылка</a></li>
                        <li><a href="">ссылка</a></li>
                        <li><a href="">ссылка</a></li>
                    </ul>
                </div>
            </li>
        </ul>
        <ul class="select">
            <li>
                <a href="#">Заголовок 3</a>
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="">ссылка</a></li>
                        <li><a href="">ссылка</a></li>
                        <li><a href="">ссылка</a></li>
                        <li><a href="">ссылка</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

Вместо Заголовок 1,Заголовок 2,Заголовок 3 - данные из первой таблицы
Вместо ссылка,ссылка,ссылка,ссылка,ссылка,... - данные из второй таблицы

Либо можно сделать всё в одной таблице, просто со столбцом sub, при sub=0 это заголовок, а при sub=1,2,3,4 и тд это дочерние элементы будут, где цифры 1,2,3,4 будут сообтветствовать id заголовка...

__PION__ · 17.02.2011, 14:31

Сообщение от xand

Конечно хочется чтобы меню создавалось динамически

Тогда те нужен хотя бы пхп

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
              <div id="имя_твоего_id" class="имя_твоего_класса">
                       <ul>
                        <li><a href="имя_файла_того_раздела_на_которую ссылается_данная_ссылка.php">Название_твоего_раздела_меню</a>
<?php  
    function ShowAbout($parent_id, $level = null) {
        
        global $link;
        global $level;
        
        $level++;
        
        $query = "SELECT * FROM имя_твоей_таблицы WHERE parent = $parent_id ORDER BY corder";
        $result = mysql_query($query);
        
        if (mysql_num_rows($result) > 0) {
            echo "<ul>";
            while ($row = mysql_fetch_array($result)) {
                $id = $row["id"];
                echo "<li>";
                echo "<a href=имя_файла_того_раздела_на_которую ссылается_данная_ссылка.php?id=" . $id . ">" .
                    $row['name'] . "</a>";
 
                ShowAbout($id, $level);
                $level--;
            }
            echo "</ul>";
        }
 
    }
    ShowAbout(-1);
?>                      
                        </li>

ф-я не моя, но работает

@xand · 17.02.2011, 16:04 **[ТС]**

Уф, немного пока не понял как это мне поможет

Предположим у меня в базе 2 таблица, первая - заголовки(родители) с название headers: id, title(название пункта), link(ссылка); вторая - childrens: id, parent(родительский элемент - по нему определяется вложенность), title(название пункта), link(ссылка). Я не догоняю как грамотно сформировать запросы и осуществить вывод.
Предположим сделаю 2 запроса:

SQL
1
2
SELECT `title`, `link` FROM `headers`
SELECT `title`, `parent`, `link` FROM `childrens`

На выходе 2 массива. Дальше ступор...

__PION__ · 17.02.2011, 16:26

смари, у меня была одна таблица, в которой есть id и parent (ну другие поля конечно).
те данные у которых parent = -1 -- это главные (т.е родители), а которые не равны -1, - дети.
тож не мог додуматься, ф-ю нашел на каком то сайте. понимал что надо рекурсию применить, но не догонял как..

Добавлено через 1 минуту
блин, забыл, что js надо подключать ))

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: [url]http://www.dynamicdrive.com/[/url]
//* Created: Nov 2nd, 08'
//* Menu avaiable at DD CSS Library: [url]http://www.dynamicdrive.com/style/[/url]
*********************/
 
//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'img/down2.gif', 6], right:['rightarrowclass', 'img/2right.gif']}
 
var jqueryslidemenu={
 
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
 
buildmenu:function(menuid, arrowsvar){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
            $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
                '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
                +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
                + '" style="border:0;" />'
            )
            $curobj.hover(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                    var menuleft=this.istopheader? 0 : this._dimensions.w
                    menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                    $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
                },
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.slideUp(jqueryslidemenu.animateduration.out)
                }
            ) //end hover
        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible'})
    }) //end document.ready
}
}
 
//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

Добавлено через 3 минуты
подключать js если не знаешь надо так

PHP
1
2
3
<head>
<script type="text/javascript" src="путь_до_твоего_файла/имя_файла.js"></script>
</head>

а здесь в div'e указываешь имя класса, которое = имени файла js

Сообщение от Love_and_Peace

@Tatsu_real · 17.02.2011, 16:40

Сообщение от Love_and_Peace

смари, у меня была одна таблица, в которой есть id и parent (ну другие поля конечно).
те данные у которых parent = -1 -- это главные (т.е родители), а которые не равны -1, - дети.
тож не мог додуматься, ф-ю нашел на каком то сайте. понимал что надо рекурсию применить, но не догонял как..

ну в общем и целом ты прав, по поводу 1 таблицы, только во-первых почему "-1" если автоинкримент в базе обычно идет с 1, т.е. логичнее было бы для родителя создавать 0, во-вторых зачем JS, и такой сложный к тому же? На сколько я понял парню нужно меню 2х уровневое, без возможности скрывать и раскрывать подразделы. И даже в этом случае можно обойтись парой строчек jQuery
и в-третьих зачем рекурсию, если известно что меню 2х уровневое и не больше... одно дело когда меню 5-тиуровненвое тогда да, смысл есть, а так хватит 2 циклов и 1 проверки

@xand · 17.02.2011, 16:45 **[ТС]**

Сообщение от Tatsu_real

хватит 2 циклов и 1 проверки

можно это подробнее, в этом вся загвоздка.
Допустим если с 1 таблицей делать, то на выходе получу такой массив:

id level title link

0 0 Главная index.php

1 0 контакты cont.php

2 1 телефон #

3 1 email #

4 1 адрес #

@Tatsu_real · 17.02.2011, 17:06

xand, смотри, создай 1 таблицу: id(auto_increment, p_key, int(10 - я думаю 10 значного числа тебе должно хватить)))), title(любого типа TEXT), link(любого типа TEXT), parent(int(10))
в parent если элемент верхнего уровня 0 или -1(как ту предлагали))) без разницы, если наследник тогда ID родительского элемента
а потом делаешь так, я тебе концепцию напишу:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
$tree_res = mysql_query("SELECT * FROM menu WHERE parent = '0'"); //после этого не мешало бы проверку поставить вернул ли что-нибудь запрос
while($menu_tree = mysql_fetch_assoc($tree_res))
{
?>
        <ul class="select">
                        <li>
                                <a href="<?php echo $menu_tree['href'] ?>"><?php echo $menu_tree['title'] ?></a>
 
<?php
//эта часть если ты не уверен что у тебя есть 2 уровень, ты проверяешь на наличие детей это пункта меню
    $sub_tree_res = mysql_query("SELECT * FROM menu WHERE parent = ' ".$menu_tree['id']." ' ");
    if (!empty($sub_tree_res))
    {
?>
 
                                <div class="select_sub">
                                        <ul class="sub">
<?php
 
        while($sub_menu_tree = mysql_fetch_assoc($sub_tree_res))
        {
 
?>
                                                <li><a href="<?php echo $sub_menu_tree['link'] ?>"><?php echo $sub_menu_tree['title'] ?></a></li>
<?php
 
        }
 
?>
                                        </ul>
                                </div>
 
<?php
    }
?>
 
                        </li>
                </ul>
<?php
}
 
?>

Добавлено через 2 минуты
я написал с учетом что у родительских элементов parent = 0

PHP
1
$tree_res = mysql_query("SELECT * FROM menu WHERE parent = '0'");

__PION__ · 17.02.2011, 17:06

Tatsu_real, не спорю. на счет js - эт готовая библиотека.
на счет parent = -1, то это установка у меня в админке ). и уровней у меня было 3, с возможностью увеличивать до бесконечности (теоретически)

@Tatsu_real · 17.02.2011, 17:10

Сообщение от Love_and_Peace

и уровней у меня было 3, с возможностью увеличивать до бесконечности (теоретически)

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

Добавлено через 1 минуту

Сообщение от xand

Допустим если с 1 таблицей делать, то на выходе получу такой массив:
id level title link
0 0 Главная index.php
1 0 контакты cont.php
2 1 телефон #
3 1 email #
4 1 адрес #

а почему # ?
и лучше не надо AUTO_INCREMENT с 0 начинать... это не красиво как минимум))(столбец id)

@xand · 17.02.2011, 18:33 **[ТС]**

Спасибо! Логика ясна. Вот только такой вопрос...с точки зрения ресурсоёмкости - не много ли будет это всё "кушать", в цикле делать запросы к базе, может подумать над вариком вытянуть всю таблицу в массив и уже с ним работать?

Добавлено через 2 минуты

Сообщение от Tatsu_real

а почему # ?

- ну так для примера...

Сообщение от Tatsu_real

и лучше не надо AUTO_INCREMENT с 0 начинать... это не красиво как минимум))(столбец id)

почему это ?

@Tatsu_real · 17.02.2011, 18:55

Сообщение от xand

Спасибо! Логика ясна. Вот только такой вопрос...с точки зрения ресурсоёмкости - не много ли будет это всё "кушать", в цикле делать запросы к базе, может подумать над вариком вытянуть всю таблицу в массив и уже с ним работать?

нет... с таким количеством данных разницы можно сказать нету... а если допустим предположить что у тебя около миллиона записей, то такой метод будет работать быстрее, чем если взять массив и с ним работать по нескольким причинам... во-первых, тебе все равно придется делать циклы для построения меню, во-вторых, mysql_fetch_assoc - который делает ассоциативный массив из данных перебирает весь входящий массив(весь миллион записей), т.е. если взять сначала массив а потом еще применять циклы для построения дерева то по ресурсам такой метод "съест" в 2 раза больше ресурсов, чем тот вариант который написал я... это получится 1 миллион циклов для преобразования в ассоциативный массив, 1 миллион циклов для построения дерева меню

а в моем варианте после возврата элемента mysql_fetch_assoc сразу идут действия с этими данными, т.е. в одном цикле делается 2 действия сразу, т.е. в 1 цикле возвращается 1 строчка, преобразовываясь в ассоциативную, и сразу с этими данными идет построения дерева

Добавлено через 2 минуты

Сообщение от xand

Цитата Сообщение от Tatsu_real Посмотреть сообщение
и лучше не надо AUTO_INCREMENT с 0 начинать... это не красиво как минимум))(столбец id)
почему это ?

ну потому что 0 по умолчанию это пустое значение) можешь сам проверить) к примеру $test = 0 и если к нему применить функцию empty, типа empty($test), то она вернет true

Добавлено через 10 минут
и кстати, на будущее, работа с данными в запросах MySQL, а не в коде ПХП, "облегчает" работу твоей системы, потому что Маська работает быстрее чем интерпретатор ПХП) и порой 1 правильный запрос к Маське может тебе заменить несколько строчек ПХП)

для примера, что лучше

PHP
1
$res = mysql_query("SELECT COUNT(*) FROM tbl_name WHERE parent = '3' ")

или

PHP
1
2
3
4
5
6
7
$res = mysql_query("SELECT * FROM tbl_name WHERE parent = '3' ")
while($result = mysql_assoc($res))
{
 
   count++;
 
}

мне кажется первый вариант)))

@xand · 17.02.2011, 18:58 **[ТС]**

Благодарствую

@Tatsu_real · 17.02.2011, 19:02

всегда пожалуйста)

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

__PION__ 960 / 801 / 85 Регистрация: 21.07.2010 Сообщений: 3,522
	17.02.2011, 17:06
	Tatsu_real, не спорю. на счет js - эт готовая библиотека. на счет parent = -1, то это установка у меня в админке ). и уровней у меня было 3, с возможностью увеличивать до бесконечности (теоретически) 0

@xand 84 / 84 / 8 Регистрация: 12.04.2010 Сообщений: 324
	17.02.2011, 18:58 [ТС]
	Благодарствую 0

@Tatsu_real 96 / 96 / 7 Регистрация: 14.02.2011 Сообщений: 238
	17.02.2011, 19:02
	всегда пожалуйста) 0