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

Содержание

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

3203 Посещений

Откройте HTML-документ и добавьте в него блок <div> с простым нумерованным списком с тем отличием, что одному из пунктов нужно присвоить id:

<div>

<ul>

<li><a href=»#»>Пункт 1</a></li>

<li><a href=»#»>Пункт 2</a></li>

<li><a href=»#»>Пункт 3</a></li>

<li><a href=»#»>Пункт 4</a></li>

<li><a href=»#»>Пункт 5</a></li>

</ul>

</div>

Обратите внимание на то, что решетка (#) ー URL-адрес ссылки. Следующая задача ー сделать так, чтобы пункты меню располагались не один над другим, а рядом. Для этого нужно создать правило CSS:

#menu ul li {

display: inline;

}

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

#menu ul {

border-bottom:2px solid #000000;

margin-left:0;

padding:4px 0;

}

Создадим “прямоугольники”, в которых будут располагаться пункты меню и зададим внутреннее расстояние:

#menu ul li a {

text-decoration:none;

margin-left:3px;

border:1px solid #000000;

padding: 3px 4px;

border-bottom:0;

background:#CEDEFF;

}

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

#menu ul li a:link {

color:#493;

}

#menu ul li a:visited {

color:#647;

}

#menu ul li a:hover {

color:#000;

background:#6699FF;

border-color:#227

}

Укажите вид пункта текущей страницы и сохраните изменения:

#menu ul li a#nowopen {

background:#fff;

border-bottom: 1px solid #fff;

}

Если вы хотите выровнять меню по центру, добавьте в правило CSS следующее:

#menu {

margin:0 25% 0 25%;

}

Меню в браузере:

HTML/CSS. Как создать вертикальное и горизонтальное меню

Эта инструкция продемонстрирует, как создать вертикальное и горизонтальное меню используя стили CSS. Перед началом убедитесь, что вы знакомы с HTML тэгами ненумерованного списка. Кроме того, посмотрите инструкцию как создать меню в HTML.

Для начала создадим HTML меню на основе ненумерованного списка:


<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>

Теперь необходимо создать CSS файл и подключить его к странице:


  <link href="style.css" rel="stylesheet" type="text/css" />

Убедитесь, что код подключающий CSS находится в разделе <head> вашего документа.

Вы можете использовать и inline стили.


	<style type="text/css">
		...тут расположите ваши стили CSS...
	</style>

В результате у вас должен получиться следующий код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Partners</a></li>
	<li><a href="#">Contacts</a></li>
</ul>

</body>
</html>

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

Для создания горизонтального меню понадобятся дополнительные изменения в HTML и CSS.

В первую очередь добавьте класс в список. Замените <ul> на <ul>

Теперь давайте сделаем меню горизонтальным с помощью CSS файла. У несортированного списка есть заданные по умолчанию параметры margin и padding. Нужно их обнулить:


ul.horizontal{
margin:0;
padding:0;
}

Теперь сделаем список горизонтальным:


ul.horizontal li{
display:block;
float:left;
padding:0 10px;
}

Мы добавили значения padding по горизонтали для того, что бы элементы не слиплись. Теперь меню готово и осталось только добавить в него ссылки, фон и отредактировать цвет шрифта.

Горизонтальное меню для сайта на HTML и CSS

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

Как я и говорил, структура меню в обоих способах одинакова, меняется только id=menu_номер-примера:

<div>
 <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
      <li><a href="#">Пункт 6</a></li>
      <li><a href="#">Пункт 7</a></li>
  </ul>
</div>

Первый способ

Стандартное горизонтальное HTML меню, которое можно увидеть на многих сайтах. Первым делом добавляем HTML структуру меню. Она будет состоять из «оберточного» дива с id=menu_1, в который кладем наш ненумерованный HTML список. Собственно, можно обойтись и без тега div (чем меньше тегов – тем лучше и все такое…), дописав наш id непосредственно к ul, но это будет зависеть от вашего шаблона. Иногда без «оберток» вообще ничего путного не сверстаешь.

<div>
    <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
      <li><a href="#">Пункт 6</a></li>
      <li><a href="#">Пункт 7</a></li>
  </ul>
</div>

Далее добавляем CSS стили меню:

#menu_1{
    background-color: #69c;
}
    #menu_1 ul{
     list-style: none;
       margin: 0;
      padding: 0;
 }
   #menu_1 ul:after{
       content: "";
      display: block;
     clear: both;
        height: 0;
  }
       #menu_1 li{
         float: left;
        }
           #menu_1 li a{
               display: block;
             height: 50px;
               line-height: 50px;
              padding: 0 20px;
                background-color: #69c;
             color: #fff;
                text-transform: uppercase;
              text-decoration: none;
              cursor: pointer;
            }
           #menu_1 li a:hover{
             background-color: #369;
         }

Тут поподробнее:

1. Первым делом задаём фон «обёртки» тем же цветом, что и пункты нашего меню, иначе будем наблюдать «дребезг» в несколько пикселей при отрисовке страницы разными браузерами, куда будет заползать цвет «верхних» элементов, если таковые есть, или белый цвет body, если не задан другой;

2. Убираем маркеры у списка ul и обнуляем внешние и внутренние отступы;

3. Запрещаем обтекание, подробнее как сделать читаем в ранее написанной статье, это необходимое действие, так как для пунктов меню будет использоваться свойство float;

4. Используем float со значением left для элементов li, чтобы выстроить их в один ряд;

5. Для ссылок, указываем стили. Главное указать display со значением block чтобы ссылки стали блочными и заняли всё допустимое место внутри элемента li;

6. Готово.

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

HTML без изменений, для примера меняем id=menu_2.

Основной CSS остается практически неизменным, необходимый нам эффект заключен в следующих строках:

#menu_2 ul{
   list-style: none;
   margin: 0;
  padding: 0;
 text-align: justify;
    overflow: hidden;
   height: 50px;
}
#menu_2 ul:after{
 content: "";
  width: 100%;
    display: inline-block;
}
 #menu_2 li{
     display: inline-block;
  }

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

Второй способ

Второй способ реализации горизонтального меню заключается в превращении нашего списка в таблицу. Да да, мы не будет использовать теги table и иже с ними. Почему? Как писал выше – исторически сложившийся факт, HTML таблица не используется для построения меню, связано это, в первую очередь, с неудобством прикручивания такого меню к движку. А уж если попытаться сделать и выпадающие вкладки в пунктах, то вы получите такого «монстра», что нагнете всю дальнейшую структуру страницы в самом её начале.

Так вот, для реализации нам нужны стандартные свойства таблицы, поэтому мы воспользуемся нехитрыми манипуляциями с CSS стилями: элементу ul задаем свойство display со значением table а тегам li display — table-cell и, вуаля, перед нами уже горизонтальное меню в виде таблицы со всеми вытекающими свойствами.

Смотрим на пример с id=menu_3.

CSS, опять же, стандартный, отличаются только эти строки:

#menu_3 ul{
    list-style: none;
   margin: 0;
  padding: 0;
 display: table;
}
    #menu_3 li{
     display: table-cell;
    }

Как и в первом способе, пункты меню не будут растянуты на всю ширину нашего оберточного дива. Чтобы их растянуть следует дописать свойства table-layout — fixed и width — 100% к элементу ul. В этом случае ul растянутся на всю ширину, а элементы li станут одной ширины (смотрим пример с id=menu_4).

Вот такое вот горизонтальное меню, полностью валидное и без лишних свойств и тегов. Скачиваем архив с примером и пользуемся!

Как сделать меню навигации в HTML и CSS для сайта

Автор статьи: admin

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

Также, перед тем как начать читать эту статью, рекомендуется сначала прочитать наш учебник по HTML и учебник по CSS.

Как сделать вертикальное меню:

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

<h4>Header</h4>

</header>

<main>

<nav>

<ul>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>Новости</a></li>

<li><a href=»#»>Продукты</a></li>

</ul>

</nav>

<div>

<h2>Content</h2>

</div>

</main>

Тут всё понятно, единственное, что смущает, это тег <nav>, он нужен для обозначения, что внутри него будет меню навигации.

Примечание:

Тег <nav> нужно использовать для навигации, что бы лучше индексировался ваш сайт.

Теперь добавим в тег <nav> список <ul>, что бы сделать меню.

<ul>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>Новости</a></li>

<li><a href=»#»>Продукты</a></li>

</ul>

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

Как видите всё работает не так как нам надо, теперь с помощью CSS сделаем так, что бы меню стало с левого бока от контента.

header {

border: black 2px solid;

}

main nav {

display: inline-block;

width: 200px;

border: black 2px solid;

margin-right: 10px;

padding: 10px 20px;

float: left;

}

main nav ul {

padding: 0;

}

main nav ul li {

list-style-type: none;

}

main .content {

display: inline-block;

width: 500px;

border: black 2px solid;

float: left;

}

Как можете заметить для тега <nav> и <div> с классом «content», используем свойство display со значение «inline-block», то есть эти два блока принимают свойства как строчных, так и блочных элементов.

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

Примечание:

В современных проектах не используется блочно строчные элементы и float, сейчас используются FlexBox или Grid, но новичкам это стоит знать, поэтому в статье используются именно это.

Вот результат.

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

Как сделать горизонтальное меню:

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

Сначала надо внести изменения в HTML, мы просто перетащим навигацию в header.

<h4>Header</h4>

<nav>

<ul>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>Новости</a></li>

<li><a href=»#»>Продукты</a></li>

</ul>

</nav>

</header>

<main>

<div>

<h2>Content</h2>

</div>

</main>

Просто перенесли всё навигацию на верх, теперь изменим CSS.

header {

border: black 2px solid;

}

header nav {

width: 600px;

border: black 2px solid;

margin-right: 10px;

padding: 10px 20px;

}

header nav ul {

display: flex;

justify-content: space-around;

padding: 0;

}

header nav ul li {

list-style-type: none;

}

main .content {

border: black 2px solid;

}

Тут самое важное, это то, что для работы с FlexBox, нужно сделать значение свойства display, «flex», что и сделали для тега <ul>.

Дальше, после этого идёт свойство justify-content, которое нужно для определения пространства между дочерними блоками, в нашем случае принимает значение «space-around», что означает равномерное распределение пространства, вот результат.

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

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

Количество оценивших: 2
Средняя оценка: 3,00

Загрузка…

Поделится:

Пока кнопок поделиться нет

Также рекомендую:

Горизонтальное меню с вертикальным подменю (HTML/CSS только)

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

HTML:

<ul>
  <li><a href="/" title="HOME">HOME</a></li>
  <li>
    <a href="/" title="ECO ENERGY">ECO ENERGY</a>
    <ul>
      <li><a href="/Evaluations" title="Evaluations">Evaluations</a></li>
      <li><a href="/Incentives" title="Incentives">Incentives</a></li>
      <li><a href="/HouseFiles" title="House Files">House Files</a></li>
      <li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a>/li>
    </ul>
    </li>
    <li>
      <a href="/" title="NEW HOMES">NEW HOMES</a>
      <ul>
        <li><a href="/NH" title="Evaluations">Evaluations</a></li>
      </ul>
    </li>
</ul>

CSS:

#menu {
  background-color: #206676;
  float: left;
  width: 100%;
  height: 60px;
}

ul#menu {
  font-size: 1.3em;
  font-weight: 600;
  margin: 0 0 5px;
  padding: 0;
  text-align: left;
}

ul#menu li {
  display: inline;
  list-style: none;
  padding-left: 15px;
  float: left;
}

ul#menu li a {
  background: none;
  color: #FFF;
  text-decoration: none;
}

ul#menu li a:hover {
  color: #FFF;
  text-decoration: none;
}

ul#menu ul {
  display: none;
}

ul#menu li {
  display: inline;
}

ul#menu li:hover ul {
  display: block;
}

ul#menu li:hover ul li a {
  display: block;
  color: red;
}

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

fiddle HERE

html

css

html-lists

horizontallist

Поделиться

Источник

Batsu

24 февраля 2014 в 19:59

4 ответа

горизонтальное выпадающее меню с горизонтальным подменю
отличные ответы я получил на вопрос, который опубликовал ранее( появляются при наведении курсора и остаются видимыми ). Было очень сложно редактировать css и html, потому что я просто скопировал и вставил AND, смешал два разных источника css из cssdeck.com, чтобы создать одно навигационное меню….
CSS выпадающее меню — неверный размер подменю
Я делаю горизонтальное навигационное меню css. Как я могу сделать так, чтобы ширина подменю автоматически подстраивалась под его содержимое? как в главном меню, совсем. Мой css: http://pastebin.com/Kpx4s3fH Текст просто складывается обратно. EDIT: и html http://pastebin.com/xaC0kvud

ul#menu ul
{
    display:none;
    position:absolute;
    left:0;
    top:20px;
}
ul#menu li
{
    display:block;   
}

Самые важные изменения. JSFIDDLE> http://jsfiddle.net/LSbvJ/ (Вам придется настроить отступы, поля, выравнивание текста… но я надеюсь, что это хорошее начало.)

Поделиться

sinisake

24 февраля 2014 в 20:11

Просто попробуйте этот обновленный CSS.

ul#menu li:hover ul {
    display: block;
    position: absolute;
    top: 10x;
    width: 200px;
}

ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: left;
    position: relative
}

Ниже приведена рабочая демонстрация.

http://jsbin.com/buculimi/1/edit

Поделиться

Kheema Pandey

24 февраля 2014 в 20:14

    #menu {
      background-color: #206676;
      float: left;
      width: 100%;
      height: 60px;
    }
    ul#menu {
      font-size: 1.3em;
      font-weight: 600;
      margin: 0 0 5px;
      padding: 0;
      text-align: left;
    }
    ul#menu li {
      display: inline;
      list-style: none;
      padding-left: 15px;
      float: left;
    }
    ul#menu li a {
      background: none;
      color: #FFF;
      text-decoration: none;
    }
    ul#menu li a:hover {
      color: #FFF;
      text-decoration: none;
    }
    ul#menu ul {
      display: none;
    }
    ul#menu li {
      display: block;
    }
    ul#menu li:hover ul {
      display: block;
      position: absolute;
      width: 50px;
    }
    ul#menu li:hover ul li a {
      display: block;
      color: red;
    }

<ul>
  <li><a href="/" title="HOME">HOME</a>
  </li>
  <li><a href="/" title="ECO ENERGY">ECO ENERGY</a> 

    <ul>
      <li><a href="/Evaluations" title="Evaluations">Evaluations</a>
      </li>
      <li><a href="/Incentives" title="Incentives">Incentives</a>
      </li>
      <li><a href="/HouseFiles" title="House Files">House Files</a>
      </li>
      <li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a>/li>

    </ul>
    </li>
    <li><a href="/" title="NEW HOMES">NEW HOMES</a>

      <ul>
        <li><a href="/NH" title="Evaluations">Evaluations</a>
        </li>
      </ul>
    </li>
</ul>

Поделиться

deepika

10 сентября 2015 в 10:49

<html>
<head>
<style type="text/css" media="screen">
#menu{
    width:100%;
    display:block;
    position:relative;
    height:60px;
    color:#fff;
    text-decoration:none;
    border-style:inset;
}
#menu a{
    text-decoration:none;
    color:#fff;
}
#menu ul {
    padding:1; margin:1; list-style:none;font-size: 1.3em;
    font-weight: 600;
}
#menu li {
    float:left; position:relative; padding-right:100; display:block;
    border:none;
}
#menu li ul {
    display:none;
    position:absolute;
}
#menu li:hover ul{
    display:block;
    background:red;
    height:auto; width:8em;
}
#menu li ul li{
    clear:both;
    border-style:none;
}
</style>
</head>
<body>
  <div>
    <div>
        <ul>
          <li><a href="#" title="HOME">HOME</a></li>
          <li>
            <a href="#" title="ECO ENERGY">ECO ENERGY</a>
            <ul>
              <li><a href="/Evaluations" title="Evaluations">Evaluations</a></li>
              <li><a href="/Incentives" title="Incentives">Incentives</a></li>
              <li><a href="/HouseFiles" title="House Files">House Files</a></li>
              <li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a></li>
            </ul>
          </li>
          <li><a href="/" title="NEW HOMES">NEW HOMES</a>
            <ul>
              <li><a href="/NH" title="Evaluations">Evaluations</a></li>
            </ul>
          </li>
        </ul>

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

Эта страница также может помочь вам:
http://mrbool.com/how-to-create-menu-with-submenu-using-csshtml/26146

Поделиться

jigsaw

24 февраля 2014 в 20:34

Горизонтальное меню без float / Хабр

~~Пост скорее для себя, чем для других.~~

Код и подробности под катом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

* {

padding:0;

margin:0;

border:0;

}

#content {

margin:50px;

padding:50px;

background:#eee;

text-align:center;

list-style:none;

white-space:nowrap;

}

#content LI {

display:inline-block;

margin:0 -2px;

vertical-align:top;

}

#content LI A {

display:inline-block;

background:#f9f9f9;

border:#ccc 1px solid;

margin:0 2px 0 0;

padding:5px 15px;

text-decoration:none;

color:#00f;

vertical-align:bottom;

}

#content LI A:hover {

color:#f00;

background:#fff;

}

@-moz-document url-prefix() {

#content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/

#content LI {margin:0 -2px;} /*For FF*/

#content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/

}

</style>



<title>Title</title>

</head>

<body>

<ul>

<li><a href="#">Главная</a></li>

<li><a href="#">О нас</a></li>

<li><a href="#">О вас</a></li>

<li><a href="#">О них</a></li>

<li><a href="#">Ссылки</a></li>

<li><a href="#">Форум</a></li>

</ul>

</body>

</html>

* This source code was highlighted with Source Code Highlighter.

Пояснения:

Иногда требуется сделать такое меню, которое и горизонтальное, но при этом находится по центру странички. Как обычно делается горизонтальное меню? А очень просто — при помощи

float:left;

Но вот отцентрировать такое меню у вас вряд ли получится. (ну ладно,

получится

; но какой ценой?

upd: habrahabr.ru/blogs/css/49756/#comment_1306559

)

Многие начнут думать над проблемой и придут к выводу, что нам поможет такое замечательное CSS свойство как display:inline-block! И ведь правда — везде работает! В FF3, Opera 8-9, Safari 3 и даже в IE (если специально для него написать display:inline;)!

Кажется, что проблема решена! Просто и достаточно элегантно! Но… но тут мы посмотрели в FF2 и… всё. Приплыли. Не работает 🙁

Лезем на mozilla.org и ищем что-нибудь такое эдакое, чтобы разделить стили для FF2 и FF3. И ведь находим! Наш помошник — свойство display:-moz-inline-grid;

@-moz-document url-prefix() { #content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/ #content LI {margin:0 -2px;} /*For FF*/ #content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/}

И работает. Вроде бы. Кстати, способ можно пользовать и для картинок: gruzzilkin.110mb.com/nofloat

И еще. Валидацию такой документ не пройдет из-за @-moz-document url-prefix.

UPD: По просьбе gryzzly выкладываю наиболее интересные варианты, предложенные в комментариях:

Как сделать горизонтальное меню в HTML

Горизонтальное меню сделать достаточно легко, нужно лишь немного воображения и знания html и css.

Для начала попробуем сделать простое горизонтальное меню. Вот пример как оно будет выглядеть:

Самое главное понять принцип, потом самостоятельно сможете сделать более сложное. Само меню размечается следующим фрагментом html кода:


<div>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">SEO</a></li>
</ul>
</div>

Видно, что это простой ненумерованный список, где одному из пунктов присвоен id. Он присвоен пункту текущей страницы, чтобы этот пункт отображался по-другому. То есть на каждой странице он должен быть присвоен соответствующему пункту меню. # — URL ссылки.

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

#menu ul li {display: inline;}

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

#menu ul {border-bottom:1px solid #000000; margin-left:0; padding:3px 0;}

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

#menu ul li a {text-decoration:none; margin-left:3px; border:1px solid #000000; padding: 3px 4px; border-bottom:0; background:#CEDEFF;}

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

#menu ul li a:link {color:#493;}
#menu ul li a:visited {color:#647;}
#menu ul li a:hover {color:#000; background:#6699FF; border-color:#227}

И, наконец, указываем вид пункта текущей страницы.

#menu ul li a#nowopen {background:#fff; border-bottom: 1px solid #fff;}

Выровнять меню по центру можно, задав #menu {margin:0 25% 0 25%;}

Используя вместо однотонных фонов изображения, можно получить самые разнообразные по дизайну меню.

Подключаем CSS к HTML, меню готово. Файл таблицы стилей.

Применяя различные изображения, мы получим вполне серьезные меню.

Скачать меню 1

Скачать меню 2

Скачать меню 3

Скачать меню 4

Скачать меню 5

Если для каждого пункта меню фон разный, нужно будет присвоить свой класс каждому пункту меню и для каждого класса прописать правила CSS, как сделано в следующем примере для второго пункта меню: Пример с разными фонами пунктов меню, или по аналогии сделать через id. Если фоном у вас являются изображения, заменяем соответствующие значения background: #цвет на background: url(путь до картинки.gif)

Скачать меню 6

11 Горизонтальные меню CSS

Коллекция отобранных вручную бесплатных HTML и CSS горизонтальных меню примеров кода.

Меню CSS
Круговые меню CSS
Выпадающие меню CSS
Мобильные меню CSS
Боковые меню CSS
Полноэкранные меню CSS
Скользящие меню CSS
CSS Переключить меню
Меню CSS вне холста

Автор

Мехмет Бурак Эрман
18 декабря 2017 г.

О коде

Эффект строки при наведении курсора на меню

Красивое и простое горизонтальное меню с эффектом наведения курсора в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Чарли Маркотт
5 сентября 2017 г.

О коде

CSS Горизонтальное меню

Чистый CSS горизонтальное меню концепция со свойством clip-path .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

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

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

См. Простую адаптивную горизонтальную навигацию Pen от Лизы (@lisa_c) на CodePen.

Предпочитаемый метод обучения?

Фрагменты кода
Если вам просто нужен код и не нужно описание.

Просмотр видео
Если вам нравится, как что-то работает с пояснением, посмотрите видео.

Чтение описания
Если вы научитесь лучше читать, я включаю расшифровку видео с соответствующими встроенными фрагментами кода.

Только код

См. Pen Simple Responsive Horizontal Navigation от Лизы (@lisa_c) на CodePen.

См. Простую адаптивную горизонтальную навигацию Pen от Лизы (@lisa_c) на CodePen.

Видео

Выписка

Начнем с HTML. У меня простой неупорядоченный список ссылок. Каждый элемент списка имеет имя класса, связанное с его именем.

  
      
          На главную  
          Руководства  
          О компании  
          Информационный бюллетень  
          Связаться

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

Я убираю поля и отступы и сначала задаю цвет фона для тела.

  кузов {
      маржа: 0;
      отступ: 0;
      фон: #ccc;
    }

Затем я задам стиль для списка, чтобы удалить маркеры и присвоить ему цвет фона. Я хочу, чтобы текст был по центру. Он еще не выглядит идеально центрированным, но если я удалю прокладку, оно будет. Очистка поля заставит его охватить верхнюю часть страницы, которую я хочу.

Я нацелен на ul внутри .nav , потому что мне, вероятно, нужен другой стиль для неупорядоченных списков без навигации.

  .nav ul {
      стиль списка: нет;
      цвет фона: # 444;
      выравнивание текста: центр;
      отступ: 0;
      маржа: 0;
    }

В элементах списка внутри nav ( .nav li ) я установлю типографику.

  .nav li {
      семейство шрифтов: «Освальд», без засечек;
      размер шрифта: 1.2em;
      высота строки: 40 пикселей;
      высота: 40 пикселей;
      нижняя граница: 1px solid # 888;
    }

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

Наконец, я отключу подчеркивание и сделаю текст в ссылках белым.

  nav a {
      текстовое оформление: нет;
      цвет: #fff;
    }

Опять же, я нацелен только на теги привязки внутри .nav , потому что я не хочу предполагать, что все теги привязки будут иметь такой стиль.

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

Я хочу изменить цвет при наведении курсора на ссылку. Я могу сделать это с помощью этого:

  nav a: hover {
      цвет фона: # 005f5f;
    }

Было бы неплохо иметь небольшой эффект перехода при наведении курсора, поэтому я добавлю это.

  переход: .3s цвет фона;

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

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

У меня сейчас активный класс по ссылке «новости». Я могу оформить этим активные ссылки.

  a.active {
      цвет фона: #fff;
      цвет: # 444;
    }

Но у нас проблема при наведении курсора на активную ссылку.Я не хочу, чтобы этот цвет изменился. Поэтому я добавлю .nav в начале, чтобы этот селектор имел более конкретную специфику и переопределил ранее определенный .nav a: hover .

Я хочу изменить курсор : по умолчанию; , поэтому не похоже, что нажатие на эту ссылку ни к чему не приведет.

Итак, все работает нормально, и это будет хорошо смотреться на телефоне. Однако на более широком экране это выглядит странно.

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

Все, что меньше 600 пикселей, будет отображать навигацию по вертикали, а все с большим разрешением — по горизонтали.

Я могу добавить медиа-запрос.

  @media screen и (min-width: 600px) {

  }

Затем я могу настроить таргетинг на .nav li внутри медиа-запроса. Поэтому на экране шириной не менее 600 пикселей он будет использовать этот код:

  .nav li {
      ширина: 120 пикселей;
      нижняя граница: нет;
      высота: 50 пикселей;
      высота строки: 50 пикселей;
      размер шрифта: 1.4em;
    }

Я делаю каждый пункт меню шириной 120 пикселей, так как здесь 5 элементов, а 5 * 120 — 600. Я удаляю границу и увеличиваю текст меню и панель.

Если мы немного сдвинем область просмотра, то увидим, как она изменится.

Теперь у нас есть два варианта сделать это горизонтальным. Один вариант — отобразить элементы списка как inline-block , а другой вариант — использовать числа с плавающей запятой. Первый способ проще, но у вас может быть причина использовать числа с плавающей запятой, поэтому я объясню оба варианта.Любой из вариантов будет работать в IE8, однако IE8 не распознает медиа-запрос. Позже нам нужно будет скопировать этот код в таблицу стилей только для IE8.

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

Если я добавлю

  .nav li {
      дисплей: встроенный блок;
    }

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

  margin-right: -4px;

А теперь все отлично выглядит.

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

  .nav li {
      плыть налево;
    }

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

Если я включу выделение при предварительном просмотре, вы увидите каждый тег li с рамкой. Но тег ul — это всего лишь одна строка, которая означает, что она свернута.

Есть множество способов исправить это, и у меня есть целое видео, объясняющее все способы. В этом случае я просто добавлю

  .nav ul {
      перелив: авто;
    }

, который прост и будет работать.

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

  ширина: 600 пикселей;
    маржа: 0 авто;

, чтобы отцентрировать его.

И последнее изменение — сделать всю панель nav темно-серым цветом, чтобы она расширялась.

Итак, метод inline-block намного меньше кода и проще. Но я подумал, что было бы полезно увидеть оба метода. Раньше я всегда использовал метод float , и его правильное использование иногда вызывало головную боль.

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

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

  .nav li {
      ширина: 120 пикселей;
      нижняя граница: нет;
      высота: 50 пикселей;
      высота строки: 50 пикселей;
      дисплей: встроенный блок;
      маржа слева: -4px;
    }

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

Если бы я сначала стилизовал горизонтальное меню, нам не понадобилась бы таблица стилей для IE. Я мог бы использовать max-width вместо min-width и изменить способ написания кода. Но я хотел использовать прежде всего мобильный подход. Код в итоге оказался проще, чем когда я изначально подходил к нему с большого экрана.

Надеюсь, это было полезно. Если у вас есть вопросы, напишите их на css-snippets.com.

Как создать горизонтальное меню на чистом CSS без JavaScript

Создать горизонтальное меню на чистом CSS действительно легко.

Для этого вам просто нужно создать пару строк разметки HTML и стилей CSS.

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

Просто следуй за мной.

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

Не тратьте зря время

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

ДЕМО: Горизонтальное меню на чистом CSS.

Если это то, что вам нужно, продолжайте.

Ваша основная структура HTML

Всегда начинайте с базы HTML5, см. Ниже.








 Горизонтальное меню на чистом CSS

Пример № 1

Ваша HTML-навигация

Поскольку мы используем HTML5, мы будем использовать тег навигации (nav).

Внутри этой навигации мы будем использовать простые теги привязки (а).

Теперь здесь, если хотите, вы можете использовать неупорядоченный (ul) список, как показано ниже.






 Название меню 

 Название меню 

 Название меню

Пример № 2

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




 Название меню 

 Название меню 

 Название меню

Образец № 3

Назовем наши меню «Домой», «Услуги» и «Контакт».

Внутри атрибута «href» я просто буду использовать символ хэштега.

Но имейте в виду, что вы можете изменить это на любой URL-адрес.

Like вместо этого (#) вы можете добавить это (https: // supfort.com).

См. Ниже, как я только что добавил хэштег для этого примера.




 На главную 

 Услуги 

 Связаться

Пример № 4

HTML-разметка полного меню

Давайте сложим полную HTML-разметку.

Это должно выглядеть, как показано ниже.








 Горизонтальное меню на чистом CSS 






 На главную 

 Услуги 

 Связаться

Пример № 5

Добавление CSS

Давайте украсим это меню с помощью CSS.

Сначала мы зададим цвет фона основной навигации.

В этом примере мы будем использовать темно-серый шестнадцатеричный цвет (# 515151), но вы можете использовать любой цвет, какой захотите.

Если вы хотите использовать другой цвет, вы можете использовать этот инструмент.

См. Ниже шестнадцатеричный цвет темно-серый (# 515151).


nav {
фон: # 515151;
}

Sample # 6

Имейте в виду, что внутри демонстрации я выравниваю все по центру, но это необязательно.

Так что просто используйте его, если хотите.

Но если нет, то, пожалуйста, будьте проще и не добавляйте его.


nav {
фон: # 515151;
выравнивание текста: центр; / * ЭТО НЕОБЯЗАТЕЛЬНО * /
}

Пример № 7

Теперь давайте стилизуем наши элементы привязки (a).

Первое, что вам здесь нужно сделать, это изменить эти встроенные элементы уровня на встроенные блочные элементы.

Почему?

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


nav a {
дисплей: встроенный блок;
}

Пример № 8

Наконец, мы просто добавим белый цвет, отступы, удалим подчеркивание, которое идет с каждой ссылкой, и простую анимацию перехода.


nav a {
дисплей: встроенный блок;
цвет: #FFF;
отступ: 18px 12px;
текстовое оформление: нет;
        переход: легкость в .3s;
}

Пример № 9

Наведение вашего CSS-меню

Последним шагом будет добавление цветов, когда пользователь наводит указатель мыши на каждую ссылку меню.

Это называется зависанием, поэтому мы будем использовать селектор «: hover».

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


nav a: hover {
цвет: # 515151;
фон: #FFF;
}

Пример № 10

Полное меню вместе

Чтобы закончить это руководство, давайте соберем все вместе.

В этом случае мы будем использовать внутренние стили CSS.

Но вы также можете использовать внешний лист CSS, если хотите.








 Горизонтальное меню на чистом CSS 

<стиль>

nav {
фон: # 515151;
}

nav a {
дисплей: встроенный блок;
цвет: #FFF;
отступ: 18px 12px;
текстовое оформление: нет;
        переход: легкость в .3s;
}

nav a: hover {
цвет: # 515151;
фон: #FFF;
}









 На главную 

 Услуги 

 Связаться

Образец № 11

И все, очень просто.

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

ССЫЛКА: Скачать демо

Помните, HTML и CSS работают везде.

Так что, если вы хотите добавить этот код в свою любимую CMS, такую как WordPress, Joomla, Drupal, это возможно.

Это будет непросто, но возможно.

Если вам нужна помощь в этом, пожалуйста, отправьте мне сообщение.

Вы можете просто нажать на зеленую кнопку ниже.

Или, если вы живете недалеко от Форт-Уэрта, Техас, просто посетите мою домашнюю страницу.и позвони мне.

Вы сможете найти всю мою информацию внизу этой страницы.

Создание центрированной горизонтальной навигации — CSS Wizardry — Оптимизация веб-производительности

29 января 2011 г.

Написано Гарри Робертсом на CSS Wizardry .

Содержание

Демо
Обновление

Центрировать элементы уровня блока легко, просто укажите ширину и установите поля : 0 авто; , г.
но что, если вы не знаете эту фиксированную ширину? Вы можете использовать text-align: center;
но это не сработает и для блочных элементов со 100% шириной …
работать с элементами текстового уровня.

По возможности всегда следует избегать явного определения ширины и высоты,
так как это сделает документ менее ориентированным на будущее, гибким и
расширяемый … Предположим, у вас есть четыре пункта в меню навигации — вы можете работать
вне их ширины и используйте поле : 0 auto; , чтобы отцентрировать их. Добавление пятого
увеличит ширину, а это значит, что вам также придется изменить CSS. Это далеко
от идеала, и более того, с помощью CMS для управления сайтом (клиент может добавлять страницы,
но, возможно, не могу редактировать CSS).

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

В разметке:

  
    На главную  
    О программе  
    Работа  
    Клиенты  
    Связаться

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

  .nav {
    граница: 1px solid #ccc;
    ширина границы: 1px 0;
    стиль списка: нет;
    маржа: 0;
    отступ: 0;
      выравнивание текста: по центру; 
}
.nav li {
      дисплей: встроенный; 
}
.nav a {
      дисплей: встроенный блок; 
    отступ: 10 пикселей;
}

Я просто создал список навигации и присвоил ему верхнюю границу.
и снизу (чисто для выделения текста по центру).Вместо того, чтобы плавать
уровень блока

Осталось сек. Я дал им display: inline; , то есть
они больше не занимают 100% доступной ширины и теперь хорошо складываются
друг против друга.
Далее мы используем (очень редко используемый) display: inline-block; , чтобы убедиться, что ссылки
сами по себе не переходят на новые строки, но по-прежнему подчиняются любым значениям заполнения
соответственно. Здесь я увеличил область попадания, добавив padding: 10px;
Вы могли бы, если хотите, применить встроенный блок к

s.Однако
IE6-7 позволит встроенному блоку работать с элементами, которые по своей сути
встроенные элементы. Дисплей : строчно-блочный; не будет работать с элементами блочного уровня.
Вот небольшая демонстрация. Попробуйте использовать Firebug или подобное, чтобы добавить
другие элементы списка на лету и наблюдайте, как они плавно центрируются в списке. я
протестировали это в IE7-8, чтобы убедиться, что он отлично работает. Я не проверял IE6, но
Думаю, все будет хорошо.
Обновление
Вы спросили, и я услышал; Я сделал раскрывающуюся версию этого
для тебя.По линии верх: 100%; заставит раскрывающийся список работать в IE7, но вроде как
немного портит опыт во всех других браузерах. Оставляете ли вы его в или
не зависит от вас. Опять же, просмотрите исходный код с практическими рекомендациями…
☕️ Это помогло? Купи мне кофе!
Создание горизонтального меню списка CSS
по kirupa | 21 февраля 2012 г.
Есть вопросы? Обсудите это руководство по HTML с другими на форумах.
На самом деле есть только два способа разместить ссылки внутри
меню.Один из способов — вертикальный, как описано в
другой учебник. Другой способ — по горизонтали:
[ вот
живая версия этого, с которой вы можете играть]
В этом руководстве вы узнаете, как перейти от вертикали по умолчанию.
list в меню, которое упорядочивает его содержимое по горизонтали. По пути,
вы также узнаете, как сделать это меню красивым.
Приступим.
Указание HTML
Во-первых, нам нужно определить наше меню.Это делается
используя ul и
li теги. Я собираюсь добавить
nav на удачу.
Откройте документ HTML5, в котором вы хотите создать это меню.
дюйм. Если у вас нет документа HTML5, просто создайте новый с
следующая разметка в качестве отправной точки:

<мета charset = "utf-8">
Мой<br /> Меню
Мы создадим наше меню между открытием и закрытием
теги тела, так что продолжайте и добавьте
следующая разметка сразу под вашим открытием
тег:
домой
магазин
связаться
Если вы просмотрите то, что у вас есть на данный момент, вы увидите то, что
выглядит следующим образом:
[ простой.вертикальный. эпический провал]
Причина проста. Ваше «горизонтальное» меню в основном
составлен из неупорядоченного списка (ul)
содержащий три элемента списка (li):
домой
магазин
связаться
По умолчанию список в HTML всегда
вертикальный.Вертикальный список превращается в горизонтальный:
используя очень мало CSS, чтобы изменить его форму. Давайте посмотрим на
как это сделать дальше.
Есть

навиг
в мой суп!
Вы могли заметить тег навигации
в нашей разметке. Этот тег — один из новых элементов, представленных
HTML5, и его основная цель — придать семантическому значению
ваш документ, объявив его содержимое как что-то в основном используемое
для целей навигации.
Мы с тобой, наверное, не найдем ему применения, но поисковики
и, возможно, программы чтения с экрана сочтут этот тег полезным.Для SEO
и только преимущества доступности, я настоятельно рекомендую вам завернуть
ваши элементы навигации по навигации
теги.
Чтобы убедиться, что навигационный тег работает
как и ожидалось в старых браузерах (в первую очередь IE), изучите возможность использования
html5shiv скрипт. Если вы этого не сделаете и вам небезразличны люди, использующие
версии IE старше 9, плохие вещи будут
бывает …. может быть.
Изменение CSS
Прямо сейчас в нашем меню нет ничего особенного. Это выглядит
Реально скучно.Хуже того, он даже не оправдывает своей мечты стать
горизонтальный. Давайте исправим все это в этом разделе, а затем перейдем к
делая его привлекательным.
О, как мощное падение
Для начала давайте поместим «горизонталь» в наше горизонтальное меню и научим
наше самодовольное (возможно, с гуманитарным образованием) вертикальное меню урок. Добавить

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

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

HTML/CSS. Как создать вертикальное и горизонтальное меню

Горизонтальное меню для сайта на HTML и CSS

Первый способ

Второй способ

Как сделать меню навигации в HTML и CSS для сайта

Как сделать вертикальное меню:

Примечание:

Примечание:

Как сделать горизонтальное меню:

Вывод:

Подписываетесь на соц-сети:

Оценка:

Поделится:

Также рекомендую:

Горизонтальное меню с вертикальным подменю (HTML/CSS только)

4 ответа

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

Горизонтальное меню без float / Хабр

Пояснения:

Как сделать горизонтальное меню в HTML

11 Горизонтальные меню CSS

Автор

О коде

Эффект строки при наведении курсора на меню

Автор

О коде

CSS Горизонтальное меню

О коде

Зачеркнутый эффект при наведении курсора на меню

Автор

О коде

Lavalamp CSS Меню

Автор

О коде

Горизонтальный значок навигации

Автор

О коде

Слайд горизонтального меню

Автор

О коде

Перекосное меню в HTML и CSS

Автор

О коде

Эффекты горизонтальной навигации

Автор

О коде

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

Автор

О коде

Прозрачная исчезающая панель навигации

Автор

О коде

Эффект отзывчивого меню

Простая горизонтальная навигация | CSS-фрагменты

Предпочитаемый метод обучения?

Только код

Видео

Выписка

Как создать горизонтальное меню на чистом CSS без JavaScript

Не тратьте зря время

Ваша основная структура HTML

Ваша HTML-навигация

HTML-разметка полного меню

Добавление CSS

Наведение вашего CSS-меню

Полное меню вместе

Создание центрированной горизонтальной навигации — CSS Wizardry — Оптимизация веб-производительности

Обновление

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

Указание HTML

Есть

Изменение CSS

О, как мощное падение