Css html горизонтальное меню: Горизонтальное меню на CSS — Независимое театральное объединение "Зрительские симпатии"

Содержание

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

2021-01-25

В этой статье мы рассмотрим, как создать горизонтальное меню для сайта с помощью HTML и CSS. Чтобы получить интерактивное меню, нужно использовать JQuery, HTML 5 и CSS3.

Для написания сценария можете использовать любой HTML редактор, но не забудьте сохранить файл с расширением .HTML.

Шаг 1: Откройте любой HTML — редактор и напишите код HTML с элементами списка ul-li и сохраните файл с расширением .html:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Horizontal CSS Menu Bar</title>
<body>
<ul id=”menu”>
    <li><a href=”#”>Link1</a></li>
    <li><a href=”#”>Link2</a>
          <ul>
            <li><a href=”#”>Link2.  1</a></li>
            <li><a href=”#”>Link2.2</a></li>
            <li><a href=”#”>Link2.3</a></li>
         </ul>
    </li>
    <li><a href=”#”>Link3</a>
          <ul>
          <li><a href=”#”>Link3.1</a></li>
          <li><a href=”#”>Link3.2</a></li>
          </ul></li>    
    <li><a href=”#”>Link4</a></li>
</ul>
</body>
</html>

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

• Link1
• Link2
o Link2.1
o Link2.2
o Link2.3
• link3
o Link3.1
o Link3.2
• link4

Шаг 2: Здесь мы добавляем CSS в HTML разметку. Этот тип CSS кода называется внутренним. Во внешнем CSS мы размещаем код в отдельном файле, сохраняя его с расширением . css и подключая на странице HTML. Преимущество использования внешнего CSS заключается в его многократном использовании. Чтобы сделать его проще, мы добавили внутренний CSS. Для этого разместите тег <style> под head в HTML и напишите CSS код внутри блока <style>. Для начала мы добавим несколько основных свойств, чтобы установить ширину, высоту, цвет фона:

<style>
/* Main */
    #menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    }
</style>

После добавления CSS:

Шаг 3: Теперь закруглите угол, чтобы придать ему красивый внешний вид. Для этого используйте свойство CSS border-radius и установите значение 50px:

#menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    border-radius: 50px;
}

После добавления CSS:

Он выглядит лучше, правда?

Шаг 4: Теперь упорядочим структуру будущего горизонтального резинового меню для сайта.

Все элементы ‘li’ будут находиться в одной строке, а все элементы ‘ul’ будут располагаться ниже:

#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative; 
}

После добавления CSS:

Шаг 5: Настроим свойства для тега ‘a’ (при наведении курсора мыши) такие как цвет, оформления текста, шрифт:

#menu a{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #CC6600;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000; 
}

После добавления CSS:

Шаг 6: Добавьте еще одно свойство, чтобы цвет ссылок изменялся при нажатии:

#menu li:hover > a{
    color: #CC3333; 
}

Шаг 7: Теперь добавьте два CSS блока для элементов ‘ul’. Первый блок будет скрывать все элементы ‘ul’, также необходимо задать такие свойства отображения как цвет, внутренний отступ, позиция. Второй блок — для отображения всех элементов ‘ul’ при наведении курсора мыши на элементы ‘li’:

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background: #222; }
   #menu li:hover > ul{
    display: block; 
}

После добавления CSS:

Шаг 8: Установите padding (внутренний отступ) 0, margin (внешний отступ) 0 для всех элементов, чтобы многоуровневое горизонтальное меню для сайта лучше смотрелось:

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block; 
}

Шаг 9: Установите свойства для всех элементов ‘а’, которые располагаются под тегом ‘ul’:

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
 }

Шаг 9: Добавьте еще несколько строк, чтобы улучшить визуальные эффекты оригинального горизонтального меню для сайта, установите правильный размер шрифта для черного фона:

#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
 }

После добавления CSS:

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

Дополнительный шаг 1: Для отображения указателя под выделенной ссылкой добавьте код, представленный ниже:

#menu ul li:first-child a:after{
    content: ”;
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #FF0000;
}

После добавления CSS:

Дополнительный шаг 2: Установите свойство border-radius 5px под элементом ‘#menu ul’, который придаст небольшое закругление для всех тегов ul:

border-radius: 5px;

После добавления CSS:

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

ВЛВиктория Лебедеваавтор-переводчик статьи «Create horizontal menu bar using HTML and CSS»

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

О сайтеПравилаКонтакты

» Статьи » Разработка » Два способа сделать меню для сайта на HTML и CSS

Инструменты
Заработок
Раскрутка

26 января 2015 . Антон Кулешов

Всем привет! Сегодня разберем пару примеров реализации горизонтального меню – самых простых и самых надежных.

Так уж исторически сложилось, что для реализации навигации на сайте используют ненумерованный список. Поэтому, имея стандартную структуру 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).

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

#Меню

16 173

Плавный скроллинг и плавающее меню Плавающее горизонтальное меню на jQuery Растянутый на всю ширину HTML список Ещё одно адаптивное меню Выпадающее меню на HTML и CSS

Комментарии не найдены

Выпадающее меню на HTML и CSS

Разбираемся, как сделать бегущую строку на сайте

Разработка вертикального и горизонтального меню с использованием Pure CSS

Улучшение статьи

Сохранить статью

Уровень сложности: Средний
Последнее обновление: 22 фев, 2021

Читать

Обсудить

Улучшить статью

Сохранить статью

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

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

По умолчанию в Pure CSS меню вертикальные. Его легко настроить из-за минимального стиля по умолчанию и селекторов с низкой специфичностью.
Все компоненты меню должны быть заключены в раздел с именем класса «чистое меню» .
Добавить класс «чистый-меню-заголовок» в элемент для основного заголовка или названия.
Затем добавьте все элементы после заголовка внутри элемента
- с классом «Pure-Menu-Item» .
- Если вы хотите связать элемент с разделом вашей веб-страницы, вы можете дополнительно заключить его в элемент с классом «pure-menu-link» .

Пример:

HTML

< HTML > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > < > 0003

< head >

< link rel = "stylesheet" href =

"https://unpkg. com/[email protected]/build/pure-min.css"

СОЕДИНЕНИЕ =

"Sha384444HPEEEd20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"

crossorigin = "anonymous" >

< meta name = "viewport" content =

"width=device-width, initial-scale=1.0" />

head >

< body >

< div Класс = "Pure-Menu" >

< span class = "pure-menu-heading" >

GEEKFORGEEKS

span >

< UL Класс = "Pure-Menu-list" >

< li class = "pure-menu-item" >

< a href = " #" Класс = " Pure-Menu-Link " >

Дом

0064 A >

LI >

< 1666666666666666666666666666666666666666666666666666666666666666666666666.

666666666666666666666666666666666666666666666666666.

66666666666666666666666666666666666666666666666. >

< A HREF = "#" Класс = "Pure-Menu-Link" = "Pure-Menu-Link" > = "Pure-Men0064

About Us

a >

li >

< li class = "чистый пункт меню" >

< a href = "#" class = "pure-menu-link" >

Contact

a >

LI >

< LI Класс = "Pure-Menu-Item"0064 >

< a href = "#" class = "pure-menu-link" >

Privacy Policy

A >

LI >

900 Вывод:

03

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

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

Example:

HTML

< html >

< head >

< link rel = "stylesheet" href =

"https:// unpkg.com/[email protected]/build/pure-min.css "

целостность =

" SHA384-NN4HPE8LTHEVTFCBI5YYARISLIALSIGWSLISLIALSIGWSLIALSIGWSLISLISLIALSIGWSLISLISLISLISLISLISLISLISLISLISLISLIALSIGWSLIALSLIALSIGWSLIALSIGWSLIALSIGWSLISLISLIALSIGWSLIALSIGWSLISLISLIALSIGWSIGISLISLISHISLISLIALSHw"

crossorigin = "anonymous" >

< meta name = "viewport" content =

"width=device-width, initial-scale=1. 0" />

head >

< body >

< div class = "Pure-Menu Pure-Menu-Horizontal" >

<

    <    <
  .0064  span   class   =   "pure-menu-heading"   > 
                 GEEKFORGEEKS 
               span   > 
      
    <  UL   Класс   =   "Pure-Menu-List"  > 
  
 
0064
                 <   li   class   =   "pure-menu-item"   > 
                     <   a   href   =   "#"   Класс   =   "Pure-Menu-Link"  > 
    Дом 
    
0063 a   > 
                   li   > 
                 <   li   class   =   "pure-menu-item"   > 
                     <   a   href   =   "#"   class   =   "pure-menu-link"   > 
                         About Us 
                       a   > 
                   li   > 
                 <   li   class   =   "чистый пункт меню"   > 
                     <   a   href   =   "#"   class   =   "pure-menu-link"   > 
                         Contact 
                       a   > 
                   LI  > 
    <  LI   Класс   =   "Pure-Menu-item"   =   "Pure-menu-item"  . 0063 > 
                     <   a   href   =   "#"   class   =   "pure-menu-link"   > 
                         Privacy Policy 
      A  > 
      LI  > 
  LI  > 
 0063                 
      
               ul   > 
           div   > 
      
    body   > 
      
    html   >