Меню ul горизонтальное: Как разместить элементы списка горизонтально?

Разное 

Содержание

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

2975 Посещений

Откройте 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%;

}

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

CSS горизонтальное меню с 3-м подменю отображается вертикально



Это многоуровневое горизонтальное меню. Я пытаюсь сделать подменю 3-го уровня вертикальным (1-й &-й уровень останется горизонтальным)

Поэтому, если я наведу указатель мыши на продукты, он будет содержать список жестких дисков, мониторов и динамиков… горизонтально. Однако, когда я навожу колонки, теперь они должны перечислять 10 Уолтов, 20 Уолтов … вертикально, как выпадающий список.

Можно ли это сделать? Пожалуйста помочь.

<style>
    /**
     * horizontal navigation (SO)
     */
    body {
        background: url('.jpg') 50% 50%;
    }

    /* Targeting both first and second level menus */

    #nav {position: relative;}
    #nav li {
        list-style:none;
        float: left;
    }
    #nav li a {
        display: block;
        padding: 8px 12px;
        text-decoration: none;
    }
    #nav li a:hover {
        background-color:red;
        color:#FFF;
        opacity:1;
    }

    /* Targeting the first level menu */
    #nav {  
        top:150px;
        min-width:850px;
        background:#fff;
        opacity:0.
 
 5;
        display: block;
        height: 34px;
        z-index: 100;
        position: absolute;
    }
    #nav > li > a {
    }

    /* Targeting the second level menu */
    #nav li ul {
        color: #333;
        display: none;
        position: absolute; 
        width:850px;
    }
    #nav li ul li {
        display: inline;
    }
    #nav li ul li a {
        background: #fff;
        border: none;
        line-height: 34px;
        margin: 0;
        padding: 0 8px 0 10px;
    }
    #nav li ul li a:hover {
        background-color:red;
        color:#FFF;
        opacity:1;
    }

    /* Third level menu */
    #nav li ul li ul{
        top: 0;
    }
    ul.child {
    background-color:#FFF;  
    }
    /* A class of current will be added via jQuery */
    #nav li.current > a {
        background: #f7f7f7;
        float:left;
    }
    /* CSS fallback */
    #nav li:hover > ul.child {
        left:0;
        top:34px;
        display:inline;
        position:absolute;
        text-align:left;
    }
    #nav li:hover > ul.
 
 
 grandchild  {
        display:block;
    }

</style>


<!-- content to be placed inside <body>…</body> -->
<ul>
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Products</a>
        <ul>
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Speakers</a>
                <ul>
                    <li><a href="#">10 watt</a></li>
                    <li><a href="#">20 watt</a></li>
                    <li><a href="#">30 watt</a></li>
                </ul>
            </li>
            <li><a href="#">Random Equipment</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
        <ul>
            <li><a href="#">Repairs</a></li>
            <li><a href="#">Installations</a></li>
            <li><a href="#">Setups</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

jsFiddle демо: http://jsfiddle. net/fJQ59/

css
Поделиться Источник Milacay     28 декабря 2012 в 18:07

2 ответа

  • CSS выпадающее меню с горизонтальным подменю

    У меня есть следующий сайт http://jsfiddle.net/Me4fw/4/ , на котором я пытаюсь реализовать горизонтальное выпадающее меню css, имеющее подменю, которое также является горизонтальным. Я перепробовал все, но, похоже, ничто не заставляет элементы подменю сидеть рядом друг с другом. Все, что я могу…

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

    в основном у меня есть бок о бок горизонтальное меню, как вы можете видеть здесь: http://www.дополнения-today.co.uk/walnutgarth4/availability.php то, что я пытаюсь сделать, это сделать так, чтобы ‘onhover’ было подменю, которое падает вниз на определенные выборы, например ‘pictures’. мою попытку…


1

Добавьте в свой стиль следующие коды

#nav li ul li ul li { display: block; float: none; }

Поделиться Mayki Nayki     28 декабря 2012 в 18:23


1

Вот вам отправная точка:

HTML 

​<ul>
  <li>
    Option One
    <ul>
      <li>
        Second Row One
        <ul>
          <li>
            Third Row One
          </li>
          <li>
            Third Row Two
          </li>
          <li>
            Third Row Three
          </li>
        </ul>
      </li>
      <li>
        Second Row Two
      </li>
      </ul>   
  </li>
  <li>
    Option Two
  </li>
  <li>
    Option Three
  </li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS 

ul {
  width: 600px;
  list-style-type: none;
}
ul > li,
ul > li > ul > li {
  position: relative;
  float: left;
  padding: 3px 5px;
  margin: 10px 5px;
  cursor: pointer;
}

/*****************************
This next line is the key to
making the third row vertical:
******************************/
ul ul ul li {
  float: none;
}

li > ul {
  display: none;
}
li:hover > ul {
  position: absolute;
  display: block;
  width: 600px;
}
​

Вид на JSFiddle

Поделиться jamesplease     28 декабря 2012 в 18:23

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


html горизонтальное меню отображается вертикально на firefox 4

я только что пошел тестировать сайт в firefox 4 (бета-версия 10), и горизонтальное меню отображается вертикально. В chrome меню горизонтально, как это: но в firefox 4 он появляется вот так: Я…


ASP.NET горизонтальное меню с подменю, появляющимся ниже, также горизонтальное

У меня есть горизонтальное меню с UL/LI markup, которое я хочу преобразовать в ASP:Menu в .net 3.5. Я бы хотел, чтобы выбор в подменю отображался в горизонтальном меню под главным меню при нажатии…


css горизонтальное навигационное меню плавает справа, вертикальные подменю не выровнены с главным меню

Я создал горизонтальное навигационное меню в css, плавающее слева. Это прекрасно работает. Когда я меняю поплавок вправо (и меняю порядок li верхнего уровня), все в порядке, за исключением того, что…


CSS выпадающее меню с горизонтальным подменю

У меня есть следующий сайт http://jsfiddle.net/Me4fw/4/ , на котором я пытаюсь реализовать горизонтальное выпадающее меню css, имеющее подменю, которое также является горизонтальным. Я перепробовал…


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

в основном у меня есть бок о бок горизонтальное меню, как вы можете видеть здесь: http://www.дополнения-today.co.uk/walnutgarth4/availability.php то, что я пытаюсь сделать, это сделать так, чтобы…


Горизонтальное меню с вертикальным подменю

Мне нужно горизонтальное меню с вертикальными подменю , которые взяты из базы данных сервера SQl, мне нужно вертикальное подменю с полосами прокрутки, может кто-нибудь дать мне ссылку на такое меню.


css подменю меню горизонтальное

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


CSS выпадающее меню — неверный размер подменю

Я делаю горизонтальное навигационное меню css. Как я могу сделать так, чтобы ширина подменю автоматически подстраивалась под его содержимое? как в главном меню, совсем. Мой css:…


Горизонтальные меню с подменю полной ширины CSS jfiddle включены

Я хочу сделать горизонтальное выпадающее меню, очень похожее на главное меню из HowStuffWorks: http:/ / home. howstuffworks.com/community-living Обратите внимание, что подменю охватывает всю ширину…


Горизонтальное подменю вертикальное меню с помощью Bootstrap

Есть ли способ создать горизонтальное подменю для вертикальной структуры меню с помощью bootstrap я не видел ни одного подменю с вертикальной ориентацией главного меню. Примерная структура структуры…

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

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

Простое горизонтальное меню

HTML

Cписку меню присвоен стилевой идентификатор, например, [glavnoeMenu] — уникальное имя, которое используется для изменения его стиля.

<ul>
 <li><a title="" href="#">Пункт один</a></li>
 <li><a title="" href="#">Пункт два</a></li>
 <li><a title="" href="#">Пункт три</a></li>
 <li><a title="" href="#">Пункт четыре</a></li>
 <li><a title="" href="#">Пункт пять</a></li>
</ul>

CSS

#glavnoeMenu,
#glavnoeMenu ul
{
 list-style: none; /* Убираем маркеры списка меню */
}
#glavnoeMenu
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu > li
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu li a
{
 display: block; /* Меню — блочный элемент */
 margin: 0 1em; /* Отделяем пункты меню отступами слева-справа */
 padding: 0; /* Нулевые значения полей вокруг ссылки */
}

Горизонтальное меню с вложенным списком подпунктов

1. Создаем HTML структуру меню — список пунктов с ссылками. Один из пунктов основного меню, например, третий, имеет вложенный список подпунктов.

Основному списку присвоен стилевой идентификатор [glavnoeMenu] — уникальное имя, которое используется для изменения его стиля.

HTML

<ul>
 <li><a title="" href="#">Пункт один</a></li>
 <li><a title="" href="#">Пункт два</a></li>
 <li><a title="" href="#">Пункт три</a>
 <ul>
 <li><a title="" href="#">Подпункт один</a></li>
 <li><a title="" href="#">Подпункт два</a></li>
 <li><a title="" href="#">Подпункт три</a></li>
 </ul>
 </li>
 <li><a title="" href="#">Пункт четыре</a></li>
 <li><a title="" href="#">Пункт пять</a></li>
</ul>

CSS

#glavnoeMenu,
#glavnoeMenu ul
{
 list-style: none; /* Убираем маркеры списка меню */
}
#glavnoeMenu
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu > li
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu li a
{
 display: block; /* Меню — блочный элемент */
 margin: 0 1em; /* Отделяем пункты меню отступами слева-справа */
 padding: 0; /* Нулевые значения полей вокруг ссылки */
}
#glavnoeMenu li ul
{
 background: none repeat scroll 0 0 #FFFFFF; /* Фон списка с
 
подпунктами, белый */
 display: none; /* Вложенный список с подпунктами не отображается */
 position: absolute; /* Имеет абсолютное позиционирование */
 z-index: 9999999; /* Список с подпунктами перекрывает
 
другие объекты веб-страницы */
}
#glavnoeMenu li ul li a
{
 margin: 0; /* Нулевой отступ */
 padding: 0. 3em 1em; /* Внутренние поля ссылки подпункта*/
}
#glavnoeMenu li:hover ul
{
 display: block; /* Отображение списка с
 
подпунктами при наведении — блочный элемент */
 margin: 0;
 padding: 0.1em 0;
}

Дальнейшее оформление — по вкусу.

Демонстрация меню

 

В случаях размещения меню слева или справа страницы, отступ от края (левого или правого) может нарушить сетку. Для исправления необходимо, в левом варианте, присвоить класс [first] первому пункту и [last] последнему в правом варианте. В стили добавить описание варианта класса:

#glavnoeMenu li a.first
{
 display: block;
 margin: 0 1em 0 0; /* Убираем левый отступ */
 padding: 0;
}
или
#glavnoeMenu li a.last 
{
 display: block;
 margin: 0 0 0 1em; /* Убираем правый отступ */
 padding: 0;
}

Можно ограничить ширину блока вложенного списка. Для этого нужно прописать стиль, указав точную ширину, например 150px.

#glavnoeMenu ul li a 
{
 width: 150px;
}

Горизонтальное меню для сайта на 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. Запрещаем обтекание, подробнее как сделать читаем в [url=http://falbar. ru/article/zapret-obtekaniya-tremya-sposobami-na-css target=_blank]ранее написанной статье[/url], это необходимое действие, так как для пунктов меню будет использоваться свойство 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).

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

Выпадающее меню на CSS . Горизонтальное выпадающее меню

Перед написанием стилей для выпадающего меню необходимо создать структуру HTML документа. Данная структура будет представлять из себя обычный скелет сайта с добавленными тегами для меню. Меню будем создавать используя списки <UL> или <OL>.

Итак приступим к написанию основной структуры сайта


<!DOCTYPE html>
<html>
  <head>
    <title> Выпадающее меню на CSS </title>
  </head>
  <body>
   
  </body>

После того как написали основную структуру сайта необходимо создать структуру нашего меню. Для начала создадим меню верхнего уровня с помощью тегов <NAV> и <UL>


<nav>
  <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='#'>JavaScript</a></li>
  </ul>
</nav>



Меню верхнего уровня у нас создано. Теперь необходимо назначить стили для элементов меню.


nav {
     margin: 50px 0;
     bacground-color: #E94f56;
    }
nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        position: relative;
       }
nav ul li {
           margin: 0px -7px 0 0;
           display: inline-block;
           background-color: #E94f56;
           }
nav a {
       display: block;
       padding: 0 10px;
       color: #ffff;
       font-size: 23px;
       line-height: 60px;
       text-decoration: none;
       }
nav a:hover {
             backgroung-color: #000001;
            }

Проверим то что у нас получилось.


 

Теперь наше меню выглядит как меню. Теперь нам необходимо создать вложенное меню. Его мы создаем путем добавления внутрь тега <LI> еще одного списка <UL>. То есть у нас получается список в списке. Создадим структуру с вложенным меню.


<nav>
  <ul>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>HTML</a>
        <ul>
            <li><a href='#'>История HTML</a></li>
            <li><a href='#'>Структура HTML</a></li>
            <li><a href='#'>HTML5</a></li>  
        </ul>
    </li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>PHP</a></li>
    <li><a href='#'>JavaScript</a></li>
  </ul>
</nav>

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

nav ul ul {
        display: none;
        position: absolute;
        top100%;
       }
nav ul li:hover>ul {
            display: inherit;
           }
nav ul ul li {
       min-width: 180px;
       float: none;
       display:list-item;
       position: relative;
       }

Должно получиться следующее

Добавим для пункта меню с вложенным подменю соответствующий индикатор.

     li> a:after {content: '+'}
     li> a:only-child:after {content:'';}

В итоге у нас получилось следующее

 

Выпадающее горизонтальное меню на css

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

<ul>
<li><a href=»#»>Меню 1</a>
<ul>
<li><a href=»#»>Подменю 1</a></li>
<li><a href=»#»>Подменю 2</a></li>
<li><a href=»#»>Подменю 3</a></li>
</ul>
</li>
<li><a href=»#»>Меню 2</a>
<ul>
<li><a href=»#»>Подменю 1</a></li>
<li><a href=»#»>Подменю 2</a></li>
<li><a href=»#»>Подменю 3</a></li>
</ul>
</li>
<li><a href=»#»>Меню 3</a>
<ul>
<li><a href=»#»>Подменю 1</a></li>
<li><a href=»#»>Подменю 2</a></li>
<li><a href=»#»>Подменю 3</a></li>
</ul>
</li>
<li><a href=»#»>Меню 4</a></li>
<li><a href=»#»>Меню 5</a></li>
</ul>

Работоспособность данной конструкции проверена в трех основных браузерах: Mozilla Firefox, Opera, и Internet Explorer.

Этот CSS проходит проверку по стандарту CSS3 !

* {
margin:0;
padding:0;
}
#nav {
font:13px verdana, arial, helvetica, sans-serif;
list-style-type:none;
width:100%;
height:25px;
display:inline-block;
background:#A39E92;
line-height:25px;
}
#nav li{
float:left;
width:120px;
margin-top:-10000px;
}
#nav li a {
width:120px;
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
margin-right:-119px;
margin-top:10000px;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
#nav li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}
#nav li ul li {
float:none;
margin:0;
width:auto;
}
#nav li ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}

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

Иногда работающие в IE и Firefox’е стили, неработают или работают не корректно в Oper’е и наоборот, перед тем как применить «рецепт» проверяйте его работу в разных браузерах.

html — горизонтальное центрирование выпадающего меню

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

, который содержит «Контент», на вспомогательный неупорядоченный список. (Теоретически этот подсписок, в котором есть только один
  • , должен иметь возможность содержать
    с содержимым, если вы того пожелаете.)

    HTML таков:

      
      
    
    •  На главную
        
        
            
      •  Содержание 
        • 
        
      
    
      • 
    
    •  Однажды
        
        
            
      •  Содержание 
        • 
        
      
    
      • 
    
    •  Я хочу
        
        
            
      •  Содержание 
        • 
        
      
    
      • 
    
    •  Будьте в
        
        
            
      •  Содержание 
        • 
        
      
    
      • 
    
    •  Центр этой страницы
        
        
            
      •  Содержание 
        • 
        
      
    
      •

    И CSS был установлен так:

      #menu {
    выравнивание текста: центр;
    высота: 30 пикселей;
}

#menu li {
    стиль списка: нет;
    дисплей: встроенный блок;
    маржа: 5px 15px;
}

#menu li ul {
    дисплей: нет;
}

#menu li: hover ul {
    дисплей: блок;
    позиция: абсолютная;
    верх: 30 пикселей; / * высота меню * /
    слева: 25 пикселей;
    вправо: 25 пикселей;
}

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

    Этот метод основан на присвоении меню абсолютной высоты — в этом примере 30px — и последующем абсолютном позиционировании «содержимого»

    , которое появляется при наведении под ним, с top: 30px (или как угодно высота меню бывает).

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

    Написано на CSS Wizardry .

    Содержание
    1. Демо
    2. Обновление

    Центрировать элементы уровня блока легко, просто укажите ширину и установите margin: 0 auto; , г. но что, если вы не знаете эту фиксированную ширину? Вы можете использовать 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 позволит только inline-block работать с элементами, которые по своей сути встроенные элементы. дисплей: встроенный блок; не будет работать с элементами блочного уровня.

    Вот небольшая демонстрация. Попробуйте использовать Firebug или подобное, чтобы добавить другие элементы списка на лету и наблюдайте, как они легко центрируются в списке. я протестировали это в IE7-8, чтобы убедиться, что он отлично работает. Я не проверял IE6, но Думаю, все будет хорошо.

    Обновление

    Вы спросили, и я услышал; Я сделал раскрывающуюся версию этого для тебя.По строке верх: 100%; заставит раскрывающийся список работать в IE7, но вроде как немного портит опыт во всех других браузерах. Оставляете ли вы его в или не зависит от вас. Опять же, просмотрите исходный код с практическими рекомендациями…

    ☕️ Это помогло? Купи мне кофе!

    Меню — Pure

    По умолчанию меню вертикальные. Минимальный стиль по умолчанию и селекторы с низкой специфичностью позволяют легко настраивать их. По умолчанию элементы меню занимают 100% ширины своего контейнера, поэтому вы можете ограничить ширину меню или настроить отображение меню: inline-block.

      <стиль>
    .custom-limited-width {
        / * Чтобы ограничить ширину меню содержимым меню: * /
        дисплей: встроенный блок;
        / * Или явно задайте ширину: * /
        / * ширина: 10em; * /
    }

    Чтобы создать горизонтальное меню, добавьте имя класса pure-menu-horizontal .

    Выбранные и отключенные элементы

    Отметьте выбранный элемент списка, добавив к элементу списка класс pure-menu-selected .Чтобы пометить ссылку как отключенную, добавьте к элементу списка имя класса pure-menu-disabled . Отключенные элементы выглядят блеклыми и не наследуют стили наведения.

    Выпадающие списки

    Мы рекомендуем включать подменю через JavaScript, чтобы обеспечить доступность.Чтобы помочь вам начать работу, пример сценария, написанный на ванильном JS, обеспечивает поддержку ARIA, ограниченную навигацию по подменю с помощью клавиш со стрелками и возможность закрывать меню с помощью внешнего события или клавиши ESC. Но вы можете пойти дальше, добавив обнаружение краев, комплексную навигацию с помощью клавиш со стрелками и полифилы для совместимости со старыми браузерами.

    Даже с установленным JavaScript вы все равно можете отображать подменю при наведении курсора. Просто добавьте pure-menu-allow-hover в пункт списка pure-menu-has-children .Это может быть удобно для пользователей настольных компьютеров и предоставляет запасной вариант для пользователей без JavaScript.

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

    Чтобы создать горизонтальное меню с возможностью прокрутки, добавьте имя класса pure-menu-scrollable . Когда места недостаточно, пункты меню можно прокручивать или пролистывать. Выпадающие меню не поддерживаются. Если вам нужна прокрутка на основе импульса, мы рекомендуем использовать библиотеку JS, например scrollbooster, для добавления таких эффектов.

    Чтобы создать прокручиваемое вертикальное меню, ограничьте высоту вашего меню, а затем добавьте имя класса pure-menu-scrollable . Пункты меню можно прокручивать или пролистывать. Подменю не поддерживаются.

      <стиль>
    / * Настройка для ограничения высоты меню * /
    .custom-limited {
        высота: 160 пикселей;
        ширина: 150 пикселей;
        граница: сплошной серый цвет 1px;
        радиус границы: 4 пикселя;
    }

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

    Горизонтальное меню, подменю на всю ширину · GitHub

    Горизонтальное меню, подменю на всю ширину · GitHub

    Мгновенно делитесь кодом, заметками и фрагментами.

    Горизонтальное меню, подменю полной ширины

    // css
    #menu {
    ширина: 960 пикселей;
    высота: 40 пикселей;
    ясно: оба;
    }
    ul # nav {
    поплавок: левый;
    ширина: 960 пикселей;
    маржа: 0;
    отступ: 0;
    стиль списка: нет;
    фон: # dc0000 url (. ./img/menu-parent.png) repeat-x;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10 пикселей;
    }
    ul # nav li {
    дисплей: встроенный;
    }
    ul # nav li a {
    поплавок: левый;
    шрифт: полужирный 1. 1em arial, verdana, tahoma, sans-serif;
    высота строки: 40 пикселей;
    цвет: #fff;
    оформление текста: нет;
    тень текста: 1px 1px 1px # 880000;
    маржа: 0;
    отступ: 0 30 пикселей;
    фон: # dc0000 url (../img/menu-parent.png) repeat-x;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10 пикселей;
    }
    / * ПРИМЕНИМО АКТИВНОЕ СОСТОЯНИЕ * /
    ul # nav. current a, ul # nav li: hover> a {
    цвет: #fff;
    оформление текста: нет;
    тень текста: 1px 1px 1px # 330000;
    фон: # bb0000;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10 пикселей;
    }
    / * СПИСОК ПОДМЕНЮ, СКРЫТЫЙ ПО УМОЛЧАНИЮ * /
    ul # nav ul {
    дисплей: нет;
    }
    / * ПРИ ЗАКРЫТИИ ПУНКТА МЕНЮ ПЕРВОГО УРОВНЯ ПОЯВЛЯЕТСЯ ДЕТСКОЕ МЕНЮ * /
    ul # nav li: hover> ul {
    позиция: абсолютная;
    дисплей: блочный;
    ширина: 920 пикселей;
    высота: 45 пикселей;
    позиция: абсолютная;
    поле: 40 пикселей 0 0 0;
    фон: # aa0000 url (. ./img/menu-child.png) repeat-x;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    }
    ul # nav li: hover> ul li a {
    поплавок: левый;
    шрифт: полужирный 1.1em arial, verdana, tahoma, sans-serif;
    высота строки: 45 пикселей;
    цвет: #fff;
    оформление текста: нет;
    тень текста: 1px 1px 1px # 110000;
    маржа: 0;
    отступ: 0 30 пикселей 0 0;
    фон: # aa0000 url (. ./img/menu-child.png) repeat-x;
    }
    ul # nav li: hover> ul li a: hover {
    цвет: # 120000;
    оформление текста: нет;
    тень текста: нет;
    }
    Вы не можете выполнить это действие в настоящее время.Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс. Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.

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

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

    Хорошо, сначала создайте HTML-меню, используя неупорядоченный список:

    Затем вам нужно создать новый файл CSS и прикрепить его к странице HTML:

    Убедитесь, что вы поместили код вложения CSS в тег своей html-страницы.

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

    В результате у вас должен быть следующий HTMl-код:

     dtd">

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

    Что касается горизонтального меню, нужно внести некоторые изменения в HTML и CSS.

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

    • Автор записи

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

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