Як зробити меню, що випадає?

Фото - Як зробити меню, що випадає?

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




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;
            • Також можна додати такі параметри, як параметр зображення або кольору для фону, шрифт самих посилань, горизонтальні риси і багато інших властивостей для виду меню.

            • Тепер Ви знаєте, як зробити меню, що випадає різними способами і зможете вибрати найбільш підходящий з них!


              » » Як зробити меню, що випадає?