Как сделать меню для сайта на php

Создание меню навигации для сайта

Автор: Александр Побединский

Для того, чтобы было удобно перемещаться по сайту нужна навигация, которую я сделал использовав скрипты HTML и CSS. В результате моей работы, вы можете видеть 2 типа меню (вертикальное и горизонтальное). А теперь, постараюсь рассказать о тех задачах, которые, как мне кажется, должно выполнять меню для сайта:

  • Удобность в использовании;
  • Должна быть создана навигация по всем разделам сайта;
  • На каждой странице сайта должен быть выход на главную страницу;
  • Переход на любую страницу сайта максимум в 3 клика.

Здесь я постараюсь максимально изложить материал по созданию меню, приготовьтесь, у многих могут возникнуть сложности, у меня по крайней мере они возникали. И так начнем!

Первым делом, я поведаю вам о том, как сделать горизонтальное меню навигации. Сначала пишем скрипт в таблице стилей:

#navigation { width: 560px; height: 50px; margin: 0; padding: 0; background-image: url(img/gor_menu.jpg); background-repeat: no-repeat; background-position:center; } #navigation ul { list-style: none; margin: 0; padding: 0; } #navigation ul li { display: inline; margin: 0px; } #navigation ul li a { height:28px; display: block; float: left; color: #333333; text-decoration: none; font-family: Arial; font-size: 12px; font-weight: bold; background-image: url(img/menu_separatorline.jpg); background-repeat: no-repeat; background-position: right center; padding-top: 17px; padding-right: 15px; padding-bottom: 0; padding-left: 15px; } #navigation ul li a:hover { color:#FFF; background-image: url(img/button_hover.jpg); background-repeat: repeat-x; background-position: left top; } #navigation ul li#active a { background-image: url(img/button_hover.jpg); background-repeat: repeat-x; background-position: left top; }

Не пугайтесь ничего страшного в этом коде нет. Чтобы вам было понятней напишу-ка я сразу HTML-код для данного меню:

  • Главная
  • О сайте
  • Зачем нужен сайт?
  • От автора
  • Контакты
  • Форум

Как видите, мы имеем дело со списком, который без таблицы стилей ничего путного из себя не представляет. Оператор div вызывает переменные из внешней таблицы стилей CSS, далее наш список преображается и превращается в симпатичное на мой взгляд горизонтальное меню.

Дальше, чтобы вы лучше разобрались в данной теме, я вам расскажу о создании вертикального меню. Для начала сделаем каркас. Он будет иметь следующий вид:

  • Введение
  • Создание каркаса сайта
  • Создание меню сайта
  • Наполнение сайта
  • Использование PHP блоков
  • Создание базы данных
  • Выбор хостинга
  • Экспорт сайта на хостинг

Теперь нужно немного разъяснить, что к чему относится, дальше я думаю вы сами со всем разберетесь:

… — содержит всю структуру меню. В него же будет вставляться верхнее изображение, которое я подготовил заранее в Photoshop;

… — тело меню, содержит неупорядоченный список. В него будет вставляться изображение, которое будет повторяться по вертикали и создавать фон. Может быть, я выбрал слишком яркие тона, но на мой взгляд, они не режут глаз;

— содержит каркас самого меню;

  • Создание меню сайта
  • — это одна из позиций, где в a href=»#» нужно будет вставить необходимую ссылку;

    — содержит нижнюю часть.

    А вот такой, собственно, будет скрипт в нашей таблице стилей CSS:

    div#menu { width:144px; background:url(img/menu_1.jpg) top no-repeat; padding-top:40px; } div#menubody { background:url(img/menu_2.jpg) repeat-y; padding-left:15px; } div#menubottom { height:16px; background:url(img/menu_4.jpg) bottom no-repeat; } ul#menulist { width:100px; list-style-type:none; } ul#menulist li { height:32px; background:url(img/menu_3.gif) bottom repeat-x; } ul#menulist a { width:100px; height:25px; border-left:#75c5de 10px solid; font:bold 10px Verdana, Arial, sans-serif; color:#ffffff; text-decoration:none; padding:5px 0 0 5px; display:block !important; display:inline-block; } ul#menulist a:hover { background:url(img/menu_5.jpg) left repeat-y ; color:#000 } ul#menulist #active a { background: url(img/menu_5.jpg) left repeat-y; }

    Думаю, что вам не стоит объяснять код CSS. Если что то не понятно вы можете всегда спросить.

    Источник: http://www.sdcvoy.ru/etapy-sozdaniya-sajta/sozdanie-menyu-sajta/

    Создание меню для сайта на php

    Если вас интересует ответ на вопрос как создать меню сайта, то вы пришли по верному адресу.

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

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

    Урок 3. Меню на php для сайта делаем динамичным — чайникам

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

    Создадим для примера три страницы и назовем их Раздел 1, Раздел 2, Раздел 3

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

    Приступим к созданию сайта на php.

    1. Выделим блоки header, logo, menu, footer в отдельные файлы c расширением php или html

    header.html

    logo.html

    menu.html

    footer.html

    Добавим файл с этим текстом, чтобы видеть его на всех страницах. Назовем его text.html

    Примечание. С этого момента дальнейшие записи буду вести непосредственно в файле text.html

    2. Создадим шаблон для нашего сайта на php

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

    3. Теперь файл template.html нам не нужен

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

    4. Нашим шаблоном является файл template.php

    В него мы сейчас вставим с помощью команды include все элементы сайта.

    5. Создадим три странички, как собирались изначально

    Раздел 1, назовем 1.php

    Раздел 2, назовем 2.php

    Раздел 3, назовем 3.php

    Для этого можно воспользоваться простейшей командой сохранить как…

    Для самых маленьких поясню: открываем файл template.php, затем нажимаем сохранить как… и сохраняем под названием 1.php, повторяем процедуру и последовательно сохраним страницы сайта 2.php, 3.php

    У нас получилось 3 страницы с одинаковым дизайном. Достаточно вставлять вместо файла text.html другой, дополнять разными картинками или какими-либо html кодами, скриптами и содержимое каждой страницы будет уникальным.

    Внимание!

    Обратите внимание

    Если не будет создан файл index.php для главной страницы, то в браузере, набрав адрес сайта мы не увидим сам сайт, а всего лишь структуру директории (перечень папок).

    Можете посмотреть в денвере и убедиться. Исправим ситуацию — создадим файл index.php и назовем долго не мудрствуя Главная. Заодно создадим файл text-home.html и с помощью команды include вставим на только что созданную главную страницу сайта.

    6. Как просмотреть сайт на php?

    Что получилось — так просто не увидим. Это уже не шаблон с расширением html.

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

    Вот теперь порядок. Набрала адрес сайта и увидела все только что созданное в нормальном виде с дизайном.

    Теперь возьмемся за php меню сайта

    1. Откроем файл menu.html и превратим раздел1, 2 и 3 в ссылки по сайту. Ссылки в php создаются по-разному

    Наша задача — научиться чувствовать сайт, созданный на php. Поэтому ссылки будем делать, как на обычном статичном сайте Раздел 1 и т.д.

    Мне эта процедура создания ссылок безумно нравится в Macromedia Dreamweaver. Успевай жать ОК и пить кофе.

    2. Как сделать ссылку в меню неактивной, если посетитель находится на данной странице

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

    Если вы выполнили все шаги строго по пунктам, то видите, что у нас все ссылки в меню активны постоянно. Как это исправить?

    Для начала вспомним определение что такое Условные операторы

    – это когда какое-то действие выполняется или не выполняется в зависимости от условий.

    Выполним следующие действия:

    • Нам понадобятся переменные и один условный оператор:
    • Условие мы придумали, но чтобы проверить переменнуюнужно её задать.

    Для этого на всех страницах разместим такие блоки кода:

    Как видно для каждой страницы свой код.

    Итак, наши практические шаги по созданию php меню будут следующие:

    1) Открываем файл index.php

    и вставляем код

    до места вставки кода, выводящего само меню сайта

    2) Открываем файл menu.html и вставляем код с условием вместо простой html ссылки на главную страницу.

    Смотрим в браузере и любуемся! Если зайдем на главную страницу, то ссылка перестала быть активной!

    3) Повторяем пункт 1 и 2 со страницами 1.php, 2.php, 3.php

    Повторение 1:

    1) Открываем файл 1.php и вставляем до кода, выводящего меню блок с заданной переменной

    2) Открываем файл menu.html и вставляем код с условием вместо простой ссылки Раздел 1, внеся следующие изменения:

    Чудо повторилось! Теперь, если мы находимся на странице Раздел 1, ссылка в меню не активна.

    Повторенье — мать ученья! Или для тех, кто в танке! Еще раз

    Повторенье 2

    1) Открываем файл 2.php и вставляем код.

    2) Снова откроем файл menu.html и вставляем код с условием

    теперь вместо ссылки Раздел 2, внеся следующие изменения:

    Повторенье 3

    1) Открываем файл 3.php и задаем переменную.

    2) В файл menu.html вставляем код с условием вместо ссылки Раздел 3, изменения такие:

    Итог: мы вместо ссылок в меню такого вида

    Главная

    Раздел 1<\p>

    Раздел 2

    Раздел 3

    получили динамические ссылки php в меню навигации по сайту.

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

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

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

    Если же вы готовы к серьезному изучению php, то лучше видео курса от Попова найти сложно. У него огромный опыт и хороший слог.

    ]]>]]>

    Источник: http://www.master-live.ru/php-menu.html

    Создаем динамически формируемое меню

    Здравствуйте уважаемый посетитель!

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

    Однако, во всех HTML-страницах остались еще однотипные фрагменты, которые занимают довольно значительный объем кода. Имеются ввиду части, описывающие главное меню и меню футера.

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

  • списка присваивается класс «activ» или «ftr-activ», необходимый для визуального отображения активной кнопки элементов навигации.

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

    Читайте также:  Уроки css

    Следует отметить, что после выполнения этих преобразований, кроме сокращения HTML-кода мы получим еще очень серьезное преимущество.

    Важно

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

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

    • Создаем функцию вывода всех строк заданной таблицы
    • Формируем и подключаем файл 'start.php'
    • Формируем файлы главного меню и меню футера
    • Проверка работы сайта при динамически формируемом меню
    • Исходные файлы сайта

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

    По существу, отличие между этими вариантами будет заключаться лишь только в запросе SQL.

    Теперь, вместо заданных условий выборки строк («SELECT * FROM `url` WHERE `url`='poluchity-skidku' OR `url`='statistika-ugonov' OR `url`='kontakti' ORDER BY `id` DESC»), в новом запросе каких-либо условий указываться не будет, в связи с чем он примет более упрощенный вид: «SELECT * FROM `url`».

      Рис.1 Функция вывода всех строк таблицы MySQL

      Здесь можно лишь добавить, что для того, чтобы данная функция была универсальна и могла бы использоваться для различных таблиц, вместо конкретного имени таблицы «url» в качестве параметра функции включена переменная «$table». Эта же переменная используется и в запросе SQL для обозначения нужной таблицы.

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

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

      Ранее в статье Подключаем базу данных MySQL с использованием процедурного и объектно-ориентированного стиля MySQLi мы создали два файла — «connect.phρ» и «functions.phρ», разместив их в папке «mysql». При этом, «connect.

      phρ» предназначен для обеспечения соединения с БД, а «functions.

      phρ» для размещения различных функций для работы с таблицами базы данных (созданная в предыдущем разделе функция также, как и все остальные, относящиеся к работе с БД MySQL, должна быть добавлена в файл «functions.phρ»).

      И теперь, создадим отдельный файл под именем «start.ρhρ», и подключим в нем с помощью языковой инструкции «require_once» вышеупомянутые «connect.ρhρ» и «functions.ρhρ»», как изображено на рис.2.

        Рис.2 Формирование файла «start.ρhρ»

        А, затем подключив «start.ρhρ» в начале каждой HTML-страницы, мы обеспечим выполнение всех возможных операций с базой данных MySQL, необходимых при отработке запросов пользователей. А сделать совсем несложно, использовав ту же самую инструкцию, как показано ниже.

          Рис.3 Подключение файла «start.ρhρ к страницам сайта»

          Для нашего сайта следует добавить этот фрагмент кода во все имеющиеся на данный момент страницы, соответствующие следующим файлам: «index.ρhp», «article.ρhp», «action.ρhp», «righting.ρhp» и «contacts.ρhp».

          Следует отметить, что такое решения с использованием отдельного файла «start.phρ» выгодно отличается от варианта, в котором к страницам подключались бы отдельные «connect.phρ» и «functions.phρ». А, связано это с тем, при необходимости в дальнейшем подключения других элементов не потребует править код во всех страницах, а достаточно будет это сделать только в файле «start.phρ».

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

          Совет

          Для того, чтобы создать блоки, в которых будут формироваться элементы навигации обратимся с начала к соответствующим фрагментам HTML-кода страниц сайта. Ниже показан фрагмент меню главной страницы в файле «index.ρhp».

            • Главная
            • Статистика угонов
            • Способы маркировки
            • Запись на маркировку
            • Контакты

          Рис.4 Фрагмент HTML-кода главного меню в файле «index.ρhp»

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

        1. списка присвоен класс «activ». Остальные теги
        2. никаких дополнительных атрибутов не имеют.

          https://www.youtube.com/watch?v=S2nd1T1NIJE

          Аналогично и для других страниц. Отличие будет состоять лишь только в том, что класс «activ» будет присваиваться другим тегам

        3. , соответствующим текущей страницы.

          Если внимательно посмотреть на приведенный HTML-код меню, то можно заметить, что он включает в себя всю необходимую информацию, которая имеется в созданной ранее таблице MySQL под именем «url», а именно.

          • порядковый номер — поле «id»;
          • ссылки на файл сайта — поле «file»;
          • наименование пункта меню — поле «title».

          Таким образом, используя базу данных MySQL можно составить PHP-код, который будет извлекать из таблицы «url» все записи и заносить в теги

        4. соответствующие данные.

          А для того, чтобы иметь возможность поочередно выполнять необходимые преобразования с тегами

        5. воспользуемся оператором цикла «for».

          Ниже показан вариант PHP-кода, размещенного во вновь созданном файле «menu.php» папки «blocks», который используя содержимое таблицы «url» БД MySQL обеспечит формирование главного меню для любой страницы сайта.

            Рис.5 Формирование главного меню в файле «menu.php»

            Как видно, здесь при вызове ранее созданной функции getAll с параметром «url» (поз.4) возвращается двумерный массив $data_bd, включающий все записи таблицы «url». Причем, одним из ключей массива будет порядковый номер строки, а второй — названия полей таблицы.

            Далее, с помощью оператора цикла «for» (поз.5), поочередно, начиная с первой строки и до последней, будет извлекаться содержимое полей «id», «title» и «file» (поз. 6÷8). А затем через соответствующие переменные $id, $title и $file происходить формирование тегов

          1. (поз. 9÷11).

            При этом, если значение $id будет равно значению переменной $current_url, отражающей текущий URL, то в тег

          2. будет добавлен класс «activ». В остальных случаях никаких атрибутов добавляться не будет.

            Следует отметить, что здесь для получения текущего URL, переменной $current_url присваивается значение, полученное из элемента «$_SERVER['REQUEST_URI']» суперглобального массива «$_SERVER» (поз.3). В данном случае, это будет адрес текущей страницы, например «/index.ρhp».

            А, для того, чтобы получить URL без слэша «/», с помощью строковой функции substr возвращается подстрока без первого символа. В итоге, переменная $current_url будет принимать вид типа «index.ρhp», соответствующий значениям поля «file» таблицы «url».

            Таким образом, мы создали файл «menu.ρhp», который будет формировать меню во всех страницах сайта. Осталось его только подключить.

            А, сделать это совсем несложно, используя ту же языковую инструкцию, что использовалась и в предыдущих случаях, «require_once». Ниже, на примере файла «index.php» показан фрагмент кода, где вместо множества тегов

          3. , изображенных на рис.4, добавлена всего лишь одна инструкция PHP.

            Рис.6 Подключение файла «menu.ρhp» на примере файла «index.php»

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

            Ниже показан PHP-код вновь созданного файла «ftr_menu.ρhp», где отличие от предыдущего варианта заключается лишь в том, что активному пункту присваивается класс не «activ», а «ftr-activ».

              Рис.7 Формирование меню футера

              Аналогично выполняется и подключение этого файла к HTML-страницам.

              Рис.8 Подключение файла «ftr_menu.ρhp» на примере «index.ρhp»

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

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

              Рис.9 Скриншот проверки работы сайта с динамически формируемом меню

              Разница заключается лишь только в том, что теперь все это формируется не из постоянных фрагментов HTML-кода страниц, а динамически, с использованием вновь созданных файлов «menu.ρhp» и «ftr_menu.ρhp».

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

              Например, в случае необходимости изменения порядка или добавления, либо удаления каких-либо пунктов меню, достаточно будет всего лишь внести соответствующие изменения в таблицу базы данных «url» без необходимости какого-либо вмешательства в HTML-код.

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

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

              Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

              • Файлы каталога www
              • Таблицы базы данных MySQL

              Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

              Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

              Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

              С уважением, Николай Гришин

              Источник: https://rabota-vinete.ru/sait/dinamicheskiy/dinamicheski-formiruemoe-menu.html

              Многоуровневого меню на php и mySQL

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

              Скрипт позволяет создавать многоуровневое меню.

              Вложенность неограниченна.

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

              Добавлен административный интерфейс, который позволяет работать с меню полностью.

              Требования: php, mySQL

              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 ДАМП ТАБЛИЦЫ ДЛЯ МЕНЮ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 = '

              • Главная
                    ';$out .= sel_cat_r($par);$out .= '

                ';}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 .= »
                «.'

                • '.stripslashes($rez['name']).'';$out .= sel_cat_r($rez['id']);$out .= ' '.»
                  «;$lev—;}return $out;}//ВЫЗОВ ФУНКЦИИecho sel_cat(0);/* РЕЗУЛЬТАТ РАБОТЫ

                  • Главная
                  • О нас
                    • Контакты
                    • Схема проезда
                  • Продукция
                    • Розница
                    • Оптом

                  */

              Скачать скрипт: «Многоуровневое меню»

              Источник: http://web-make.pp.ua/byblyoteka/mnogourovnevogo-menyu-na-php-y-mysql/

              Как с помощью PHP вывести многоуровневое выпадающее меню или древовидный иерархический раскрывающийся список

              7 июня, 2014

              HTML, PHP

              Чего ожидать от статьи:

              Пример вывода древовидного списка

              Древовидный список в .

              Алгоритм и для вывода многоуровневого меню (главного меню сайта) и для древовидного списка (меню категорий и т.п.) одинаков. В обоих случаях цель — создать многоуровневый список на HTML.

              Пример такого списка, а так же его оформление в древовидный раскрывающийся список вы можете просмотреть в статье Простой древовидный список без картинок на любом фоне, только HTML CSS и раскрывающийся древовидный список на jQuery с „плюсиками“, а в этой статье — про преобразование и вывод.

              Обычно иерархию хранят в БД, останавливаться на этом не будем… Отметим, что при выборе данных мы получаем список отсортированный не в желаемом порядке, а так же часто неизвестен уровень вложенности каждого элемента (зависит от способа хранения иерархичных данных в реляционных БД…).

              Пример массива с id, pid (parant id)

              Представлю данные сразу в PHP массиве. Каждый элемент нашего иерархического списка содержит информацию о своем предке (родителе) — „pid“. Ну и остальное…

              $array = array(); $array[] = array('id'=>1, 'pid'=>0, 'header'=>'A'); $array[] = array('id'=>2, 'pid'=>0, 'header'=>'B'); $array[] = array('id'=>3, 'pid'=>0, 'header'=>'C'); $array[] = array('id'=>4, 'pid'=>0, 'header'=>'D'); $array[] = array('id'=>5, 'pid'=>1, 'header'=>'E'); $array[] = array('id'=>6, 'pid'=>1, 'header'=>'F'); $array[] = array('id'=>7, 'pid'=>3, 'header'=>'G'); $array[] = array('id'=>8, 'pid'=>4, 'header'=>'H'); $array[] = array('id'=>9, 'pid'=>5, 'header'=>'K'); $array[] = array('id'=>10, 'pid'=>5, 'header'=>'L'); $array[] = array('id'=>11, 'pid'=>10, 'header'=>'M'); $array[] = array('id'=>12, 'pid'=>9, 'header'=>'N');

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

              Представленный метод основан на рекурсивном обходе массива данных без использования рекурсии в классическом смысле (обращения функции к самой себе). К слову: в методе вообще не будет пользовательских функций.

              Скрипт PHP преобразования массива перед выводом

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

              // Преобразование $result = array(); $pid[$level] = $level = 0; while ($level >= 0) { if ( $e = each($array) ) { if ($e[1]['pid'] === $pid[$level]) { $e[1]['level'] = $level; $result[] = $e[1]; unset($array[$e[0]]); foreach ($t = $array as $val) { if ( $val['pid'] === $e[1]['id'] ) { $pid[++$level] = $e[1]['id']; reset($array); break; } } } } else { $level—; reset($array); } }

              Этот код „преобразования“ создаёт новый массив $result в котором подготовлены данные (отсортированы в нужном порядке и добавлен уровень каждого элемента) для вывода иерархического многоуровнего списка.

              Вывод с учетом уровней

              Осталось только вывести с помощью линейного (foreach) перебора, учтя только уровень вложенности.

              // Вывод $echo = «

                «; foreach ($result as $key => $val) { $replace = array(); foreach ($val as $key2 => $val2 ) { $replace[«??$key2??»] = $val2; } $echo .= str_replace(array_keys($replace),$replace,'

              • ??header??'); if ( isset($result[$key+1]) ) { if ($result[$key+1]['level']>$val['level']) { $echo .= «
                  «; } if ($result[$key+1]['level']==$val['level']) { $echo .= «

                  «; } if ($result[$key+1]['level']8, 'pid'=>4, 'header'=>'H'); $array[] = array('id'=>1, 'pid'=>0, 'header'=>'A'); $array[] = array('id'=>11, 'pid'=>10, 'header'=>'M'); $array[] = array('id'=>10, 'pid'=>5, 'header'=>'L'); $array[] = array('id'=>9, 'pid'=>5, 'header'=>'K'); $array[] = array('id'=>4, 'pid'=>0, 'header'=>'D'); $array[] = array('id'=>12, 'pid'=>9, 'header'=>'N'); $array[] = array('id'=>5, 'pid'=>1, 'header'=>'E'); $array[] = array('id'=>7, 'pid'=>3, 'header'=>'G'); $array[] = array('id'=>3, 'pid'=>0, 'header'=>'C'); $array[] = array('id'=>2, 'pid'=>0, 'header'=>'B'); $array[] = array('id'=>6, 'pid'=>1, 'header'=>'F'); // Преобразование $result = array(); // Пустой массив для результата преобразования $pid[$level] = $level = 0; // Начальные условия: уровень вложенности — 0, родитель у нулевой вложенности — 0 // Пока не будут перебраны все элементы уровень не будет уменьшаться… while ($level >= 0) { // Если взяли непустой элемент if ( $e = each($array) ) { // Да ещё и подходящий к нашему текущему родителю if ($e[1]['pid'] === $pid[$level]) { // Сохраняем в результирующий массив, запомнив уровень элемента $e[1]['level'] = $level; $result[] = $e[1]; // Удаляем из исходного массива, чтобы повторно не перебирать его и не возиться с ним. unset($array[$e[0]]); // А вдруг, у нашего нашедшегося элемента есть дети? Проверим: foreach ($t = $array as $val) { // Если вдруг есть ребенок if ( $val['pid'] === $e[1]['id'] ) { // Определим нового родителя, перейдём на уровень глубже // Сначала разберемся с детьми, а братьями и сестрами займемся после детей $pid[++$level] = $e[1]['id']; // И начнем потрошить исходный массив с самого начала, ища детей reset($array); break; } } } } // Если элементы кончились — значит мы закончили обходить текущий уровень else { $level—; reset($array); } } // Вывод $echo = «

                    «; // открываем основной список нулевой вложенности // Пройдёмся линейно, массив уже упорядочен и уровни известны foreach ($result as $key => $val) { // Я привык делать замены в шаблоне именно так $replace = array(); // Создать массив замены foreach ($val as $key2 => $val2 ) { // Ключи массива — заменяемые теги (??header??), а значения — то, чем заменяем. $replace[«??$key2??»] = $val2; } // Выводим элемент $echo .= str_replace(array_keys($replace),$replace,'

                  • #??id??, ??header??, my parent id: ??pid??'); // А дальше вопрос: следующий элемент является братом (последует так же — в
                  • ) или ребенком (вставляем вложенный список)? // Ответ получим узнав уровень следующего элемента (Если он есть вообще!). if ( isset($result[$key+1]) ) { // Следующий элемент в древовидном списке — глубже (уровень элемента key+1 больше уровня элемента key) if ($result[$key+1]['level']>$val['level']) { $echo .= «
                      «; } // Уровни равны — брат if ($result[$key+1]['level']==$val['level']) { $echo .= «

                      «; } // Уровень меньше — брат отца или брат деда или прадеда! =) if ($result[$key+1]['level']

                    Источник: http://www.zlatov.net/publication/vyvod-mnogourovnego-menyu-i-drevovidnogo-spiska-na-php.html

                    Пишем редактор меню для нашей CMS

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

                    Цель

                    • В нашей пользовательской части блога выборка пунктов меню производится по умолчанию, то есть по id. Необходимо добавить новую колонку в которой будет производится нумерация порядка вывода пунктов
                    • На нашей главной страницы админки нет кнопки на редактор ( правда самого редактора тоже пока нет ) поэтому нам предстоит отредактировать главную страницу
                    • Необходимо реализовать список всех пунктов меню. Значит нам потребуется шаблон, и код php для вывода такого списка
                    • Создать два шаблона с формой, для редактирования пункта меню и добавления пункта в БД. Само собой нужны будут php обработчики для этих форм
                    • Необходимо ввести систему сортировки пунктов меню в админ панели. В эту систему входит выборка пунктов по определенной колонки БД.
                    • Реализовать удаление пункта меню.
                    • Реализовать кнопочки для воздействия на позицию нашего пункта меню. Раз есть кнопочки то должен быть и обработчик, который будет менять позиции в БД

                    Подготовка

                    Вот как выглядит главная страница админки

                    Вот как выглядит список меню

                    Как видите нам необходимо несколько графических файлов. Вот папка с нужной нам графикой. Изображения помещаются в папку img в каталоге admin

                    Изменяем выборку меню в пользовательской части

                    Для начала нам необходимо добавить новую колонку в таблицу menu нашей БД. Так же необходимо пронумеровать строки этой колонки от 1 до N

                    • Заходим в «Структуры» таблицы menu
                    • Выбираем «добавить после href» жмем ОК
                    • Заполняем поля, жмем «Сохранить»
                    • Далее пронумеруйте строки от 1 до N ( В моем случае от 1 до 3 )

                    Теперь отредактируем функцию menu() в модуле menu.php, что находится в пользовательской части нашего проекта

                    Отредактируем строку sql запроса так

                    $result_index = mysql_query(«SELECT * FROM menu ORDER BY position»);//Выводим из базы данных все пункты меню

                    Теперь наши пункты меню будут выводится в том порядке в котором нам необходимо

                    Редактируем главную страницу админки

                    Для этого нам необходимо открыть шаблон меню админки — menu.html и добавить новую ссылку

                         

                    На главной страницы должна появится новая ссылка

                    Реализуем в админ панели список пунктов меню

                    Нам понадобится шаблон, который чем то схож с шаблоном вывода списка постов, и php код. Начнем с шаблона

                    [_while]

                    [_while]

                    [_name] [_up][_up] [_down][_down]

                    В шаблоне присутствуют все необходимые нам ссылки. Ссылки в свою очередь берутся из головы. Хочу пояснить насчет код слов [_up] и [_down]. Эти код слова будут помогать нам исключать кусочки html кода из шаблона если это вдруг понадобится.

                    А это нам понадобится! Так как в нашем редакторе меню будет возможность двигать пункты вверх или вниз, наступит такая ситуация когда один из пунктов будет находится в самом вверху, то есть двигать на верх его уже нельзя! А значит кнопочку необходимо удалить из шаблона, вот тут на помощь и придут наши код слова.

                    Я назвал этот шаблон allmenu.html и помести в папку с шаблонами для админ панели.

                    Теперь пришло время создать модуль который выведет нам этот список на экран

                    function allmenu()//Функция вывода списка меню{$sm_read = file(«templates/allmenu.html»);//…подключаем шаблон$sm_read = implode(«»,$sm_read);//функция file() возвращаем массив, поэтому склеиваем егоpreg_match(«/[_while](.*?)[_while]/s»,$sm_read,$tamp_while);//Находим в шаблоне тут часть, которую будет ду вайлить$result_index = mysql_query(«SELECT * FROM menu ORDER BY position»);//Выводим из базы данных пункты меню$myrow_index = mysql_fetch_array($result_index);$col = mysql_num_rows($result_index);//Узнаем общее количество пунктов в базе данныхdo{ $copy_tamp = $tamp_while[1];//Сохраняем ту часть которая будет повторяться в отдельную переменную //Если обрабатываем первый пункт, то запрещаем вывод кнопки «поднять пункт вверх» if($myrow_index[position] == 1)$copy_tamp = preg_replace(«/[_up].*?[_up]/s»,» «,$copy_tamp); else $copy_tamp = str_replace(«[_up]»,»»,$copy_tamp);//Если пункт не первый, то удаляем код слово из шаблона //Если обрабатываем последний пункт, то запрещаем вывод кнопки «опустить пункт вниз» if($myrow_index[position] == $col)$copy_tamp = preg_replace(«/[_down].*?[_down]/s»,» «,$copy_tamp); else $copy_tamp = str_replace(«[_down]»,»»,$copy_tamp);//Если пункт не последний, то удаляем код слово из шаблона //Делаем замены код-слов $copy_tamp = str_replace(«[_name]»,$myrow_index[name],$copy_tamp);//Название пункта $copy_tamp = str_replace(«[_id]»,$myrow_index[id],$copy_tamp);//ID пункта $list .= $copy_tamp;//Объединяем результат в одну переменную}while($myrow_index = mysql_fetch_array($result_index));$sm_read = preg_replace(«/[_while].*?[_while]/s»,$list,$sm_read);//Вставляем в щаблон список пунктовreturn $sm_read;//Выводим с генерированный html код

                    Обратите внимание

                    }

                    Весь код за комментирован, я думаю тут ничего сложного для Вас нет! Логика тут довольно проста.

                    • Вытаскиваем все пункты меню.
                    • После мы копируем из шаблона кусочек кода который будет повторятся.
                    • Проверяем пункт, первый он или последний, если одно из условие верно, то удаляем кнопочку из скопированного кусочка шаблона
                    • Заменяем в этой копии код слова на данные из БД.
                    • На по следок все это соединяется и выводится на экран

                    Эту функцию я сохранил в новом файле, назвал файл eddmenu.php, поместил его в модули админ панели.

                    Теперь что бы увидеть результат на экране, мы должны подключить модуль к нашему основному файлу index.php. Поместите этот кусочек кода

                    //РЕДАКТОР МЕНЮif($page == «all_menu»){include(«moduls/eddmenu.php»);if($page == «all_menu»)$txt = allmenu();}

                    //РЕДАКТОР МЕНЮ

                    перед строкой

                    include(«templates/index.html»);

                    Если на главной странице админ панели щелкнуть по кнопке «меню» то Вас перенесет вот на эту страницу

                    Реализуем добавление пункта

                    Для этого необходимо написать обработчик и шаблон. Начнем с шаблона

                    Ничего сложного обычная форма из двух полей и кнопки

                    Далее напишем php код для вывода нашей формы на экран. Для этого создадим функцию addmenu() в новом файле addmenu.php

                    function addmenu()//Функция вывода формы редактирования меню{ $sm_read = file(«templates/addmenu.html»);//…подключаем шаблон $sm_read = implode(«»,$sm_read);//функция file() возвращаем массив, поэтому склеиваем его return $sm_read;//Выводим с генерированный html код

                    Обратите внимание

                    }

                    Просто подключаем шаблон и выводим на экран. Далее реализуем подключение это модуля. Заходим в файл index.php и добавляем вот этот кусочек кода

                    //ДОБАВЛЯЕМ ПУНКТif($page == «add_menu»){include(«moduls/addmenu.php»);$txt = addmenu();}

                    //ДОБАВЛЯЕМ ПУНКТ

                    Сразу после подключения редактора меню. Кстати, значение переменной page я узнаю из ссылок которые брал из головы

                    Теперь давайте напишем обработчик для добавление пункта меню в БД

                    //ДОБАВЛЯЕМ ПУНКТ МЕНЮif(isset($_POST['addname_p']))$addname_p = $_POST['addname_p'];if(isset($_POST['addhref_p']))$addhref_p = $_POST['addhref_p'];if(isset($addname_p) AND isset($addhref_p)){ $result_index = mysql_query(«SELECT COUNT(*) FROM menu»);//Выводим из базы данных пункты меню $myrow_index = mysql_fetch_array($result_index); $col = $myrow_index[0];//Узнаем общее количество пунктов в базе данных $col++; $result_add_menu = mysql_query («INSERT INTO menu (name,href,position) VALUES ('$addname_p','$addhref_p','$col')»); header(«location: index.php?page=all_menu»);//Перенаправление exit;//на страницу пунктов меню}

                    //ДОБАВЛЯЕМ ПУНКТ МЕНЮ

                    Этот обработчик я поместил в модуль addmenu.php. Пункт по умолчанию займет самую последнюю позицию среди пунктов

                    Реализуем редактирование пункта

                    Для реализации редактора нам необходим шаблон и обработчик. Как всегда начну с шаблона

                    Форма редактирования и форма добавления выглядят одинаково! Разница лишь в атрибуте name, action и value у кнопки.

                    Теперь напишем функцию вывода этого шаблона на экран. Функция пишется в модуле eddmenu.php

                    function eddmenu($edd_menu)//Функция вывода формы редактирования меню{ $sm_read = file(«templates/eddmenu.html»);//…подключаем шаблон $sm_read = implode(«»,$sm_read);//функция file() возвращаем массив, поэтому склеиваем его $result_index = mysql_query(«SELECT name,href FROM menu WHERE id = '$edd_menu'»);//Выводим из базы данных пункт меню $myrow_index = mysql_fetch_array($result_index); $sm_read = str_replace(«[_name]»,$myrow_index[name],$sm_read);//Название пункта $sm_read = str_replace(«[_href]»,$myrow_index[href],$sm_read);//Ссылка пункта $sm_read = str_replace(«[_id]»,$edd_menu,$sm_read);//ID пункта return $sm_read;//Выводим с генерированный html код

                    Обратите внимание

                    }

                    Подключим новую возможность модуля eddmenu.php. Для этого идем в файл index.php и редактируем условие подключения этого модуля

                    //РЕДАКТОР МЕНЮif($page == «all_menu» || $page == «edd_menu»){include(«moduls/eddmenu.php»);if($page == «all_menu»)$txt = allmenu();if($page == «edd_menu»)$txt = eddmenu($edd_menu);}

                    //РЕДАКТОР МЕНЮ

                    Надеюсь тут все ясно.

                    Важно

                    Теперь создадим обработчик редактора добавляя вверху новые строки кода в файле eddmenu.php

                    //РЕДАКТИРУЕМ ПУНКТ МЕНЮif(isset($_POST['name_p']))$name_p = $_POST['name_p'];if(isset($_POST['href_p']))$href_p = $_POST['href_p'];if($_GET['edd_menu'])$edd_menu = $_GET['edd_menu'];if(isset($name_p) AND isset($href_p)){ $edd_punct = mysql_query («UPDATE menu SET name='$name_p',href='$href_p' WHERE id='$edd_menu'»); header(«location: index.php?page=all_menu»);//Перенаправление exit;//на страницу пунктов меню}

                    //РЕДАКТИРУЕМ ПУНКТ МЕНЮ

                    Тут тоже все простоУ меня все работает

                    Реализуем удаления пункта меню

                    Для это в модуле eddmenu.php после кода отвечающего за редактирование пункта вставить вот этот код

                    //УДАЛЕНИЕ ПУНКТА МЕНЮif($_GET['del_menu'])$del_menu = $_GET['del_menu'];if(isset($del_menu)){ $result_del_menu = mysql_query («DELETE FROM menu WHERE id='$del_menu'»);//удаляем пункт меню $res_delmenu = mysql_query(«SELECT id FROM menu ORDER BY position»);//Выводим из базы данных пункт меню сортируя их по колонке position $my_delmenu = mysql_fetch_array($res_delmenu); $new_pos_menu = 1; do { $edd_pos_menu = mysql_query («UPDATE menu SET position='$new_pos_menu' WHERE id='$my_delmenu[id]'»); $new_pos_menu++; } while($my_delmenu = mysql_fetch_array($res_delmenu)); header(«location: index.php?page=all_menu»);//Перенаправление exit;//на страницу пунктов меню }

                    //УДАЛЕНИЕ ПУНКТА МЕНЮ

                    В этом обработчике помимо просто удаление пункта из БД идет обновление позиций. Обновление реализуется простым циклом ду вайл, ничего сложного!

                    Реализуем изменения позиций пунктов меню

                    Необходимо вставить вот этот код

                    //ДВИГАЕМ ПУНКТ МЕНЮ ВВЕРХ/ВНИЗif($_GET['up_menu'])$up_menu = $_GET['up_menu'];if($_GET['down_menu'])$down_menu = $_GET['down_menu'];if(isset($up_menu) || isset($down_menu)){ if(isset($up_menu))//Если двигаем вверх { $info_menu = mysql_query(«SELECT position FROM menu WHERE id='$up_menu'»);//Вытаскиваем значение колонки position из строки где id = пункту который двигаем $myrow_info_menu = mysql_fetch_array($info_menu); $new_pos = $myrow_info_menu[position] — 1;//Изменяем значение позиции $nav_id = $up_menu;//Сохраняем id пункта который двигаем в отдельную переменную } if(isset($down_menu))//Если двигаем вниз { $info_menu = mysql_query(«SELECT position FROM menu WHERE id='$down_menu'»);//Вытаскиваем значение колонки position из строки где id = пункту который двигаем $myrow_info_menu = mysql_fetch_array($info_menu); $new_pos = $myrow_info_menu[position] + 1;//Изменяем значение позиции $nav_id = $down_menu;//Сохраняем id пункта который двигаем в отдельную переменную } $old_pos = $myrow_info_menu[position];//Заносим в отдельную переменную значение позиции двигаемого пункта //Напишу для Вас конкретный пример. Мы двигаем пункт с позиции 3 на позицию 2 //То есть мы двигаем пункт вверх. //После того как мы определили все переменные выше ( то есть рассчитали новые позиции и сохранили старые ) $new_pos_db = mysql_query («UPDATE menu SET position='$old_pos' WHERE position='$new_pos'»);//Заносим в пункт который сейчас на позиции 2 его новую позицию, то есть 3 $old_pos_db = mysql_query («UPDATE menu SET position='$new_pos' WHERE id='$nav_id'»);//Заносим в пункт который мы двигаем его новую позицию, то есть 2 header(«location: index.php?page=all_menu»);//Перенаправление exit;//на страницу пунктов меню }

                    //ДВИГАЕМ ПУНКТ МЕНЮ ВВЕРХ/ВНИЗ

                    сразу после обработчика удаление пунктов. Я за комментировал строчки, и даже написал пример, но, все же поясню все еще раз

                    Давайте на конкретном примере рассмотрим работу нашего кода. Нам необходимо пункт «Об Авторе» сдвинуть вверх

                    После нажатие на галочку вверх, наш скрипт начинает обработку.

                    • Для начала он рассчитает новую позицию для пункта который нам необходимо сдвинуть вверх.
                    • Потом он сохранит id двигаемого пункта
                    • И сохранит позицию в которой находится в данный момент наш пункт

                    Далее код, по переменной $new_pos, то есть по новой позиции нашего пункта, находит строчку в БД и редактирует ей колонку position вставляя туда значение переменной $old_pos, то есть позицию нашего двигаемого пункта

                    После этого скрипт по переменной $nav_id находит двигаемый пункт в БД и заменяет в нем position на значение переменной $new_pos, то есть назначает пункту новую позицию

                    На этом действие скрипта заканчивается

                    Заключение

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

                    Если есть какие вопросы, или просто отзывы, критика, то оставляйте комментарии, с удовольствием почитаю!

                    Удачи Вам, на сегодня у меня все!

                    Исходник

                    Источник: http://rio-shaman.ru/razrabotka-cms/razrabotka-adminki/redaktor-menju-dlja-cms/

                    Создание простого меню для сайта на HTML и CSS

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

                    Данный урок был записан по просьбе одного из наших постоянных читателей, поэтому другие темы и не рассматривались. После чего я, вместе со своим напарником по разработке, Евгением Кузьменко, подготовил для Вас выпадающее меню для сайта.

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

                    Кстати, по поводу создания меню, также рассказывали и в других уроках, например таких как: Создание меню в Битрикс, Делаем меню как в nexus или например, как Адаптивное меню SlickNav, поэтому можете рассмотреть и их, вдруг что-то окажется полезным и пригодится!

                    Первый шаг. HTML.

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

                    Далее нам нужно создать обычный маркированный список ul li, а также задать первому ul идентификатор nav, чтобы мы могли работать через него, обращаясь к стилям css. Делается это очень просто, не знаю, что тут можно описать, поэтому скидываю сразу структуру, как в демо.

                    • Ссылка
                      • Ссылка
                      • Ссылка
                      • Ссылка
                      • Ссылка
                    • Ссылка
                      • Ссылка
                      • Ссылка
                      • Ссылка
                      • Ссылка
                    • Ссылка
                      • Ссылка
                      • Ссылка
                      • Ссылка
                      • Ссылка
                    • Ссылка
                      • Ссылка
                      • Ссылка
                      • Ссылка
                      • Ссылка
                    • Ссылка
                      • Ссылка
                      • Ссылка
                      • Ссылка
                      • Ссылка

                    Второй шаг. CSS.

                    Переходим к стилям CSS и первым делом, мы должны установить тот шрифт, который прописали вначале данного урока, а именно Open Sans.

                    После того, как наш шрифт успешно прописан, переходим уже к самому каркасу нашего маркированного списка, которому зададим определенные свойства, а также расположение и позиционирование элементов.

                    Заметим, что мы создаем горизонтальное меню, поэтому применяем свойство float left. 

                    #nav{ font-family: 'Open Sans', arial; } #nav li{ float:left; /* все ссылки идут слева на право */ position:relative; list-style:none; /* убираем точки */ background:#ff3131; width:190px; }

                    Совет

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

                    Далее, чтобы при наведении на выпадающее меню основная ссылка была выделена, задаем идентификатор active, а также не забываем про сам цвет при наведении всех элементов данного меню.

                    Так как у нас имеется выпадающее меню, нам соответственно нужно его будет скрыть. Для этого прописываем свойство visible и указываем ему параметр hidden, а также не забываем про абсолютное позиционирование данного элемента.

                    #nav a{ text-decoration:none; display:block; /* делаем блочным элементов тег «a» */ padding:35px 65px; color:#ffffff; } #active a, #nav li:hover > a{ background:#b32424; } #nav ul { visibility:hidden; /* скрываем выпадающее меню */ padding:0; position:absolute; }

                    Теперь после того, как наше меню успешно скрыто, нам нужно сделать выпадающее меню. Это реализовать достаточно просто, нужно задать элементу меню с идентификатором nav свойство visible.

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

                    Не забываем указать свойство left 0 при ховере, ведь без него все выпадающее меню поедет и соответственно будет не очень красиво. (пункт 1)

                    #nav li:hover > ul{ visibility:visible; /* показываем выпадающее меню при наведении */ position: relative; } #nav ul a{ padding:18.5px 65px; /* делаем отступы выпадающего меню меньше от основного */ } #nav ul li:hover{ background:#d92a2a; } #nav li:first-child:hover > ul{ left: 0px; /* при наведении на первый элемент чтобы не съежало выпадающее меню */ }

                    Так как Евгений, подготовил макет данного меню, то все моменты связанные с его дизайном, мы реализовали с Вами в соответствии.

                    Теперь, нам нужно реализовать border меню, так как он имеют некую функциональную особенность. Давайте ее рассмотрим.

                    Обратите внимание

                    Для начала нам потребуется сделать border справа для основного меню, затем чтобы border не было слева нам нужно указать основному меню задать свойство none. 

                    #nav > li{ border-right: 2px solid #d92a2a; /* добавляем рамку к основному меню справа */ } #nav > li:last-child{ border-right: none; /* убираем рамку справа основного меню */ }

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

                    #nav > li ul li{ border-left: 2px solid #d92a2a; /* добавляем рамку к выпадающему меню слева */ border-right:2px solid #d92a2a; /* добавляем рамку к выпадающему меню справа */ } #nav li:first-child ul li,#nav li:first-child ul{ border-left:none; /* убираем рамку у выпадающего меню слева */ } #nav li:last-child ul li,#nav li:last-child ul{ border-right:none; /* убираем рамку у выпадающего меню справа */ }

                    Проверяем все на сайте и видим, что все отлично работает, кроме одной детали, а именно наше выпадающее меню при наведении на вторую ссылку и последующую сдвигается немного вправо. Для этого, чтобы устранить данную проблему, мы задаем элементу меню с идентификатором nav свойство left и в качестве параметра даем ему минус два. (см. пункт 1)

                    #nav li:hover > ul{ left: -2px; /* смещаем выпадающее меню слева от размера рамки*/ }

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

                    Я благодарю Вас за ваше внимание, за ваши комментарии, а также за то, что Вы ознакомились с данным уроком и надеюсь, смогли для себя что-то выделить и подчеркнуть. А я с Вами прощаюсь и в следующем уроке мы рассмотрим тему меню сопровождением звуковой анимацией. Всем удачи!)

                    Роман Краутер

                    Источник: https://roothelp.ru/lessons/sozdanie_prostogo_menu_dly_saita_na_html_i_css

            1. Ссылка на основную публикацию