Вывод многоуровневого меню с неограниченным уровнем вложенности PHP + MySQL

Вывод меню из базы данных MySQL посредством PHP в виде дерева с неограниченным уровнем вложенности

Вывод многоуровневого меню с неограниченным уровнем вложенности PHP + MySQL
8 месяцев назад

Вывод многоуровневого меню с неограниченным уровнем вложенности PHP + MySQL

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

Разметка очень простая, в коде функции уровни разграничены при помощи тега <ul>.

Подключаемся к базе данных и получаем массив с данными, которые обрабатываем и сортируем. Затем делаем вывод ul для создания списка, вызываем функцию, в которой отбираем все корневые каталоги, с которых будет начинаться вывод. Затем проходимся по массиву, выводим корневой каталог и вызываем функцию куда передаем id каждого корневого каталога и массив с данными.
demo.php
<?php

require_once("db.php");

$result = mysql_query("SELECT * FROM menu");
while ($row = mysql_fetch_array($result))
{
    $data[$row['id']]= $row;
}

function view_cat ($dataset) {

    $arr = "";
    foreach ($dataset as $menu) {

        $arr .= "<li><a>".$menu["name"]."</a>";
    
    if(!empty($menu['childs'])) {
        $arr .= '<ul>';
            $arr .= view_cat($menu['childs']);
          $arr .= '</ul>';
        }
       $arr .= '</li>';

    }
    return $arr;
}

function mapTree($dataset) {

$tree = array();

foreach ($dataset as $id=>&$node) {

    if (!$node['parent_id']) {
        $tree[$id] = &$node;
    }
    else {
        $dataset[$node['parent_id']]['childs'][$id] = &$node;
    }
}
    return $tree;
}

$data = mapTree($data);

echo "<ul class='tree'>".view_cat($data)."</ul>";

?>
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html{
    height: 100%;
}

body{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    margin: 20px 0; 
    padding: 0;
}

.tree {
    display: table;
    margin: 0 auto;
}

.tree li {
    list-style-type: none;
    margin:10px;
    position: relative;
}

.tree li::before {
    content: "";
    position: absolute;
    top:-7px;
    left:-20px;
    border-left: 1px solid #ccc;
    border-bottom:1px solid #ccc;
    border-radius:0 0 0 0px;
    width:20px;
    height:15px;
}

.tree li::after {
    position:absolute;
    content:"";
    top:8px;
    left:-20px;
    border-left: 1px solid #ccc;
    border-top:1px solid #ccc;
    border-radius:0px 0 0 0;
    width:20px;
    height:100%;
}

.tree li:last-child::after  {
    display:none;
}

.tree li:last-child:before{
    border-radius: 0 0 0 5px;
}

ul.tree>li:first-child::before {
    display:none;
}

ul.tree>li:first-child::after {
    border-radius:5px 0 0 0;
}

.tree li a {
    border: 1px #ccc solid;
    border-radius: 5px;
    padding:2px 5px;
}

.tree li a:hover, .tree li a:hover+ul li a,
.tree li a:focus, .tree li a:focus+ul li a {
    background: #f1f1f1; color: #000;
}

.tree li a:hover+ul li::after, .tree li a:focus+ul li::after,
.tree li a:hover+ul li::before, .tree li a:focus+ul li::before 
.tree li a:hover+ul::before, .tree li a:focus+ul::before 
.tree li a:hover+ul ul::before, .tree li a:focus+ul ul::before{
    border-color:  #000;
}
db_inc.php
<?php

$db_host = "localhost";
$db_user = "root";
$db_password = "";
$db_base = "dbname";

$link = mysql_connect($db_host, $db_user, $db_password) or die("Ошибка соединения: " . mysql_error());
mysql_select_db($db_base);

mysql_set_charset('utf8',$link);

?>
menu.sql
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;


CREATE TABLE `menu` (
  `id` int(5) NOT NULL,
  `parent_id` int(5) NOT NULL,
  `name` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `menu` (`id`, `parent_id`, `name`) VALUES
(1, 3, 'Audi'),
(2, 3, 'BMW'),
(3, 0, 'Немецкие'),
(4, 0, 'Японские'),
(5, 0, 'Американские'),
(294, 0, 'Корейские'),
(295, 4, 'Lexus'),
(296, 4, 'Toyota'),
(297, 4, 'Honda'),
(298, 4, 'Mitsubishi'),
(299, 4, 'Suzuki'),
(300, 5, 'Chevrolet'),
(301, 294, 'Hyundai'),
(302, 294, 'Kia'),
(303, 296, 'Avensis'),
(304, 296, 'Corolla'),
(305, 296, 'Camry'),
(306, 296, 'Prado'),
(307, 296, 'LC 200'),
(308, 305, '2.0'),
(309, 305, '2.5');


ALTER TABLE `menu`
  ADD PRIMARY KEY (`id`);


ALTER TABLE `menu`
  MODIFY `id` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=310;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
722
Демо Скачать
Комментарии
  • Коля3 месяца назад
    Если это меню, где ссылки?
    Ответить

×
Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.