Создание меню с помощью php css html. Многоуровневое меню на PHP и MySQL

Поскольку она раскрывает содержание модуля menu.php . Ниже будет представлена собственная разработка меню на PHP, которая была написана с нуля в блокноте.

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

Для начала приведу примерную структуру сайта, для которого подойдет это меню. Структура сайта должна иметь следующий вид (классический вид):

/index.html /razdel_1/ /razdel_1/articles_1.html /razdel_1/articles_2.html ... /razdel_2/ /razdel_2/articles_1.html /razdel_2/articles_2.html ... ... ... /razdel_N/articles_2.html

Сайт может содержать у разделов еще и подразделы:

/razdel_1/podzaderl_1/ /razdel_1/podzaderl_1/articles_1.html /razdel_1/podzaderl_1/articles_2.html ... /razdel_1/podzaderl_2/articles_1.html /razdel_1/podzaderl_2/articles_2.html

Такая структура также будет работать для нашего меню лишь с небольшими отличиями.

Я предлагаю создать отдельный файл для меню на php. Например, menu.php было бы отличным названием для такого файлика. Для реализации меню также представлен стиль меню в CSS, чтобы сразу сделать его более менее красивым. Естественно этот стиль дается только для ознакомления, поскольку дизайны у сайтов очень разные.

Код для стиля меню в CSS:

.menu { height:42px; padding:0 0 0 16px; background:url(images/spacer.png) repeat; } .menu li { display:block; float:left; } .menu li.active { background: #000011; } .menu a { color:#FFF; display:block; line-height:42px; text-decoration:none; padding:0 14px; } .menu a:hover { background:url(images/spacer.png) repeat; }

Теперь, давайте рассмотрим первый вариант реализации меню на PHP, который является немного упрощенным.

Первый вариант кода меню на PHP

\n"; for ($i=0;$i": "
  • "; echo "".$array_menu[$i]["name"]."
  • \n"; } echo ""; ?>

    Меню можно разделить на две части. Первая содержит информационный массив $array_menu , в который заносятся названия наших разделов с ссылками на разделы. Есть вариант забить эти данные в базу данных mySQL, но особо смысла в этом нет, поскольку выборка совсем небольшая, поэтому на скорость работы это никак не повлияет.

    Вторая часть содержит вывод меню через цикл for . В цикле происходит сравнение адреса сайта с адресом из массива $array_menu . Если есть совпадение, то выводим очередной раздел меню со специальным классом active:

  • , иначе просто
  • . Это позволяет нам выделить каким-то цветом ту часть меню, в котором находится пользователь. На мой взгляд, это необходимая вещь для любого сайта, чтобы пользователь мог понимать в каком разделе он находится.

    Порядок следования в массиве будет сохранятся и при выводе меню на сайте. То есть массив надо заполнять в порядке, в котором нужно выводить меню.

    Примечание:
    В случае, если URL (адреса) заголовком разделов имеют вид:
    /razdel_1
    или такой
    /razdel_1/nazvanie_razdela.html
    то в array_menu нужно записывать точное совпадение:
    $array_menu[$i]["url"]="/razdel_1"
    или для второго случая:
    $array_menu[$i]["url"]="/razdel_1/nazvanie_razdela.html" ;

    Как работает первый вариант меню?
    Он подсвечивает меню только, если Вы находитесь по адресу заголовка раздела. Например, если адрес страницы будет /razdel_1/articles_1.html , то меню никак не будет подсвечиваться.

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

    Второй вариант кода меню на PHP

    "; for ($i=0;$i": "
  • "; echo "".$array_menu[$i]["title"]."
  • "; } else { echo ($URL) == ($array_menu[$i]["url"]) ? "
  • ": "
  • "; echo "".$array_menu[$i]["title"]."
  • "; } } echo ""; ?>

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

    Как это можно реализовать на PHP? Очень просто! Например, у нас есть файл index.php, который в зависимости от выбранного раздела в выпадающем списке, должен отображать соответствующий контент на странице. Реализуется это следующим образом:

    1. Создаем файлы в формате.html, которые и будут содержать в себе необходимый для вывода контент.

    2. Создаем (пишем) в скрипте index.php необходимые условия, для вывода соответствующей информации.

    3. Рассматриваем созданный скрипт с позиции безопасности выполняемого сценария.

    Ну, вроде, как с теорией закончил, переходим к практике. Сначала создаем статические страницы в формате .html , которые и будут содержать необходимую информацию. Там можно написать все, что душе угодно:) В итоге у нас должно получиться, как минимум два файла first.html и second.html , соответственно потом их можно будет сделать сколько угодно, поняв основной алгоритм работы кода.

    Для вывода выпадающего списка в файле index.php создаем html форму, и ниже пишем PHP скрипт такого содержания:



    Menu PHP


    Выпадающее меню на PHP












    if (isset ($_GET ["where" ]))
    {
    if ($_GET ["where" ]==1 )
    $file = "first.html" ;
    if ($_GET ["where" ]==2 )
    $file = "second.html" ;
    include ($file );
    }
    ?>


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

    Уязвимость данного скрипта заключается в том, что переменная $file остается не инициализирована, и в этом случае значение автоматически созданной переменной попадает сразу в функцию include , а она в свою очередь успешно ее (переменную) подключает и отображает на экране. И это может быть не только файл конфигурации .htaccess . Для того, что-бы взломать данный сценарий, достаточно параметру where передать не предусмотренное кодом значение, ну например 3. А так, как это значение не предусмотрено сценарием, то просто переменная $file не пройдет инициализацию. Поэтому, ей можно будет задать произвольное значение через строку URL.

    http://localhost/index.php?where=3&file=.htaccess

    Но это так, небольшое отступление от темы. 😀

    Вариант решения данной проблемы достаточно прост, переменную $file просто необходимо инициализировать до начала использования, т. е. присвоить ей значение по умолчанию.

    Здесь, если параметр where передан скрипту, то переменная будет инициализирована корректно, иначе просто окажется пустой. Вот такое получилось [безопасное] выпадающее меню на PHP.

    P.S. Создавая сценарии необходимо учитывать и соответственно исключать все возможные векторы атак. Только так можно создать проект, который будет отвечать правилам безопасности и востребован заказчиком. До новых встреч!

    В этой статье я покажу, как можно создавать многоуровневое меню на PHP и MySQL . Безусловно, вариантов его создания можно придумать много, но, судя по количеству Ваших вопросов на эту тему, Вам нужен пример. И его я приведу в этой статье. Сразу отмечу, что данная статья имеет смысл только для тех, кто знает PHP и умеет работать с MySQL . Всем остальным сначала надо пройти этот , либо прочитать какие-нибудь книги по PHP и MySQL .

    Для начала создадим таблицу в базе данных со следующими полями:

    • id - уникальный идентификатор.
    • title - анкор ссылки в меню.
    • link - адрес, на который будет вести пункт меню.
    • parent_id - родительский ID. Если родительского пункта нет, то здесь будет NULL (либо можно ещё 0 поставить).

    С таблицей разобрались, теперь пришло время PHP-кода . Полный PHP-код приведён ниже:

    $mysqli = new mysqli("localhost", "root", "", "db"); // Подключаемся к БД
    $result_set = $mysqli->query("SELECT * FROM `menu`"); // Делаем выборку всех записей из таблицы с меню
    $items = array(); // Массив для пунктов меню
    while (($row = $result_set->fetch_assoc()) != false) $items[$row["id"]] = $row; // Заполняем массив выборкой из БД
    $childrens = array(); // Массив для соответствий дочерних элементов их родительским
    foreach ($items as $item) {
    if ($item["parent_id"]) $childrens[$item["id"]] = $item["parent_id"]; // Заполняем массив
    }
    function printItem($item, $items, $childrens) {
    /* Выводим пункт меню */
    echo "

  • ";
    echo "".$item["title"]."";
    $ul = false; // Выводились ли дочерние элементы?
    while (true) {
    /* Бесконечный цикл, в котором мы ищем все дочерние элементы */
    $key = array_search($item["id"], $childrens); // Ищем дочерний элемент
    if (!$key) {
    /* Дочерних элементов не найдено */
    if ($ul) echo ""; // Если выводились дочерние элементы, то закрываем список
    break; // Выходим из цикла
    }
    unset($childrens[$key]); // Удаляем найденный элемент (чтобы он не выводился ещё раз)
    if (!$ul) {
    echo "
      "; // Начинаем внутренний список, если дочерних элементов ещё не было
      $ul = true; // Устанавливаем флаг
      }
      echo printItem($items[$key], $items, $childrens); // Рекурсивно выводим все дочерние элементы
      }
      echo "";
      }
      ?>

      Этот код полностью рабочий, однако, Вы должны понимать, что так никто не пишет (в частности, вывод через echo HTML-тегов ). И Ваша задача взять алгоритм из этого кода, но не сам код. А дальше этот алгоритм подключить к своему движку. Я постарался тщательно прокомментировать код вывода многоуровневого меню на PHP и MySQL , но, безусловно, он не самый прозрачный и требует уже неплохих начальных знаний. Если Вы ещё плохо знаете PHP и MySQL , то сначала настоятельно рекомендую пройти этот

      Меню сайта на php, который управляется php скриптами имеет свои особенности. Это не просто абсолютные либо относительные ссылки, хотя это вполне может быть и так, а, как правило, динамически формируемые блоки ссылок боковых панелей с разделами и подразделами и блоки ссылок с самих внутренних страниц сайта. Динамически формируемое меню очень удобно, потому, как его можно вставлять в любое место сайта и, что самое важное в нужное время. Тоесть при переходе в разные разделы и подразделы можно динамически разворачивать и разные блоки меню. Причем они могут быть разные не только по содержанию, но и по форме и оформлению. В статическом сайте тоже вполне можно проделывать такие финты, но это будет стоить дополнительных файлов шаблона и еще массу всяких ухищрений. В то время, как сайт написанный на php ничего этого не требует. Шаблон останется, как и был. Всем будет управлять один или несколько простых php скриптов.

      Для того, чтобы убедиться в этом, достаточно написать php скрипт для динамического формирования меню, например, первой рубрики и заставить его развернуть меню этой рубрики через уже написанный ранее скрипт . Остальные рубрики можно будет сформировать подобным образом. Причем код самого скрипта при этом мало чем практически не изменится. Меняться будет только текстовый файл, который будет определять названия ссылок и сами ссылки. Код такого скрипта приведен ниже по тексту.

      // Формирователь меню
      $menu = @file($rubric1_menu);
      $lines = count($menu);
      for ($i = 0; $i < $lines; $i++)
      {
      list($menu_link,$menu_name,$menu_title)=explode("::", $menu[$i]);
      if($page == rub1_part1 and $i == 0) {$refcolor = "style="color:#cc0000"";}
      elseif($page == rub1_part2 and $i == 1) {$refcolor = "style="color:#cc0000"";}
      elseif($page == rub1_part3 and $i == 2) {$refcolor = "style="color:#cc0000"";}
      else {$refcolor = "";}
      $rubric1.="

    • ".$menu_name."
    • ";
      }
      ?>

      Для того, чтобы такой скрипт работал необходим текстовый файл в котором будут храниться названия ссылок меню, сами ссылки и их title. Создать такой файл несложно, достаточно выполнить из главного меню программы Dreamweaver команду File −> New, создать новый html документ, как было описано ранее, проверить и если необходимо изменить кодировку нового файла на UTF-8, а затем сохранить его под именем rubric1.dat в предварительно созданной для него папке data. Полный путь к этому файлу будет D:/Mysitephp/data/rubric1.dat. Содержимое файла, приведенное ниже, это сами ссылки, их названия и их title (подсказки). Кроме, для того, чтобы запустить данный скрипт в работу, его необходимо подключить с помощью функции include() в шаблонизаторе main.php.

      Rub1_part1::Раздел 1::Раздел 1 рубрики 1::
      rub1_part2::Раздел 2::Раздел 2 рубрики 1::
      rub1_part3::Раздел 3::Раздел 3 рубрики 1::

      Кроме этого необходимо также создать небольшой скрипт с установками, в котором будут храниться полный адрес сайта, пути к папкам страниц и мета описаний сайта, пути к файлам меню сайта и подключить его с помощью функции include() в шаблонизаторе main.php. Для этого необходимо создать новый php файл, и сохранить его под именем например setings.php в папке php. Полный путь к файлу будет D:/Mysitephp/php/setings.php, а его содержимое приведено ниже.

      # папка с html документами
      $doctemplates = "templates";
      # полный путь до директории скрипта
      $turl="http://mysitephp.ru";
      # база с данными
      $rubric1_menu = "data/rubric1.dat";
      ?>

      Как работает php скрипт формирования меню? Сначала в переменную $menu с помощью функции file() помещается содержимое текстового файла rubric1.dat. Затем функция count() подсчитывает количество строк в текстовом файле и функциями list() и explode() в цикле разворачивается само меню, где методом склеивания строк (операция точка . ) формируются стороки ссылок с их названиями и титлами, которое затем помещается в переменную $rubric1. Далее скрипт шаблонизатора, куда скрипт меню подключен функцией include() , перемещает содержимое переменной $rubric1 в нужное место сайта с помощью уже описанной ранее функции repl () .

      Такое меню пока работать не будет, поскольку в нем есть только сами ссылки со всеми необходимыми атрибутами, но нет, скрипта, который-бы обеспечил переход по этим ссылкам и открытие страниц сайта, которые будут соответствать этим ссылкам. Этим php скриптом мы займемся далее.

      Далее можно проект обновленный скриптом формирования меню. Скачать обновленный проект можно также на странице, которая откроется после оформления и активизации бесплатной подписки на панели справа. Адрес страницы необходимо сохранить. Именно на этой странице в дальнейшем будут появляться ссылки на скачивание обновлений проекта, различных полезных скриптов, программ, уроков и видеоуроков по схемотехнике, программированию и сайтостроению для новичков .

      Скачанный обновленный новыми скриптами проект php сайта теперь можно сравнить с тем, что получилось в результате выше описанных действий. Далее, дабы исключить разночтения полезно будет полностью заменить проект на скачанный, выполнить операцию , запустить сервер Denwer, набрать в окне браузера mysitephp.ru и просмотреть, что из этого получилось. В левой верхней части шаблона должно развернуться меню первого раздела, как показано на картинке ниже.

      Перейти и растаять в своей любимой социалке

  •