Мої замітки призначені в основному для початківців веб-майстрів. Незважаючи на це, досвідчені розробники також знайдуть тут що-небудь цікаве для себе.
У своєму блозі я збираюся публікувати статті про сучасні веб-технологіях (HTML5. CSS3 та інших). Якщо в процесі роботи над проектами я відкриваю для себе «свіже» рішення будь-якої задачі, я записую сюди інформацію про це, що дозволяє мені при необхідності застосовувати отримані знання в майбутньому.
Сподіваюся інформація буде корисна для відвідувачів.
Якщо з якої-небудь причини вас не влаштовує зовнішній вигляд меню в шаблоні Joomla, не обов'язково міняти весь шаблон цілком, можна обійтися тільки зміною самого меню, яке вам не подобається.
У цій статті я продемонструю як це можна зробити. Для цього нам знадобиться: сайт на Joomla (я використовую сайт з демо-даними і стандартним шаблоном, який ви можете завантажити і встановити в CMS).
Нам потрібно видалити з коду все значення атрибутів href у посилань, замінивши їх на символ «#».
Отримали «очищений» код - з ним і будемо работать.Теперь нам потрібно визначитися чи меню ми хочемо змінити або тільки одне. Якщо тільки одне, нам потрібно присвоїти йому суфікс класу. Це робиться в системі (Розширення ► менеджер модулів). Знаходимо потрібний модуль (в нашому випадку «Головне меню»), відкриваємо, і в розділі Установки ► розширені параметри, вказуємо суфікс класу - в нашому випадку «_menu». Контейнер div після додавання суфікса тепер має клас «moduletable_menu».
Поки ми звідси не вийшли нам потрібно відключити заголовок меню, щоб він не з'являвся вище всіх пунктів меню.
Йдемо далі. Ми хочемо, щоб наше меню виглядало ось так:
Наше завдання зробити так, щоб застосувавши кілька правил css, наше меню, код якого ми зберегли, виглядало як меню на малюнку. Спочатку приберемо всі відступи у всіх елементів на сторінці і дамо все текстовим елементам однаковий розмір шрифту:
Справа в тому, що у кожного елемента за замовчуванням задані значення властивостей margin і padding. причому в різних браузерах вони різні, тому це обнулення властивостей необхідно робити при верстці будь-яких html - сторінок, для того, щоб потім не було сюрпризів з невідомо звідки взялися пробілами і відступами у елементів.
Далі вказуємо наступні правила нашому списку:
Зберігаємо і дивимося, що у нас вийшло в браузері:
Так як ми обнулили всі відступи наше меню щільно пристикувався до верхньої лівої точці вікна браузера. Такий же вид у нього буде, коли ми змінимо стилі меню в системі, воно буде щільно прилягати до кордонів свого контейнера, тому ми застосуємо наступне правило до div.moduletable_menu. створивши навколо нього невеликі відступи:
Розширення ► Менеджер шаблонів ► клацаємо по імені нашого шаблону (він обраний за замовчуванням) і вибираємо в верхньому меню пункт «Редагувати css».
Так як в тестовому шаблоні до елементів не застосовуються стилі, файл template.css порожній.
Меню до зміни
Меню після зміни