Меню в виде в css: CSS меню для начинающих / Хабр

alexxlab

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 . about span {
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;
}

Это всё, протестировать меню можете тут, а скачать пример тут.

Вольный перевод: http://www.webdesignerwall.com/tutorials/advanced-css-menu/

Кросспост: CSS меню в стиле Web 2.0

Как создать меню ссылок одинаковой ширины

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад Вперед ❯

Узнать, как создать панель навигации с навигационными ссылками одинаковой ширины.

Меню равной ширины

Главная Поиск Контакт Логин

Редактор кода »

Создание адаптивной панели навигации

Шаг 1) Добавить HTML:

Пример

<!— Меню навигации —>
<div>
  <a href=»#»>Главная</a>
  <a href=»#»>Поиск</a>
  <a href=»#»>Контакт</a>
  <a href=»#»>Логин</a>
</div>

Шаг 2) Добавить CSS:

Пример

/* Стиль меню навигации */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

/* Навигационные ссылки */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Четыре звена равной ширины. Если у вас есть две ссылки, используйте 50% и 33.33% для трех ссылок и т.д. */
  text-align: center; /* Если вы хотите, чтобы текст был центрирован */
}

/* Добавить цвет фона при наведении курсора мыши */

. navbar a:hover {
  background-color: #000;
}

/* Стиль текущей/активной ссылки */
.navbar a.active {
  background-color: #4CAF50;
}

/* Добавить отзывчивость — на экранах менее 500px, сделать навигационные ссылки появляются поверх друг друга, а не рядом друг с другом */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* Если вы хотите, чтобы текст был выровнен по левому краю на небольших экранах */
  }
}

Редактор кода »

Равная ширина навигационных ссылок с иконками

Пример

Главная Поиск Контакт Логин

Редактор кода »

Совет: Зайдите на наш учебник CSS Навигации чтобы узнать больше о навигационных барах.

❮ Назад Вперед ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3. CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

Простое оформление панели навигации меню

Для новичков в CSS панель навигации — это то, с чем вы рано или поздно столкнетесь. Это первый пост из серии руководств по основам кода, которые я делаю в связи с перезагрузкой моего канала на YouTube.

Я писатель по силе, но я также хочу научиться лучше объяснять вещи словесно. Это часть записи для видео ниже. Не забудьте поставить лайк и подписаться 😉

Большинство панелей навигации, с которыми вы столкнетесь, представлены в виде списка. Однако списки по умолчанию обычно уродливы. В этом уроке мы собираемся превратить элемент неупорядоченного списка в простую и визуально приятную горизонтальную панель навигации.

Во-первых, давайте начнем с нашего ненумерованного списка:

Вот как он выглядит в настоящее время:

Короче говоря, это довольно простой Интернет 1980-х годов. Так как же нам перейти от приведенного выше к скриншоту ниже?

Во-первых, начните с обводки всех ваших элементов, чтобы вы точно знали, на что нацелен ваш CSS.

 ul{граница: сплошной 1px черный;}
li{граница: сплошной зеленый 1px;}
a{border:solid 1px red;}

Теперь панель меню навигации выглядит примерно так:

Да. Это все еще некрасиво. Но мы приближаемся к этому.

Следующим шагом будет преобразование ваших элементов li из стандартной области блока в область встроенного блока . блок заставляют элемент занимать всю ширину страницы. Мы хотим, чтобы каждый из элементов li выстраивался рядом друг с другом, поэтому мы используем inline-block .

Вот новый CSS:

 ul{
    граница: сплошная 1px черная;
}
ли {
    граница: сплошная 1px зеленого цвета;
    дисплей: встроенный блок;
}
а {
    граница: сплошная 1px красная;
}

Вот как это выглядит:

Да. Я знаю. Это все еще уродливо, но, по крайней мере, теперь все вроде как в правильном положении. Следующий шаг — избавиться от пробела перед 9.0028 Дом . Этот интервал вызван настройками по умолчанию padding , которые есть во всех списках. Чтобы избавиться от заполнения, мы можем сделать это, установив padding на 0 по адресу ul .

Вот как сейчас выглядит CSS:

 ul{
    граница: сплошная 1px черная;
    заполнение: 0;
}
ли {
    граница: сплошная 1px зеленого цвета;
    дисплей: встроенный блок;
}
а {
    граница: сплошная 1px красная;
}

Вот как выглядит панель навигации по меню:

Панель навигации по меню выглядит слишком узкой. Давайте сделаем его немного больше. Для этого мы можем поставить прокладку на li . Однако наша кликабельная область остается небольшой и может немного раздражать пользователя.

Если мы поместим padding на li , кликабельной областью будет только то, что находится в областях с красной рамкой.

Однако, если мы переместим отступ в селектор a , мы получим что-то вроде этого:

Это создает проблему, потому что ваш элемент-контейнер (т.0028 ul ) не расширяется для размещения набивки. Это связано с тем, что a по умолчанию установлено как встроенный  , что означает, что отступы и поля не влияют на окружающую область, независимо от того, насколько сильно вы этого хотите.

Например, вот абзац со строкой a , который имеет отступы. Заполнение влияет только на стороны, но создает перекрытие текста для настроек сверху и снизу .

Чтобы исправить проблему с перекрытием строки меню навигации, мы можем изменить значение по умолчанию на 9. 0028 дисплей:блок .

Вот новый CSS:

 ul{
    граница: сплошная 1px черная;
    заполнение: 0;
}
ли {
    граница: сплошная 1px зеленого цвета;
    дисплей: встроенный блок;
}
а {
    граница: сплошная 1px красная;
    дисплей:блок;
    отступ: 10 пикселей;
}

Вот как выглядит панель навигации по меню с display:block , примененным к селектору a .

Теперь, когда у нас есть детали в нужном месте, пришло время сделать их красивыми.

Во-первых, давайте удалим все границы и поместим красивый черный фон в панель навигации меню.

 ул{
    заполнение: 0;
    фон: черный;
}
ли {
    дисплей: встроенный блок;
}
а {
    дисплей:блок;
    отступ: 10 пикселей;
}

Вот как это выглядит:

Цветовая схема выглядит немного странной, поэтому давайте изменим ее на более контрастную и удалим подчеркивание ссылок.

 ул{
    заполнение: 0;
    фон: черный;
}
ли {
    дисплей: встроенный блок;
}
а {
    дисплей:блок;
    отступ: 10 пикселей;
    белый цвет;
    текстовое оформление: нет;
}

Вот как это выглядит сейчас:

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

Вот CSS:

 ul{
    заполнение: 0;
    фон: черный;
    семейство шрифтов: Arial, без засечек;
}
ли {
    дисплей: встроенный блок;
}
а {
    дисплей:блок;
    отступ: 10 пикселей;
    белый цвет;
    текстовое оформление: нет;
}

Arial — выбранный вами шрифт, с без засечек в качестве резервного по умолчанию, если Arial недоступен на устройстве вашего пользователя.

Давайте сделаем шрифт с размером шрифта немного меньше и начнем все с заглавной буквы, чтобы он выглядел немного более профессионально.

 ул{
    заполнение: 0;
    фон: черный;
    семейство шрифтов: Arial, без засечек;
    размер шрифта: 12px;
    преобразование текста: верхний регистр;
}
ли {
    дисплей: встроенный блок;
}
а {
    дисплей:блок;
    отступ: 10 пикселей;
    белый цвет;
    текстовое оформление: нет;
}

И вот окончательный результат:

Вот и все.

А пока спасибо за прочтение (и просмотр).

Поделиться этой публикацией

Ссылка скопирована!

Превращение списка в панель навигации

Я получил несколько запросов на описание того, как я создал панель навигации, которая в настоящее время используется на этом сайте. Используемый CSS не так уж продвинут, и я действительно не думал о его подробном описании, но после того, как меня спросили об этом, я решил написать статью.

Примечание: После публикации этой статьи я немного изменил разметку и CSS для навигационной панели, поэтому техника выделения активной ссылки больше не используется.

Я немного подчистил HTML и CSS, так что если сравнить это с тем, что на самом деле используется на сайте, будут небольшие отличия. В случае, если я изменил дизайн к тому времени, когда вы читаете это, посмотрите готовый пример, чтобы увидеть, как выглядело меню на момент написания этой статьи.

HTML

Разметка очень проста. Это неупорядоченный список, где каждая ссылка находится в отдельном элементе списка:

.
 <ул>

  • Главная
    • 

  • О нас
    • 

  • Архив
    • 

  • Лаборатория
    • 

  • Отзывы
    • 

  • Контакты
    •

    Просмотр шага 1.

    Зачем использовать список? Потому что панель навигации или меню — это список ссылок. Лучший (наиболее семантический) способ разметки списка ссылок — использовать элемент списка. Использование списка также имеет то преимущество, что обеспечивает структуру, даже если CSS отключен.

    На этом этапе, без применения CSS, список будет выглядеть как любой старый (обычно маркированный) список, стилизованный только под настройки браузера по умолчанию.

    Я дал атрибуты id для ul и ли элементов. Атрибут id для элемента ul используется правилами CSS, которые определяют стиль всего списка. Элементы li имеют разные значения id , что позволяет использовать CSS для выделения текущей выбранной ссылки. Это делается путем указания идентификатора id для элемента body . Подробнее об этом позже.

    CSS

    Я опишу CSS, который я использовал для стилизации списка, шаг за шагом.

    Прежде всего, я устанавливаю поля и отступы списка и элементов списка равными нулю и указываю, чтобы элементы списка отображались в строке:

     #nav {
маржа: 0;
заполнение: 0;
}
#нав ли {
дисплей: встроенный;
заполнение: 0;
маржа: 0;
}

    Просмотр шага 2

    Это приведет к тому, что все ссылки будут отображаться одна за другой в одной строке, как если бы списка не было. Он также удалит маркеры списка, поскольку они отображаются только при использовании display:list-item (режим отображения по умолчанию для элементов списка). Говорят, что некоторые браузеры неправильно отображают маркеры списка, хотя display:inline применен к элементам списка. Я не видел, чтобы это происходило ни в одном из браузеров, которые я тестировал, но если вы хотите убедиться, что ни один из браузеров не отображает маркеры списков, вы можете добавить list-style-type:none к правилу для #nav .

    Теперь пришло время приступить к стилизации вкладок меню. Я делаю это, добавляя стили к ссылкам, а не к элементам списка. Причина этого в том, что я хочу, чтобы вся область каждой вкладки была доступна для кликов. Сначала немного цвета, чтобы сделать изменения более очевидными:

     #nav a:ссылка,
#nav a:посетил {
цвет:#000;
фон:#b2b580;
}

    Просмотр шага 3.

    Обратите внимание, что я стилизую обычные и посещенные состояния ссылок, чтобы они выглядели одинаково. следующий шаг — добавить немного отступов к ссылкам:

     #nav a:ссылка,
#nav a:посетил {
цвет:#000;
фон:#b2b580;
заполнение: 20px 40px 4px 10px;
}

    Посмотреть шаг 4.

    Это немного лучше. Но есть потенциальная проблема, которая здесь не видна. Поскольку ссылки являются встроенными элементами, их вертикальный отступ не будет увеличивать высоту строки. Это легче увидеть, если 9У элемента 0028 ul есть фон, поэтому я добавлю цвет фона и фоновое изображение:

     #nav {
маржа: 0;
заполнение: 0;
background:#808259 url(nav_bg.jpg) 0 0 Repeat-x;
}

    Посмотреть шаг 5.

    Ой. Теперь ссылки торчат из элемента списка. Чтобы исправить это, я превратил ссылки в блок-боксы, переместив их влево. Я также установил их ширину на auto , чтобы они сжимались, чтобы соответствовать своему содержимому:

     #nav a:ссылка,
#nav a:посетил {
цвет:#000;
фон:#b2b580;
заполнение: 20px 40px 4px 10px;
плыть налево;
ширина:авто;
}

    Посмотреть шаг 6.

    Добавление display:block к правилу CSS для ссылок также сделало бы их блок-боксами, но, поскольку плавающий элемент автоматически генерирует блок-бокс, в этом нет необходимости.

    Как вы могли заметить, пропал фон при плавании ссылок. Это связано с тем, что плавающие элементы удаляются из потока документов, что приводит к тому, что элемент ul , содержащий их, имеет нулевую высоту. Таким образом, фон есть, но его не видно. Чтобы сделать ul приложите ссылки, я это тоже запустил. Я также установил его ширину на 100%, заставив его охватывать все окно (за исключением заполнения, которое я дал элементу body в этом примере):

     #nav {
маржа: 0;
заполнение: 0;
background:#808259 url(nav_bg.jpg) 0 0 Repeat-x;
плыть налево;
ширина:100%;
}

    Посмотреть шаг 7.

    Чтобы визуально отделить ссылки друг от друга, я добавил к ссылкам правую границу. Затем, чтобы дать первой ссылке левую границу, я использовал :first-child псевдокласс для применения правила только к ссылке в самом первом элементе списка. Я также добавил верхнюю и нижнюю границы к элементу ul :

     #nav {
маржа: 0;
заполнение: 0;
background:#808259 url(nav_bg.jpg) 0 0 Repeat-x;
плыть налево;
ширина:100%;
граница: 1px сплошная #42432d;
ширина границы: 1px 0;
}
#навигация:ссылка,
#nav a:посетил {
цвет:#000;
фон:#b2b580;
заполнение: 20px 40px 4px 10px;
плыть налево;
ширина:авто;
граница справа: 1px сплошная #42432d;
}
#nav li:first-child a {
граница слева: 1px сплошная #42432d;
}

    Псевдокласс :first-child не распознается Internet Explorer для Windows, поэтому первая ссылка не будет иметь левой границы в этом браузере. В данном случае это не является серьезной проблемой, поэтому я оставил все как есть. Если это действительно важно для вас, вам нужно добавить класс к первому элементу списка (или ссылке в нем), а затем использовать его, чтобы придать ссылке левую границу.

    Посмотреть шаг 8.

    Далее я изменил способ отображения текста ссылки, удалив подчеркивание, сделав текст полужирным, указав размер шрифта, высоту строки и другое семейство шрифтов, сделав текст прописными и добавив немного тени. . Тень создается с помощью text-shadow свойство, свойство CSS3, которое в настоящее время поддерживается только Safari и OmniWeb:

     #nav a:ссылка,
#nav a:посетил {
цвет:#000;
фон:#b2b580;
заполнение: 20px 40px 4px 10px;
плыть налево;
ширина:авто;
граница справа: 1px сплошная #42432d;
текстовое оформление: нет;
шрифт: жирный 1em/1em Arial, Helvetica, без засечек;
преобразование текста: верхний регистр;
тень текста: 2px 2px 2px #555;
}

    Просмотр шага 9.

    Чтобы обеспечить визуальную обратную связь при наведении курсора на ссылку или переходе по ней, я дал их :hover и :focus указывает разные цвета текста и фона:

     #nav a:hover,
#навигация:фокус {
цвет:#fff;
фон:#727454;
}

    Просмотр шага 10.

    На последнем этапе я добавил правила, благодаря которым выбранная ссылка будет выглядеть иначе, чем другие, чтобы показывать посетителям, где они находятся на сайте.

    Если вы раньше не видели пример указания атрибута id для элемента body для изменения стиля «текущей» вкладки навигации, это то, что делают первые два правила. В примерах, связанных с этой статьей, я установил id элемента body на « home », что делает вкладку «Home» текущей. Изменение его на « about » сделает вкладку «О программе» текущей и так далее.

    Я также сделал так, чтобы выбранная ссылка оставалась неизменной при наведении на нее курсора. Можно возразить, что текущий пункт меню вообще не должен быть ссылкой. В данном случае я решил оставить ссылку в разметке и использовать CSS для удаления визуальной обратной связи при наведении.

    Чтобы дать визуальную обратную связь при нажатии на одну из ссылок, я дал :активно состояние ссылок в том же стиле, что и у выбранной ссылки:

     #дом #нав-дом а,
#о #нав-о,
#архив #nav-архив а,
#lab #nav-lab а,
#отзывы #nav-отзывы a,
#contact #nav-контакт a {
фон:#e35a00;
цвет:#fff;
тень текста: нет;
}
#home #nav-home a:hover,
#про #нав-про:наведите,
#archive #nav-archive a:hover,
#lab #nav-lab a: наведите курсор,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
фон:#e35a00;
}
#nav a:активный {
фон:#e35a00;
цвет:#fff;
}

    Просмотр Шаг 11, готовое меню навигации.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *