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

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 {
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 и переименовываем в .

#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

— HTML | MDN

Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах.

HTML-элемент <menu> представляет группу команд, которые пользователь может выполнить или активировать. Он включает как меню-списки, которые могут отображаться в верхней части экрана, так и контекстные меню, например, такие, что могут появиться под кнопкой после нажатия.

Категории контента (en-US)	Flow content (en-US). If the element’s children include at least one <li> element: Palpable content.
Разрешённое содержимое	If the element is in the list menu state: flow content (en-US), or alternatively, zero or more occurrences of <li>, <script>, and <template>. (list menu is the default state, unless the parent element is a <menu> in the context menu state.)If the element is in the context menu state: zero or more occurrences, in any order, of <menu> (context menu state only), <menuitem> (en-US), <hr>, <script>, and <template>.
Пропуск тега	Нет, открывающий и закрывающий теги обязательны.
Разрешённые родительские элементы	Любой элемент, который поддерживает основной поток (en-US).
Implicit ARIA role	list
Разрешённые роли ARIA	directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar или tree
DOM-интерфейс	HTMLMenuElement (en-US)

К этому элементу применимы глобальные атрибуты.

label Deprecated

The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a <menu> in the context menu state.

type

This attribute indicates the kind of menu being declared, and can be one of two values.* context Deprecated : Indicates the popup menu state, which represents a group of commands activated through another element. This might be as a button menu referenced by a menu attribute of a <button> element, or as context menu for an element with a contextmenu (en-US) attribute. This value is the default if the attribute is missing and the parent element is also a <menu> element.

• toolbar: Indicates the toolbar state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of <li> elements, or, if the element has no <li> element children, flow content (en-US) describing available commands. This value is the default if the attribute is missing.

The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, whilst <menu> is intended for interactive items, to act on.

An HTML menu can be used to create context menus (typically activated by right-clicking another element) or toolbars.

Context menus consist of a <menu> element which contains <menuitem> (en-US) elements for each selectable option in the menu, <menu> elements for submenus within the menu, and <hr> elements for separator lines to break up the menu’s content into sections. Context menus are then attached to the element they’re activated from using either the associated element’s contextmenu attribute or, for button-activated menus attached to <button> elements, the menu attribute.

Toolbar menus consist of a <menu> element whose content is described in one of two ways: either as an unordered list of items represented by <li> elements (each representing a command or option the user can utilize), or (if there are no <li> elements), flow content (en-US) describing the available commands and options.

This element was deprecated in HTML4, but reintroduced in HTML5.1 and the HTML living standard. This document describes the current Firefox implementation. Type ‘list’ is likely to change to ‘toolbar’ according to HTML5.1.

Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

HTML

<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">
  Right-click to see the adjusted context menu
</div>
<menu type="context">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr/>
  <menuitem>Separated action</menuitem>
</menu>

CSS

div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}

Result

Предупреждение: Menu buttons haven’t been implemented in any known browsers yet. The type attribute on the <menu> element is now obsolete.

Предупреждение: <menuitem> (en-US) element is obsolete.

HTML

<!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="popup-menu">
  Dropdown
</button>
<menu type="context">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr/>
  <menuitem>Separated action</menuitem>
</menu>

Result

Toolbar

Предупреждение: Toolbar menus haven’t been implemented in any known browsers yet.

HTML

<!-- A context menu for a simple editor,
   - containing two menu buttons. -->
<menu type="toolbar">
  <li>
    <button type="menu" menu="file-menu">File</button>
    <menu type="context">
      <menuitem label="New...">
      <menuitem label="Save...">
    </menu>
  </li>
  <li>
    <button type="menu" menu="edit-menu">Edit</button>
    <menu type="context">
      <menuitem label="Cut...">
      <menuitem label="Copy...">
      <menuitem label="Paste...">
    </menu>
  </li>
</menu>

Result

Specification	Status	Comment
HTML Living Standard Определение ‘<menu>’ в этой спецификации.	Живой стандарт	No change from latest snapshot, Unknown
HTML 5.1 Определение ‘<menu>’ в этой спецификации.	Рекомендация

BCD tables only load in the browser

 

    
Главная
    
О нас
    
Часто задаваемые вопросы
    
Контакты
 

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

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

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

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

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

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