Товаров: 0 (0р.)

Меню в виде в css: Горизонтальное меню для сайта

Содержание

создайте переключающее меню в виде вертикального списка



Я пытаюсь создать меню переключения, у меня есть меню, которое расширяется, когда я нажимаю на него, и закрывается, когда я нажимаю на него снова.

HTML код для этого есть

<label for="menu-toggle"><img src="icons/navicon.png"></label>
<input type="checkbox"/>
    <ul>
        <li><a href="#">First link</a></li>
        <li><a href="#">Second link</a></li>
        <li><a href="#">Third link</a></li>
    </ul>

css является

<style>
label
    {
        cursor: pointer;
    }
#menu-toggle 
    {
        display: none; /* hide the checkbox */
    }
#menu 
    {
        display: none;
    }
#menu-toggle:checked + #menu 
    {
        display: block;
    }
</style>

тумблер выглядит так

когда я нажимаю на изображение из 3 линий оно выглядит так

Я хочу, чтобы при нажатии на изображение из 3 строк меню отображалось в вертикальном списке внутри блока с белым фоном . что-то вроде этого

может ли кто-нибудь сказать мне, как я могу это сделать

javascript html css
Поделиться Источник lyra     21 мая 2015 в 05:35

3 ответа

  • Разработка вертикального меню «UL»

    Я разрабатываю меню UL. Это вертикальное меню. Каждая ссылка этого вертикального меню имеет подменю. Элементы меню имеют событие onmouseout, которое удаляет подменю. Облицовочные проблемы чата: Когда я пытаюсь получить доступ к подменю, событие onmouseout отправляется до того, как я попадаю в…

  • Javascript функция отображения элементов массива в виде вертикального списка?

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


0

изображения здесь не видны. но что вы можете сделать, так это css для цвета фона и тега ширины для блока.

что-то вроде

#menu { display: none; width: 30%; background-color:green;

Поделиться BeardAspirant     21 мая 2015 в 05:49


0

Обновление после CSS:

#menu {
    display: none;
    list-style-type: none;
    border-radius: 5px;
    background-color: lightgray;
    padding-left: 5px;
}

#menu-toggle:checked + #menu {
    display: block;
}

li a {
    color: #000;
    text-decoration: none;   
}

#menu li {
    padding: 10px;
    border-bottom: 1px solid #000;    
    margin-left: 5px;
    margin-right: 5px;
}

DEMO

Поделиться Parkash Kumar     21 мая 2015 в 06:00


0

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

<style>
label
    {
        cursor: pointer;
    }

 a {
    text-decoration: none;
    color: #9A9494;
   }

 li { 
   border-bottom:#ccc solid 1px; /* This is the divider line in between the list items */    
    }

#menu-toggle
    {
        display: none; /* hide the checkbox */
    }

#menu 
    {
        display: none;             
    }

#menu-toggle:checked + #menu 
    {
        display: block;
    }

 .xyz{
  
  padding-bottom: 10px;
  font-size: 30px;
  background-color: #fff;  
   }
   
 .container{
  background-color: #ccc;
  width:15%;
  border-radius: 10px;
 }  

</style>
 
<!DOCTYPE html>
<html>
<head>
 <title>DropDown</title> 
</head>
<body>

<label for="menu-toggle"><img src="icons/navicon.png"></label>
<div>
<input type="checkbox"/>
   
    <ul >
    
        <li ><a href="#" >First link</a></li>  
        <li><a href="#">Second link</a></li> 
        <li><a href="#">Third link</a></li>

    </ul>
   
</div>    
</body>
</html>

Я объединил таблицу стилей с html… Приятно было помочь тебе … 🙂

Поделиться Aditya Singh Parmar     21 мая 2015 в 06:52

Похожие вопросы:


Почему это переключающее меню не работает?

Я нашел переключающее меню, и оно выглядит очень красиво,но когда я попробовал его, оно сработало не так,как я ожидал, потому что он не переключается: Вот оригинальный скрипт нажмите кнопку Даже…


jQuery проблема вертикального меню

Итак, у меня есть простой неупорядоченный список: <ul id=nav> <li> <span>Group 1 »</span> <ul> <!— list items —> </ul> </li> <li>…


Отображение меню в виде списка

Я создаю новую тему, и меню отображается в виде списка с элементами, а я этого не хочу. Здесь у вас есть ссылка на сайт . Это мой код css .links { margin-left:250px; list-style:none; } Спасибо.


Разработка вертикального меню «UL»

Я разрабатываю меню UL. Это вертикальное меню. Каждая ссылка этого вертикального меню имеет подменю. Элементы меню имеют событие onmouseout, которое удаляет подменю. Облицовочные проблемы чата:…


Javascript функция отображения элементов массива в виде вертикального списка?

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


Android меню опций, отображаемое в виде списка

Я создал меню, которое активируется при нажатии кнопки Меню на устройстве, однако оно отображается в виде списка Мой код in res/menu/menu.xml выглядит следующим образом: <?xml version=1.0…


сделайте так, чтобы пользователи отображались в виде горизонтального списка в Joomla 2.5

Я включил модуль whosonline на своем веб-сайте, и пользователи отображаются в виде вертикального списка . Как сделать так, чтобы пользователи отображались в виде горизонтального списка?


Задержка в меню переключения начальной загрузки

Я построил строку меню с помощью bootstrap. В адаптивном режиме, когда активировано переключающее меню, элементы списка меню появляются быстро, в то время как фоновый контейнер появляется с…


пользовательский стиль вертикального меню kendo Angular?

Я использую компонент Kendo UI в своем текущем проекте Angular. в Vertical Menu я не могу изменить стиль на каком-то другом уровне (дети). как я могу изменить стиль родителей и детей в меню? У…


Android: отображение меню в виде списка

В моем приложении я хочу отобразить меню в виде списка. У меня уже есть существующий файл меню XML, который я использую для нижней навигации, но я поместил несколько пунктов меню в отдельное меню…

Создание интересного меню с использованием CSS3

Не смотря на то, что не совсем понятно, для чего в CSS3 была добавлена анимация, у этого развивающегося стандарта есть несколько очень приятных элементов, которые были добавлены в CSS и которыми мы сегодня воспользуемся. Мы создадим интересное меню в виде вкладок с использованием CSS3.

 

 

Этот урок использует следующие свойства CSS и CSS3:

  • Цвет с прозрачностью
  • Прозрачность
  • Тень текста
  • Псевдоселекторы
  • Закругленные углы
  • Градиенты
  • Тень блока

Демонстрация работы – Скачать исходный код

Как вы могли догадаться, этот пример будет работать только в браузерах, поддерживающих эти свойства CSS3. Он полностью функционирует в браузерах Safari и Firefox, но не был проверен в других браузерах. Теперь давайте рассмотрим, как вы можете создать подобное интересное меню сами.

HTML 

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

<div>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Register">Register</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
<div>
<h4>Main content header</h4>
<p>Main content</p>
</div>

Здесь нет ничего интересного или сложного, так что мы советуем обратить внимание на CSS.

Простой CSS

Сначала нам понадобится добавить основные стили для HTML, который мы только что создали. Мы хотим показать меню в одну строку, и нам как обычно не нужны маркеры списка. Вот код, который нам нужен:

#menu { margin:40px 0 0 150px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; float:left; margin-bottom:20px; }

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

Цвет с прозрачностью, прозрачность и тень текста 

Теперь мы воспользуемся некоторыми свойствами CSS3, чтобы это простое меню стало выглядеть красиво. Мы выберем элементы ссылок в структуре меню, и применим к ним стили. CSS3 поддерживает свойство RGBA() для выбора цвета. Четвертый параметр настраивает прозрачность элемента. Мы так же используем свойство text-shadow, чтобы придать тексту эффект внешнего свечения.

/* Цвет фона задан как цвет с прозрачностью, со значением прозрачности 0.3, также используется тень текста */
#menu ul li a { padding:20px; background: rgba(255,138,30,0.3); text-decoration: none; font: bold 14px Helvetica, Sans-Serif; letter-spacing: -1px; color: #402e16;
text-shadow: #eee 0px 0px 2px; }

Теперь у нас уже есть что-то, что интересно выглядит:

Выглядит уже довольно изящно, не так ли? Но мы еще не закончили — переходим к следующему шагу.

Псевдоселекторы и закругленные углы 

Теперь, когда у нас есть меню, мы будем его улучшать. У первой ссылки будет закругленный верхний левый угол, а у последней ссылки будет закругленный верхний правый угол. Это усилит эффект от вкладок.

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

/* псевдоселектор :first-child с закругленным верхним левым углом */
#menu ul li:first-child a { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius:12px; }
/* псевдоселектор :last-child с закругленным верхним правым углом */
#menu ul li:last-child a { -moz-border-radius-topright: 12px; -webkit-border-top-right-radius:12px; }

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

Выглядит все лучше с каждым шагом. Но мы не остановимся на этом, следующим шагом мы сделаем меню еще красивее.

Градиент и тень блока 

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

Состояние .active  не очень интересное. У него такой же цвет, как и у обычного состояния, но с меньшим значением прозрачности — 0.8. Состояние :hover будет чуть более сложным.

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

/* Выделенное состояние показано с помощью линейного градиента, изменения значения прозрачности до 0.9 и очень тонкой серой тенью сверху */
#menu ul li a:hover { -moz-box-shadow: 0 -5px 10px #777; -webkit-box-shadow: 0 -5px 10px #777;
background: -webkit-gradient(
linear, right bottom, left top, color-stop(0, rgb(237,227,112)), color-stop(0.72, rgb(255,173,10))) !important;
background: -moz-linear-gradient(
right bottom, rgb(237,227,112) 0%, rgb(255,173,10) 72%) !important;
background-color:rgb(255,173,10) !important;
-moz-opacity:.90; filter:alpha(opacity=90); opacity:.90; }
/* Другой фон с цветом с прозрачностью, теперь значение прозрачности — 0,8 */
#menu ul li a.active { background: rgba(255,138,30,0.8) !important; }

Со всем этим кодом CSS наше меню теперь выглядит так, один — активный, другой — выделенный эффекты:

Больше стилей 

Так как мы закончили меню с использованием CSS3, мы можем задать стили идентификатору main. Мы не будем объяснять этот код, так как все применяемые эффекты также используются в меню.

/* Основное содержимое с фоном, заданным как цвет с прозрачностью, того же цвета, что и активная вкладка, и три закругленных угла */
#main { clear:both; background: rgba(255,138,30,0.8); width:500px; margin-left:150px;
-moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px;
-webkit-border-top-right-radius:12px; -webkit-border-bottom-right-radius:12px; -webkit-border-bottom-left-radius:12px;}
/* Заголовок с тенью текста */
#main h4 { text-transform:uppercase; padding:20px 0 0 20px; color:#eee; text-shadow: #000 0px 0px 2px; }
#main p { padding-bottom:20px; color:#ddd; }

С помощью этого кода наша страница в итоге будет выглядеть так:

И мы закончили!

Заключение 

Мы добавили небольшой скрипт jQuery, чтобы как бы переключаться между страницами, но, конечно, это должно происходить на стороне сервера и показывать текущую страницу. Мы считаем, что у CSS3 есть очень приятные свойства, часть которых мы использовали интересным образом в этом уроке. К сожалению, до сих пор не все браузеры полностью поддерживают все свойства CSS3, так что, применяя их, нам нужно проверять и при необходимости использовать альтернативные варианты.

Демонстрация работы – Скачать исходный код

Автор урока Marco Kuiper

Перевод — Дежурка

Смотрите также:

Меню, пожалуйста | WebReference

Другой популярной частью сайтов является меню. В основном, это список элементов, которые представляют собой простые ссылки, ведущие на другие места сайта. Давайте реализуем меню! Мы начнём со следующего кода.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Меню</title>
    <link rel="stylesheet" href="main.css" media="screen">
  </head>
  <body>
    <nav>
      <ul>
        <li>
          <a href="index.html">Главная</a>
        </li>
        <li>
          <a href="training.html">Обучение</a>
        </li>
        <li>
          <a href="conferences.html">Конференции</a>
        </li>
        <li>
          <a href="about.html">О нас</a>
        </li>
      </ul>
    </nav>
  </body>
</html>

Наше меню будет состоять из четырёх элементов:

  • Главная
  • Обучение
  • Конференции
  • О нас

Мы хотим, чтобы оно выглядело так.

Вы могли заметить, что мы добавили новые теги <nav>, <ul> и <li>.

<nav> используется для определения всех видов навигационных функций на сайтах, которые содержат ссылки на внутреннюю или внешнюю информацию. Размещение <nav> в коде говорит «всё внутри <nav> будет использоваться для навигации по сайту».

В <nav> мы вставили тег <ul> с несколькими тегами <li>. Тег <ul> представляет собой «неупорядоченный список» (как маркированный список), а теги <li> представляют каждый отдельный компонент этого списка (маркер). При создании сайтов неупорядоченный список часто будет наиболее разумным выбором, когда дело доходит до составления страницы с меню. На самом деле, меню это вариант списка ссылок, который был создан без заданного правила относительно порядка его элементов.

С помощью кода выше, который пока не завершён, наш список должен выглядеть следующим образом.

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

Теперь попробуем изготовить более стильное меню через наш код CSS.

Как правило, мы начинаем с самого общего тега в HTML-коде, верно? В нашем случае код начинается с <nav>, поскольку он отвечает за наше меню. С этим тегом мало что можно сделать, поскольку данный тег напрямую не меняет внешний вид маркированного списка.

Следующий тег <ul> начинает список. Мы хотим, чтобы наш список выглядел немного иначе, чем по умолчанию. Самое главное — добавить новый фон.

nav ul {
  background-color: PaleVioletRed;
}

Для цвета фона мы выбрали название PaleVioletRed. Перезагрузка страницы показывает наши изменения в результате добавления этого кода.

На самом деле мы применили цвет фона ко всем элементам <ul>. Это потому, что мы применяем его к тегам <nav> и <ul> с помощью следующего селектора.

nav ul {}

Теперь мы хотим избавиться от круглых чёрных точек в этом списке и сделать его более похожим на меню. Мы можем скрыть их благодаря свойству list-style, как показано ниже.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
}

Установка list-style в значение none делает список без характерных маркеров.

Это выглядит гораздо лучше.

Широкая область цвета удивительно большая. Мы хотим немного урезать её, используя тот же пример, что с рамкой вокруг изображения (padding).

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
}

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

Теперь пришло время для работы с размерами. Наша навигация должна быть 200 пикселей в ширину.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
}

В конце концов, мы добавим border к списку точно как на картинке. Это будет выражаться в сплошной линии толщиной 1 пиксель розового цвета.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}

Вот результат и это выглядит здорово!

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

nav ul li {}

Этот код ищет <nav>, затем внутри <ul> и <li>. Кажется, что каждому элементу в списке нужна своя граница.

nav ul li {
  border-bottom: 1px solid MediumVioletRed;
}

С помощью этого кода мы добавили border-bottom, так что каждый элемент <li> теперь имеет такой же тип границы как у внешней рамки, но только в нижней части текста.

В настоящее время наше меню должно выглядеть так.

Теперь у нас две проблемы. Первая — пространство слева между границей и элементами списка. Изменим его, используя нашего знакомого padding.

nav ul li {
  border-bottom: 1px solid MediumVioletRed;
  padding: 5px;
}

Это гораздо лучше, правда? Мы добавили padding шириной 5 пикселей между текстом и границами.

Наша вторая проблема менее заметна, но всё ещё существует в виде двойной линии в нижней части нашего меню. Это потому, что наша граница для меню добавилась к нашей границе для последнего элемента, когда мы вставили bottom-border. Помните, что мы использовали код в <ul> из <nav> для указания границы.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}

Также вспомним, что мы устанавливаем list-style в none так, что маркеры или любые другие знаки не появляются.

list-style: none;

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

Проделаем то же самое, только с помощью свойства bottom-border и установив для него значение none. Однако мы хотим нацелиться только на последний пункт меню, чтобы его нижняя граница не конфликтовала с большой нижней границей.

nav ul li:last-child {
  border-bottom: none;
}

Результат применения этого кода сверхэффективен.

Двойная граница исчезла, всё потому, что мы нашли <ul> в <nav>, а затем выбрали в нём последний <li> и отключили нижнюю границу. Псевдо-селектор last-child указывает на последний элемент списка.

nav ul li:last-child {}

Этот селектор можно перевести следующим образом:

«найдите <nav>, затем <ul> и примените все изменения к последнему элементу <li>».

Последнее, что нам нужно сделать, это настроить текст в ссылках. Вы можете создать ссылки в HTML следующим образом.

<a href="url">Набранный здесь текст ведёт на указанный веб-адрес</a>

Мы используем тег <a> вместе с атрибутом href. Значением этого атрибута должен быть адрес, на который вы хотите переместить пользователя, если он щёлкает по ссылке. В нашем примере у нас есть четыре ссылки. Одна из них выглядит так.

<a href="training.html">Обучение</a>

Это значит, что браузер будет показывать слово «Обучение», на которое можно щёлкнуть и затем браузер отправится на страницу, которая была сохранена в файле training.html.

Зная, что этот тег является частью кода HTML, мы можем создать специальный селектор, который ищет именно этот тег.

nav ul li a {}

Вуаля!

Давайте добавим новые свойства к нашему новому селектору. Прежде всего, изменим цвет шрифта на белый.

nav ul li a {
  color: white;
}

Обновление браузера показывает наши новые изменения.

Отлично! Теперь у нас есть ссылки белого цвета. Изменим некоторые акценты. Браузер устанавливает выделение в CSS для всех ссылок в виде text-decoration: underline. Мы хотим изменить это значение, как мы уже делали это раньше со значением none.

nav ul li a {
  color: white;
  text-decoration: none;
}

Красота! Мы завершили желаемое меню.

В качестве дополнительного замечания, если вы работаете с большим количеством ссылок, то, возможно, помните, что на многих страницах при наведении на ссылку текст подчёркивается.

Проверьте эту ссылку, которую я написал в своём Twitter (без подчёркивания).

При наведении указателя мыши на эту ссылку происходит нечто интересное, о чём многие интернет-пользователи хорошо знают — текст становится подчёркнутым.

Попробуем сделать нечто подобное в нашем меню, что позволит ссылке выделиться при наведении на неё. Мы будем использовать псевдо-селектор под названием hover.

nav ul li a:hover {
  text-decoration: underline;
}

В этот раз мы добавили его к ссылкам <a>. Это означает, что при наведении указателя мыши на ссылку будет применяться эффект. Это также относится и к наведению на другие элементы.

div:hover
li:hover
img:hover

Эффект виден ниже, когда мы наводим курсор мыши на ссылку «Конференции».

В итоге, окончательный код CSS должен выглядеть так.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}
  
nav ul li {
  border-bottom: 1px solid MediumVioletRed;
  padding: 5px;
}

nav ul li:last-child {
  border-bottom: 0;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

Недавно появившиеся псевдо-селекторы (last-child и hover) будут полезны в будущем.

В этой главе вы узнали, как использовать ссылки и вставлять их в HTML-документы. На данный момент мы использовали только адреса, ведущие на локальные файлы (например, training.html), сохранённые на вашем компьютере, но вы также можете использовать ссылки, указывающие на внешние сайты в Интернете, вроде этого.

<a href="http://twitter.com/varjs">Мой Twitter</a>

Этот код в браузере будет отображаться как Мой Twitter. Обратите внимание, что адрес содержит http:// в самом начале. Это правило говорит, что каждая ссылка используемая в HTML-документе и ведущая на другой сайт, должна быть с префиксом http://. В противном случае, ваши ссылки не будут перенаправлять пользователей в нужное место.

Автор и редакторы

Автор: Дамиан Вельгошик

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Элемент секции навигации — HTML

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

Категории контентаПотоковый контент, секционный контент, явный контент.
Разрешённый контентПотоковый контент.
Опускание теговНет. Как начальный, так и конечный тег являются обязательными.
Нет, открывающий и закрывающий теги обязательны.
Разрешённый родительский элементЛюбой элемент, содержащий потоковый контент.
Разрешённые ARIA-атрибутыНет
DOM интерфейсHTMLElement
  • Не обязательно все ссылки должны быть обёрнуты в <nav>. <nav> следует использовать лишь для главных навигационных блоков. Например, <footer>  часто содержит список ссылок, которые не стоит оборачивать в <nav> .
  • Документ может содержать несколько <nav> элементов. Например, один для навигации по сайту, второй для навигации по странице.
  • Пользовательские агенты, такие как устройства чтения с экрана, предназначенные для людей с плохим зрением, могут использовать этот элемент, чтобы определить следует ли пускать рендеринг содержимого навигации.

В данном примере, блок <nav> содержит ненумерованный список (<ul>) ссылок. С помощью CSS данный блок можно использовать как сайдбар, навигационную колонку или выпадающее меню.

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

BCD tables only load in the browser

  • Другие секционные элементы: <body>, <article>, <section>, <aside>, <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US), <hgroup>, <header>, <footer>, <address>;
  • Использование разделов и создание структуры HTML документа.

Разноплановые и необычные CSS и SVG меню — OLDESIGN.RU

CSS Only Dropdowns With The Checkbox

Выпадающее меню на чистом CSS. Простейшая техника которая вращается вокруг флажка элемента HTML и использования селекторов CSS без единой строчки JavaScript кода.


 

Генератор кругового меню на SVG

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

 

Радиальное меню от haiqing wang

Полукруглое сворачивающееся меню без использования JavaScript.
 

 

Многоуровневое радиальное меню на CSS от Adrian Roselli

 Анимированное меню в виде кругов, выезжающее с верхего правого угла сайта.
 

 

Radial HTML menu inspired by Path for iOS and Android

Knock-off меню в стиле iOS и Android приложении. Прекрасно работает в браузерах на основе WebKit (настольных и iOS) и Firefox.

 

Меню для сайта в виде колеса