Багаторівневе меню на PHP та MySQL. §2. Як зробити вертикальне меню, що випадає на php Inurl php own menu id піраміда

• Головна
• Новини
• Контакти
• Про нас

Наше наступне завдання полягає у скиданні стилів списку, встановлених за замовчуванням. Нам потрібно прибрати зовнішні та внутрішні відступи біля самого списку та маркери у пунктів списку. Потім поставимо потрібну ширину:

#navbar ( margin: 0; padding: 0; list-style-type: none; width: 100px; )

Тепер настав час стилізувати самі посилання. Ми додамо до них фоновий колір, змінимо параметри тексту: колір, розмір та насиченість шрифту, приберемо підкреслення, додамо невеликі відступи та перевизначимо відображення елемента з рядкового на блоковий. Додатково було додано ліву та нижню рамки до пунктів списку.

При наведенні курсору миші до пункту меню його зовнішній виглядможе змінюватися, привертаючи увагу користувача. Створити такий ефект можна за допомогою псевдокласу: hover.

Повернемося до розглянутого раніше прикладу вертикального меню та додамо до таблиці стилів таке правило:

#navbar a:hover ( background-color: #666; border-left: 5px solid #3333FF; ) Спробувати »

Горизонтальне меню

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

Горизонтальне меню можна створити за допомогою стилізації звичайного списку. Властивості display для елементів

Для розміщення пунктів меню по горизонталі спочатку створимо маркований список з посиланнями:

• Головна
• Новини
• Контакти
• Про нас

Напишемо для нашого списку пару правил, що скидають стиль, що використовується для списків за замовчуванням, і перевизначимо пункти списку з блокових на рядкові:

#navbar ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Спробувати »

Тепер нам залишилося лише визначити стильове оформленнядля нашого горизонтального меню:

#navbar ( margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; ) #navbar a ( color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; background-color: #0066FF; ) Спробувати »

Випадаюче меню

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

Спершу нам потрібно створити HTML-структуру нашого меню. Основні навігаційні посилання ми помістимо до маркованого списку:

• Головна
• Новини
• Контакти
• Про нас

Підпункти ми розмістимо в окремому списку, вклавши його в елемент

• Головна
• Новини
• Контакти
  • Адреса
  • Телефон
  • Email
• Про нас

Тепер приступимо до написання CSS коду. Для початку необхідно приховати список підпунктів за допомогою оголошення display: none;, щоб вони не відображалися на веб-сторінці весь час. Для відображення підпунктів нам потрібно, щоб при наведенні на елемент

#navbar ul ( display: none; ) #navbar li:hover ul ( display: block; )

Забираємо в обох списків відступи та маркери, встановлені за замовчуванням. Елементи списку з навігаційними посиланнями робимо плаваючими, формуючи горизонтальне меню, але для елементів списку, що містять підпункти, задаємо float: none; щоб вони відображалися один під одним.

#navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( float: left; ) #navbar ul li ( float: none; )

Потім нам потрібно зробити так, щоб наше підменю, що випадає, не зміщувало контент, розташований під панеллю навігації, вниз. Для цього ми поставимо пункти списку position: relative; а списку, що містить підпункти position: absolute; і додамо властивість top із значенням 100%, щоб абсолютно позиціоноване підменю відображалося точно під посиланням.

#navbar ul ( display: none; position: absolute; top: 100%; ) #navbar li ( float: left; position: relative; ) #navbar ( height: 30px; ) Спробувати »

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

Тепер нам залишилося стилізувати обидва наші списки і меню, що випадає, буде готове:

#navbar ul ( display: none; background-color: #f90; position: absolute; top: 100%; ) #navbar li:hover ul ( display: block; ) #navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar ( height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; ) height: 100%; ) #navbar li a ( display: block; padding: 6px; width: 100px; ) #navbar li:hover (background-color: #f90; ) #navbar ul li:hover (background-color: #666; )

Меню сайту на 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.="

". showCat($category["childs"]) ."

Порядок прямування в масиві буде зберігатися при виведенні меню на сайті. Тобто масив треба заповнювати у порядку, в якому потрібно виводити меню.

Примітка:
Якщо 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 та 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 "

// Починаємо внутрішній список, якщо дочірніх елементів ще не було
$ ul = true; // Встановлюємо прапор
}
echo printItem($items[$key], $items, $childrens); // Рекурсивно виводимо всі дочірні елементи
}
echo "";
}
?>



Меню



foreach ($items as $item) (
if (!$item["parent_id"]) echo printItem($item, $items, $childrens); // Виводимо всі елементи верхнього рівня
}
?>




Цей код повністю робочий, однак, Ви повинні розуміти, що так ніхто не пише (зокрема, висновок через echo HTML-тегів). І Ваше завдання взяти алгоритм із цього коду, але не сам код. А далі цей алгоритм підключити до свого двигуна. Я постарався ретельно прокоментувати код виводу багаторівневого меню на PHP та MySQLАле, безумовно, він не найпрозоріший і вимагає вже непоганих початкових знань. Якщо Ви ще погано знаєте PHP та MySQL, то спочатку рекомендую пройти цей