Багато виділи на різних сайтах випадають меню. Таке меню робить Ваш сайт як більш функціональним, так і більш інтуїтивно зрозумілим відвідав його користувачеві мережі. Про те, як зробити меню, що випадає, розповість наша стаття.
Joomla
- Необхідно зайти в Панель управління сайтом, потім в «Меню», потім в «Розширення», далі в «Менеджер модулів»;
- Тепер потрібно знайти модуль, коториq відповідає за Меню сайту. Він може бути і в «Менеджері модулів» (плагін, що відповідає за показ меню на даному сайті);
- Далі потрібно натиснути на модулі і виконати такі налаштування:
- «Включено» - «Так»;
- «Завжди показувати вкладені підпункти» - «Так»;
- «Активувати батька» - «Так»;
- «Розкривати меню» - «Так»;
Зберегти налаштування;Потім необхідно перейти в «Все меню», потім «Меню» і в списку вибрати те меню, в якому буде створено пункт з випадають підпунктами;Натиснути кнопку «Створити»;Тепер потрібно зробити пункти меню і вже потім підпункти, для чого необхідно вибрати матеріали, тобто шаблон категорії (наприклад, зовнішнє посилання);Далі потрібно вписати назву цього меню і виставити настройки, головна з яких - «Батьківський елемент» - пункт меню, з якого будуть випадати різні підпункти, ось чому потрібно вибрати пункт головного меню саме батьківським елементом.Потім потрібно вказати категорію на яку буде посилання Вашого підпункту і зберегти настройкуОсь як зробити меню, що випадає Joomla. Якщо Ви хочете зробити кілька таких пунктів, то потрібно виконати вищевказані кроки кілька разів.
HTML і CSS
- Спочатку необхідно скласти меню і визначити його структуру. Потім потрібно розташувати елементи в комфортному для користувача порядку і подумати над грамотними і зрозумілими назвами майбутніх розділів. Тепер залишилося визначити ті пункти, що будуть випадають, і необхідні підпункти, що будуть в цих пунктах;
- Далі потрібно оформити обрану структуру за допомогою html-тегів. Це виглядає приблизно так:
Ваше посилання №3 Ваш пункт №3-1Ваш пункт №3-2Ваш пункт №3-3Ваш пункт №3-4Потім необхідно помістити всі Ваше меню в блок, позначений і задати ідентифікатор (). Це дозволить Вам присвоювати свої особливості виключно цьому блоку, не чіпаючи інші блоки. В ідентифікаторі потрібно вказати ім'я, властивості якого Ви опишіть в подальших кроках;Тепер потрібно створити списки, в яких - це сам список, • - це кожна його рядок, і додати для майбутніх посилань, що будуть створені випадає, меню, список з підходящими підпунктами;Далі необхідно перетворити назви цих пунктів в заслання, укладаючи їх у, і привласнити його параметру «href-адреса» потрібної сторінки, зазначеної посиланням. Ось як html зробити меню, що випадає;Тепер необхідно задати властивості потрібного списку за допомогою css. Для цього потрібно внести їх в css-файл так:#vmenu ul {padding: 0px; margin: 0px; width: 250px; list-style: none;},де «padding» - це відступ всередині (повинен бути «0»), «margin» - це відступ зовні (повинен бути «0»), «list-style» - це стиль списку (можна поставити значення «none», щоб прибрати точки), width - це ширина списку;Потім потрібно додати властивості елемента: #vmenu ul li {position: relative-} - це параметр потрібного позиціонування (розташування елементів - «position»), «relative» - це значення, необхідне для визначення розташування меню, що випадає щодо стартового меню. Це меню буде вертикальне;Далі необхідно вказати властивості списку, який розташований в елементі іншого списку:#vmenu li ul {position: absolute- display: none; top: 0- left: 250px; },де «position: absolute» - це абсолютне розміщення підміню щодо меню, «left» і «top» - це розташування за допомогою відступу зліва і зверху, «display: none - параметр відображення (спочатку список не буде видно);Тепер необхідно внести параметри для Ваших посилань:#vmenu ul li a {padding: 5px; display: block- color: # 606060- text-decoration: none; background: # d8d8d8-},де «display: block» - це параметр відображення, який робить елемент у вигляді блоку, «padding» - це відступ, «color» - це колір посилання (текст), «background» - це колір посилання (фон), «text- decoration »- це стиль Вашого посилання (в даному випадку прибрано підкреслення);Далі необхідно задати дію у разі наведення курсору:#vmenu li: hover ul {display: block-},де - «li» - це рядок списку, «ul» - це список, який буде видимим. Ось як як зробити меню, що випадає css;Також можна додати такі параметри, як параметр зображення або кольору для фону, шрифт самих посилань, горизонтальні риси і багато інших властивостей для виду меню.Тепер Ви знаєте, як зробити меню, що випадає різними способами і зможете вибрати найбільш підходящий з них!