Многоуровневое меню php – Построение многоуровневого меню неограниченной вложенности из массива, PHP, BITRIX | Бортовой журнал Ктулху — Вебджем.рф

Содержание

Как сделать многоуровневое меню с сортировкой php? — Хабр Q&A

Есть массив с категориями, не вложенные, все подряд идут.

Array
(
    [0] => Array
        (
            [category_id] => 62
            [name] => Категория 1
            [parent_id] => 0
            [sort_order] => 1
            [img] => img1.jpg
            [href] => google.com/1
        )

	[1] => Array
        (
            [category_id] => 64
            [name] => Подкатегория 1.1
            [parent_id] => 62
            [sort_order] => 2
            [img] => img2.jpg
            [href] => google.com/2
        )
    [1] => Array
        (
            [category_id] => 63
            [name] => Подкатегория 1.2
            [parent_id] => 62
            [sort_order] => 1
            [img] => img3.jpg
            [href] => google.com/3
        )

   
    [5] => Array
        (
            [category_id] => 71
            [name] => Категория 2
            [parent_id] => 0
            [sort_order] => 3
            [img] => img.4
            [href] => google.com/4
        )

    [6] => Array
        (
            [category_id] => 72
            [name] => Подкатегория 2.1
            [parent_id] => 71
            [sort_order] => 2
            [img] => img5.jpg
            [href] => google.com/5
        )

такого вида, всегда 2 уровня, возможно будет 3.

Нужно вывести с сортировкой

Категория 1
- подкатегория 1.1
- подкатегория 1.2
Категория 2
- подкатегория 2.1

Как сделал я

if ($manufacturer_categories) {
    foreach ($manufacturer_categories as $category) {

        if ($category['parent_id'] == 0) {
            $toplvl[] = $category;
        } else {
            $sublvl[] = $category;
        }

    }
    foreach ($toplvl as $tops) {
        echo $tops['name'];

        foreach ($sublvl as $subs) {
            echo '<ul>';
            if ($subs['parent_id'] == $tops['category_id']) {

                echo '<li>' .$subs['name'] . '</li>';

            }
            echo '</ul>';
        }

       }

}

1. не знаю как сделать сортировку
2. по моему 3 форича в данной ситуации перебор, можно написать гораздо компактнее

Многоуровневого меню на php и mySQL — Web-Make

ДАМП ТАБЛИЦЫ ДЛЯ МЕНЮ

CREATE TABLE `tt_menu` (

`id` int(11) NOT NULL auto_increment,

`name` varchar(255) NOT NULL,

`alt_name` varchar(255) NOT NULL,

`pos` tinyint(4) NOT NULL,

`par` int(11) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=cp1251;

$dbpf = ‘tt’; //префикс таблицы меню

//функция предварительного вызова обработчика меню

function sel_cat($par=0){

global $dbpf; $out = »;

if ($par==0) {$out = ‘<ul><li><a href=»/»>Главная</a><ul><ul>’;

$out .= sel_cat_r($par);

$out .= ‘</ul></li></ul>’;

}else $out = »;

return $out;

}

function sel_cat_r($par=0){

global $dbpf,$lev; $out = »; $lev++;

$sql = «SELECT * FROM «.$dbpf.»_menu WHERE par=».$par.» ORDER BY pos, name ASC»;

$qur = mysql_query($sql);

while($rez = mysql_fetch_assoc($qur)){

$out .= «\n».'<ul><li><a href=»/’.$rez[‘alt_name’].’.html»>’.stripslashes($rez[‘name’]).'</a>’;

$out .= sel_cat_r($rez[‘id’]);

$out .= ‘ ’.»\n»;

$lev—;

}

return $out;

}

//ВЫЗОВ ФУНКЦИИ

echo sel_cat(0);

/* РЕЗУЛЬТАТ РАБОТЫ

<ul>

<li><a href=»/»>Главная</a></li>

<ul>

<li><a href=»/contacts/»>Контакты</a></li>

<li><a href=»/shema_proezda/»>Схема проезда</a></li>

</ul>

</li>

<li><a href=»/products/»>Продукция</a>

<ul>

<li><a href=»/roznica»>Розница</a></li>

<li><a href=»/opt/»>Оптом</a></li>

</ul>

</li>

</ul>

Многоуровневое меню

/* Icons (made with Icomoon.io) */

/* Feather Icons by Cole Bemis */

@font-face {

font-family: ‘feather’;

font-weight: normal;

font-style: normal;

src: url(‘../fonts/feather/feather.eot?1gafuo’);

src: url(‘../fonts/feather/feather.eot?1gafuo#iefix’) format(’embedded-opentype’), url(‘../fonts/feather/feather.woff2?1gafuo’) format(‘woff2’), url(‘../fonts/feather/feather.ttf?1gafuo’) format(‘truetype’), url(‘../fonts/feather/feather.woff?1gafuo’) format(‘woff’), url(‘../fonts/feather/feather.svg?1gafuo#feather’) format(‘svg’);

}

.icon {

font-family: ‘feather’;

font-weight: normal;

font-style: normal;

font-variant: normal;

line-height: 1;

text-transform: none;

/* Better Font Rendering =========== */

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

speak: none;

}

.icon—arrow-left:before {

content: ‘\e901’;

}

.icon—menu:before {

content: ‘\e903’;

}

.icon—cross:before {

content: ‘\e117’;

}

/* Стили меню */

.menu {

position: fixed;

top: 120px;

left: 0;

width: 300px;

height: calc(100vh — 120px);

background: #1c1d22;

}

.menu__wrap {

position: absolute;

top: 3.5em;

bottom: 0;

overflow: hidden;

width: 100%;

}

.menu__level {

position: absolute;

top: 0;

left: 0;

visibility: hidden;

overflow: hidden;

overflow-y: scroll;

width: calc(100% + 50px);

height: 100%;

margin: 0;

padding: 0;

list-style-type: none;

}

.menu__level—current {

visibility: visible;

}

.menu__item {

display: block;

width: calc(100% — 50px);

}

.menu__link {

font-weight: 600;

position: relative;

display: block;

padding: 1em 2.5em 1em 1.5em;

color: #bdbdbd;

-webkit-transition: color 0.1s;

transition: color 0.1s;

}

.menu__link[data-submenu]::after {

content: ‘\e904’;

font-family: ‘feather’;

position: absolute;

right: 0;

padding: 0.25em 1.25em;

color: #2a2b30;

}

.menu__link:hover,

.menu__link[data-submenu]:hover::after {

color: #5c5edc;

}

.menu__link—current::before {

content: ‘\00B7’;

font-size: 1.5em;

line-height: 0;

position: absolute;

top: 50%;

left: 0.5em;

height: 4px;

color: #5c5edc;

}

[class^=’animate-‘],

[class*=’ animate-‘] {

visibility: visible;

}

.animate-outToRight .menu__item {

-webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);

animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);

}

@-webkit-keyframes outToRight {

to {

opacity: 0;

-webkit-transform: translate3d(100%, 0, 0);

transform: translate3d(100%, 0, 0);

}

@keyframes outToRight {

to {

opacity: 0;

-webkit-transform: translate3d(100%, 0, 0);

transform: translate3d(100%, 0, 0);

}

.animate-outToLeft .menu__item {

-webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);

animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);

}

@-webkit-keyframes outToLeft {

to {

opacity: 0;

-webkit-transform: translate3d(-100%, 0, 0);

transform: translate3d(-100%, 0, 0);

}

@keyframes outToLeft {

to {

opacity: 0;

-webkit-transform: translate3d(-100%, 0, 0);

transform: translate3d(-100%, 0, 0);

}

.animate-inFromLeft .menu__item {

-webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);

animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);

}

@-webkit-keyframes inFromLeft {

from {

opacity: 0;

-webkit-transform: translate3d(-100%, 0, 0);

transform: translate3d(-100%, 0, 0);

}

to {

opacity: 1;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

@keyframes inFromLeft {

from {

opacity: 0;

-webkit-transform: translate3d(-100%, 0, 0);

transform: translate3d(-100%, 0, 0);

}

to {

opacity: 1;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.animate-inFromRight .menu__item {

-webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);

animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);

}

@-webkit-keyframes inFromRight {

from {

opacity: 0;

-webkit-transform: translate3d(100%, 0, 0);

transform: translate3d(100%, 0, 0);

}

to {

opacity: 1;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

@keyframes inFromRight {

from {

opacity: 0;

-webkit-transform: translate3d(100%, 0, 0);

transform: translate3d(100%, 0, 0);

}

to {

opacity: 1;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.menu__breadcrumbs {

font-size: 0.65em;

line-height: 1;

position: relative;

padding: 2.5em 3.75em 1.5em 2.5em;

}

.menu__breadcrumbs a {

font-weight: bold;

display: inline-block;

cursor: pointer;

vertical-align: middle;

letter-spacing: 1px;

text-transform: uppercase;

color: #5c5edc;

}

.menu__breadcrumbs a:last-child {

pointer-events: none;

}

.menu__breadcrumbs a:hover {

color: #8182e0;

}

.menu__breadcrumbs a:not(:last-child)::after {

content: ‘\e902’;

font-family: ‘feather’;

display: inline-block;

padding: 0 0.5em;

color: #33353e;

}

.menu__breadcrumbs a:not(:last-child):hover::after {

color: #33353e;

}

.menu__back {

font-size: 1.05em;

position: absolute;

z-index: 100;

top: 0;

right: 2.25em;

margin: 0;

padding: 1.365em 0.65em 0 0;

cursor: pointer;

color: #2a2b30;

border: none;

background: none;

}

.menu__back—hidden {

pointer-events: none;

opacity: 0;

}

.menu__back:hover,

.menu__back:focus {

color: #fff;

outline: none;

}

/* Кнопки открытия и закрытия */

.action {

position: absolute;

display: block;

margin: 0;

padding: 0;

cursor: pointer;

border: none;

background: none;

}

.action:focus {

outline: none;

}

.action—open {

font-size: 1.5em;

top: 1em;

left: 1em;

display: none;

color:

Активный пункт меню через PHP

Приятно смотреть на сайты, в которых активная страница выделяется среди остальных в пункте меню или навигации. Реализовать данную возможность можно используя механизм jQuery или PHP скрипта.

Сделать меню с выделением активного пункта не так сложно, как кажется. Даже на jQuery это сделать немного сложнее, об этом вы можете прочитать в этой статье.

Предположим, что у нас есть такое меню:

<ul>
<li><a href=»/»>Главная</a></li>
<li><a href=»/o-nas»>О нас</a></li>
<li><a href=»/contacti»>Контакты</a></li>
</ul>

Чтобы добавить в него код, который бы сам определял активный пункт, добавим в пример php код:

<?php $url = $_SERVER[«REQUEST_URI»];?>
<ul>
<li><a href=»/» <?php if ($url == «/») {echo ‘class=»active»‘;}?>>Главная</a></li>
<li><a href=»/o-nas» <?php if ($url == «/o-nas») {echo ‘class=»active»‘;}?>>О нас</a></li>
<li><a href=»/contacti» <?php if ($url == «/contacti») {echo ‘class=»active»‘;}?>>Контакты</a></li>
</ul>

Разберем работу скрипта

Первая строка запоминает в переменную $url текущую ссылку открытой страницы сайта, причем без домена. Например, если ссылка страницы будет домен.ру/imgs/les/, то в $url будет /imgs/les/. Далее в каждом li a находится условие на проверку текущей страницы. Если где-то условие совпадает, то к ссылке добавляется класс active, на который можно сделать выделение через css стили.

Активный пункт можно назначить и на li тег, тогда условия надо ставить так: <li <?php if ($url == «/») {echo ‘class=»active»‘;}?>><a href=»/»>Главная</a></li>.

Таким образом, через php вполне можно выделять активные пункты в навигации. Минусом такого подхода является ручная настройка ссылок и увеличение кода. Но если у вас маленький сайт, то данный метод вполне оправдан.

Многоуровневое меню php – Построение многоуровневого меню неограниченной вложенности из массива, PHP, BITRIX | Бортовой журнал Ктулху

Как сделать многоуровневое меню с сортировкой php? — Хабр Q&A

Многоуровневого меню на php и mySQL — Web-Make

Многоуровневое меню

Активный пункт меню через PHP

Читайте также

Добавить комментарий Отменить ответ

Рубрики