CSS меню для начинающих / Хабр
Данное руководство поможет Вам создать CSS меню для вашего сайта, оно не будет обычным, оно будет привлекать внимание пользователей, не сомневайтесь. И так приступим…
Фон для меню
Для начала создадим background, я конечно не мастер PhotoShop’a, но вот что у меня получилось за пару минут:
Графические кнопочки
Создаем изображения которые у нас будут использовать как ссылки в меню. Для этого воспользуемся PhotoShop’ом:
- Создаем новый файл размером этак 144x58px. (размер ссылки для первого элемента в меню)
- Наполняем графическим содержимым сей пункт меню (у меня это лишь надпись выполненная забавным шрифтом):
- Далее увеличим размер полотна в два раза
- И дорисуем внешний вид элемента меню для реализации события hover
Как сия конструкция будет работать? Да очень просто — ссылке мы явно указываем размер 144x58px, а но событие mouseover перемещаем фоновое изображение вверх: - Создадим новый файл с произвольным размером и текстом — это будет наша подсказка к ссылке
- Повторим все предыдущие пункты для создания всех пунктов меню, в результате анаших манипуляций у нас должен получиться вот такой набор изображений:
HTML код
Закончили строить из себя дизайнеров, пора начинать кодить — создадим не нумерованный список — <ul>:
- элементу <ul> присвоеим id=«menu»
- каждой ссылке <a> присвоим уникальное имя класса
- Внутрь тэга <a> закинем пустой тэг <span> (понадобиться для реализации подсказок к ссылкам)
<ul id=«menu»>
<li><a href=»#» class=«home»>Home <span></span></a></li>
<li><a href=»#» class=«about»>About <span></span></a></li>
<li><a href=»#» class=«rss»>RSS <span></span></a></li>
</ul>
CSS код
#menu
Для начала убираем padding и margin у меню, list-style выставляем в none, position указываем как relative.
Указываем высоту и ширину меню (см. размеры menu-bg.jpg). Добавляем фоновое изображение.
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span
Для элементов span параметр display выставляем в none (по умолчанию не будут отображаться). Так же выставляем position как absolute.
#menu span {
display: none;
position: absolute;
}
#menu a
Для ссылок нам необходимо спрятать текст, для этого параметру text-indent присваиваем негативное значение (-900%), и текст будет скрыт.
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover
Теперь мы хотим сдвинуть картинку на линке по событию mouseover, для этого добавим в CSS следующий код:
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span
Так же по событию mouseover необходимо отобразить подсказку
#menu a:hover span {
display: block;
}
#menu .
home
Теперь нам необходимо правильно расставить элементы меню. Для начала укажем размер элемента и фоновое изображение, а затем займемся позиционированием, будем изменять параметры left и top пока не почувствуем морального удовлетворения от внешнего вида меню:
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 96px;
}
#menu .home span
Теперь проведем подобную операцию для всплывающей подсказки
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about
Копируем всё что мы сделали для элемента .home и переименовываем в .
about. Подгоняем размер и расположение, так же заменяем фон.
#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss
Повторим для .rss
#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
Всё в одном
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
jpg) no-repeat;
about span {Это всё, протестировать меню можете тут, а скачать пример тут.
Вольный перевод: http://www.webdesignerwall.com/tutorials/advanced-css-menu/
Кросспост: CSS меню в стиле Web 2.0
Настроить дизайн меню — Поддержка
Тема определяет внешний вид меню на сайте. В этом руководстве будут рассмотрены способы изменения дизайна меню.
Содержание
Изменение цветов меню
Если в теме используется редактор сайта, цвет меню можно изменить в настройках блока навигации.
Во многих темах можно управлять цветом текста меню и фоном. Чтобы посмотреть варианты настройки цветов, выполните следующие действия.
- Перейдите в раздел Внешний вид → Настроить.
- Нажмите Цвета и фоновые изображения, где будут отображаться круги. Каждый круг определяет цвет элементов сайта, например цвет ссылки и цвет фона.
- Все темы отличаются друг от друга. Нажмите каждый круг и посмотрите, какие элементы меняют цвет. Выберите новый цвет — в окне предварительного просмотра справа будет показан новый цвет на сайте.
- Если результат вам подходит, нажмите Сохранить изменения, чтобы применить новые цвета на сайте.
Если эти варианты не позволяют получить нужный цвет, измените цвета меню с помощью кода CSS — отдельной опции в тарифных планах WordPress.com Premium, Business и eCommerce и устаревшем плане Pro. Дополнительные сведения о поддержке CSS см. здесь.
Перемещение меню
Если вы хотите изменить расположение меню, используйте следующие возможности.
- Найдите тему, которая отображает меню на удобной для вас позиции. Расположение меню — один из основных факторов, влияющих на выбор темы. Выберите тему, в которой меню отображается в оптимальном месте. Узнайте больше о замене тем.
- Для размещения меню на любой странице или в области виджета используйте блок навигации.
- Проверьте области для меню в своей теме. Каждая тема содержит хотя бы одну область для меню, но некоторые темы поддерживают несколько таких областей.
Возможно, вы не сможете переместить меню на другую позицию. Но мы, как правило, не предоставляем код CSS для этого из-за высокой сложности и риска появления проблем при отображении.
Меню на мобильных устройствах
На экранах ПК меню обычно отображается в виде списка текстовых ссылок, расположенных в одну строку. На экранах меньшего размера (планшеты и смартфоны) места гораздо меньше, и разместить все текстовые ссылки так, чтобы их было легко нажать, не удаётся.
Вместо этого во многих случаях элементы меню свёртываются в отдельную кнопку, которая выглядит примерно так.
Такое меню часто называют «гамбургером», так как три горизонтальные линии напоминают гамбургер.
Обычно нельзя использовать меню для настольных устройств на мобильных, и наоборот. Да это и не рекомендуется. Пользователи уже привыкли к меню такого типа на мобильных устройствах, так как это лучший способ навигации по сайту.
Другие изменения оформления
Если этих инструментов недостаточно, чтобы внести на сайт изменение, обратитесь к инженеру поддержки и обсудите это с ним. Мы можем порекомендовать изменить тему или использовать CSS (только на тарифных планах WordPress Premium, Business и eCommerce и устаревшем плане Pro), если предложенный вами дизайн можно реализовать.
Классы CSS
Эта функция доступна для сайтов с тарифными планами WordPress.com Premium, Business и eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.
Классы CSS — это расширенное свойство меню, с помощью которого можно применить класс CSS к отдельным элементам меню.
Чтобы включить опцию классов CSS, выполните следующие действия.
- Перейдите в раздел Внешний вид → Настроить → Меню.
- Нажмите значок ⚙️ (шестерёнки), чтобы открыть меню расширенных настроек.
- Убедитесь, что установлен флажок «Классы CSS», как показано на изображении справа.
Элементы меню получат новое поле, в котором можно указать класс CSS, как показано здесь.
В примере выше вы можете задать стиль элемента меню, используя селектор .twitter в коде CSS.
Далее: Расширенные настройки меню.
Разнообразие тарифных планов и ценовых предложений
Бесплатно
Оптимальный вариант для студентов
Personal
Оптимальный вариант для представления своего хобби
-
Premium
Оптимальный вариант для фрилансеров
Business
Оптимальный вариант для малых предприятий
Ваша оценка:
Дизайн фона меню, темы, шаблоны и загружаемые графические элементы на Dribbble
Посмотреть мобильное меню с 3d абстрактным фоном
Мобильное меню с трехмерным абстрактным фоном
View Shopping TV интерфейс для Natural от Глеба Кузнецова
Шоппинг TV интерфейс для Natural от Глеба Кузнецова
Просмотр ближайшего интерфейса веб-сайта
Рядом с веб-сайтом UI
Посмотреть лендинг магазина футболок
Магазин футболок
Посмотреть меню вкусной еды и баннер в социальных сетях ресторана
Меню вкусной еды и баннер для социальных сетей ресторана
Посмотреть фон TropicAnna
Фон TropicAnna
Просмотр слайдов баннеров веб-сайта
Слайды баннеров веб-сайтов
Посмотреть летнюю коллекцию 2018
Летняя коллекция 2018
View Gorjeta — проект приложения для поиска ресторанов
Gorjeta — Проект приложения для поиска ресторанов
View Gorjeta — проект приложения для поиска ресторанов
Gorjeta — Проект приложения для поиска ресторанов
Посмотреть проект приложения для поиска ресторанов
Приложение для поиска ресторанов
Просмотр Teaori / Дизайн веб-сайта
Teaori / Дизайн веб-сайта
Посмотреть специальное меню блюд и баннер ресторана в социальных сетях
Специальное меню и баннер ресторана в социальных сетях
Посмотреть набор шаблонов Elementor для ресторана веганской кухни и еды на вынос
Набор шаблонов Elementor для веганских блюд, ресторанов и еды на вынос
Посмотреть культивировать
Культивировать
Просмотр вкладки «Анимированные»
Анимированная вкладка
Посмотреть Крис Нольтекулманн
Крис Нольтекулманн
Посмотреть домашнюю страницу балетной труппы и меню
Домашняя страница балетной труппы и меню
Приложение View Outline плавает на сером фоне
Приложение Outline отображается на сером фоне
Посмотреть меню еды в социальных сетях instagram пост
Меню еды пост в социальных сетях instagram
Посмотреть фитнес
Фитнес
Посмотреть MaxiS Creative Marketing Studio
MaxiS Creative Marketing Studio
Посмотреть целевую страницу Diprella
Целевая страница Diprella
Просмотр панели управления/страницы продукта
Информационная панель/страница продукта
Зарегистрируйтесь, чтобы продолжить или войдите
Загружается еще…
Фоновые изображения меню | Скачать бесплатные изображения на Unsplash
Фоновые изображения меню | Скачать бесплатные изображения на Unsplash- A Photophotos 10K
- А.
отдыходна зрелая женщина только меню0005
Hd pattern wallpapersishinomakimiyagi prefecture
Hd yellow wallpapersFlower imageswall
Hd abstract wallpapersHd wallpapersHd color wallpapers
vegetabletomatoLeaf backgrounds
Christmas imagesFall images & picturesHd autumn wallpapers
Hd holiday wallpapersWinter images & picturesxmas
drinkcocktailmimosa
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.
Текстурные фоныtextilelinen
Hq background imagesFood images & picturesflat
Hd grey wallpapersconcreterug
Ice cream images & picturesstudio shotselective focus
winemaecanada
japan4 chome-11-6 asakusabashitōkyō-to 111-0053
surfacewoodenplank
st. petersburgrussiaHd обои с небом
backgroundösterreicchoberösterreich
Похожие коллекции
Background
19k фото · Куратор Becca MerrimanПланировщик меню
238 Фотографии · Куратор Патриция ЛопикколоКофе, чай
713 Фотографии · Куратор Michael Grown.
овощипомидорЛистовые фоны
ст. петербургроссияhd обои небо
ложканет людейиндульгенция
текстуры фонытекстильбелье
Hd серые обоибетон
Hd узорные обои Исиномакимияги префектура
Hd абстрактные обоиHd обоиHd цветные обои
поверхностьдеревянная доска
Hd праздничные обоиЗимние картинки и картинкиРождество
–––––––– –––– –– – –– –––– – – –– ––– –– –––– – –.
Hq фоновые изображенияЕда изображения и картинкиквартира
Hd деревянные обоиполфоны для сайта
Мороженое изображения и картинкиstudio shotselective focus
Winemaecanada
Связанные коллекции
Фоны
19K Фотографии · Куратор Becca MerrimanПланировщик меню
238 Фотографии · Куратор Патриция Lopiccolo 17, кофе · Куратор Патриция Lopiccolo
17, кофе. -11-6 asakusabashitōkyō-to 111-0053
Рождество фотоОсень фото и картинкиHd осень обои
фонösterreichoberösterreich
напитоккоктейльмимоза
Логотип UnsplashUNSPLASH+
В сотрудничестве с Getty Images
UNSPLASH+
Разблокировать
RelaxationOne зрелая женщина только меню
Annne Spratt
Фоно -фоновый фон.
