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

31.07.2019 Facebook Twitter LinkedIn Google+ Разное

Содержание

Горизонтальное меню с вертикальным подменю (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 ответа

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

    Мне нужны какие-то коды или opensource, где мне нужно меню такого рода: меню 1: меню 2: Изображение меню 1 — это подменю из основной навигации и Изображение Меню 2 является вертикальным, и если подменю больше, чем просто один столбец (определенная высота, как на изображении), оно переходит ко. ..

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

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


1

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


1

Просто попробуйте этот обновленный 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


1

    #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

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

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

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

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


0

<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

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


Как создать горизонтальное меню HTML с вертикальным подменю, используя только CSS?

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


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

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


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

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


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

Мне нужны какие-то коды или opensource, где мне нужно меню такого рода: меню 1: меню 2: Изображение меню 1 — это подменю из основной навигации и Изображение Меню 2 является вертикальным, и если…


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

Мне было интересно, есть ли способ сделать горизонтальное меню css с горизонтальным текстом вертикальным подменю с вертикальным текстом.. я попробовал, но при вращении второго ul (для вертикального)…


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

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


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

Как я могу создать css меню и подменю, как это.

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


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

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


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

отличные ответы я получил на вопрос, который опубликовал ранее( появляются при наведении курсора и остаются видимыми ). Было очень сложно редактировать css и html, потому что я просто скопировал и…


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

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

Выпадающее меню на 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

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;
}

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

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

HTML

1. Создадим разметку кода в html. Дадим меню уникальный id.

CSS

Разметка готова, теперь добавим стили-CSS для неё, не забываем указывать нужное id.


#menu {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-family: Georgia;
	}
#menu li {
	list-style: none;
	float: left;
	height: 33px;
	padding: 0;
	margin: 0;
	width: 150px;
	text-align: center;
	background: #171717;
	position: relative;
	padding-top: 12px;
	}
#menu li ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 150px;
	display: none;
	position: absolute;
	left: 0;
	top: 45px;
	}
#menu li ul li {
	float: none;
	height: 33px;
	margin: 0;
	width: 150px;
	text-align: center;
	background: #7F7F7F;
	}
#menu li a {
	display: block;
	width: 150px;
	height: 33px;
	color: #fff;
	text-decoration: none;
	}
#menu li:hover ul, #menu li:hover ul {
	display: block;
	}
#menu li:hover, #menu li:hover {
	background: #424242;
	}

Просто вставьте этот код и меню будет работать.

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

Вот так просто и создаётся меню, достаточно просто скопировать код и вы увидите такой результат.

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

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Я решил создать новую рубрику Создание и оформление сайтов, в этой рубрике будет много вкусного и интересного. Поскольку, здесь я буду писать о реальных примерах. Тема сегодняшней публикации — создание CSS меню, которая находится в разделе CSS меню.

Любое CSS меню должно отвечать нескольким требованиям: CSS меню должно быть удобным, компактным, доступным для пользователя. Чтобы меню сайта было компактным и удобным его следует делать выпадающим. Конечно, выпадающее CSS меню не будет корректно работать в старых браузерах таких как IE6. Выпадающее меню удобно тем, что не занимает много места на веб-странице. В данном примере не будет использоваться JavaScript и библиотека JQuery — а это означает, что выпадающее меню будет доступно для пользователей, у которых в настройках браузера отключены скрипты.

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

Создание CSS меню. Создание выпадающего меню. Шаг 1 — создаем вертикальное HTML меню.

Содержание статьи:

Для начала мы создаем маркированный HTML список при помощи тега <ul> и тега <li>:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> <span><span><> </span></span><ul> <li>Первый пункт</li> <li>Второй пункт <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> </ul> </li> <li>Третий пункт <ul> <li>Первый подпункт</li> <li>Второй подпункт</li> <li>Третий подпункт</li> </ul> </li> <li>Четвертый пункт</li> </ul> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

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

<title>Создание CSS меню</title>

</head>

<body>

<span><span><>

</span></span><ul>

<li>Первый пункт</li>

<li>Второй пункт

<ul>

<li>Первый подпункт</li>

<li>Второй подпункт</li>

</ul>

</li>

<li>Третий пункт

<ul>

<li>Первый подпункт</li>

<li>Второй подпункт</li>

<li>Третий подпункт</li>

</ul>

</li>

<li>Четвертый пункт</li>

</ul>

</body>

 

</html>

Примерно должно получиться что-то типа такого списка:

  • Первый пункт
  • Второй пункт
    • Первый подпункт
    • Второй подпункт
  • Третий пункт
    • Первый подпункт
    • Второй подпункт
    • Третий подпункт
  • Четвертый пункт

Конечно, это еще не меню и даже не навигация, поскольку ни один из пунктов HTML списка не является ссылкой. Теперь нужно сделать каждый пункт нашего HTML списка ссылкой. Таким образом, у нас получится вертикальное HTML меню, таблицу стилей (css) мы еще пока не будем трогать и подключать. Чтобы пункты HTML списка стали ссылками, содержимое каждого элемента <li> внутрь тега <a>:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> div> <ul> <li><a href=»#»>Первый пункт</a></li> <li><a href=»#»>Второй пункт</a> <ul> <li><a href=»#»>Первый </a></li> <li><a href=»#»>Второй </a></li> <li><a href=»#»>Третий </a></li> </ul> </li> <li><a href=»#»>Третий пункт</a> <ul> <li><a href=»#»>Первый подпункт</a></li> <li><a href=»#»>Второй подпункт</a></li> </ul> </li> <li><a href=»#»>Четвертый пункт</a></li> </ul> <div> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

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

<title>Создание CSS меню</title>

</head>

<body>

div>

<ul>

<li><a href=»#»>Первый пункт</a></li>

<li><a href=»#»>Второй пункт</a>

<ul>

<li><a href=»#»>Первый </a></li>

<li><a href=»#»>Второй </a></li>

<li><a href=»#»>Третий </a></li>

</ul>

</li>

<li><a href=»#»>Третий пункт</a>

<ul>

<li><a href=»#»>Первый подпункт</a></li>

<li><a href=»#»>Второй подпункт</a></li>

</ul>

</li>

<li><a href=»#»>Четвертый пункт</a></li>

</ul>

<div>

</body>

 

</html>

Теперь мы получили вертикальное HTML меню. У тега <a> есть атрибут href, в котором следует указывать адрес страницы, на который будет вести ссылка, у меня нет необходимости этого делать, поэтому в качестве адреса я указал символ # или забой. Ссылки, у которых в качестве значения атрибута href указан #, никуда не ведут. Обратите внимание: вертикальной HTML меню я поместил в контейнер <div>, поскольку в спецификации HTML 4 есть правило: внутри элемента <body> могут находиться только блочные элементы и элементы <ins> и <del>. У тега <div> есть один атрибут id со значением «block». У корневого тега <ul> есть атрибут id со значением «hnav», этот атрибут потребуется нам для создания вертикального и горизонтального CSS меню.

Создание CSS меню. Выпадающее меню. Шаг 2 — создаем горизонтальное CSS меню.

Далее мы будем задавать стили CSS для нашего будущего меню. Для начала, давайте зададим стиль для контейнера <ul> со значением hnav атрибута id, то есть общий стиль для нашего выпадающего меню:

#hnav { list-style: none; margin: 0; padding: 0; font-size: 1.2em; float: right; position: relative }

#hnav {

list-style: none;

margin: 0;

padding: 0;

font-size: 1.2em;

float: right;

position: relative

 

}

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

Свойство margin делает нулевым отступ от края элемента ul. Свойство paddin убирает внутренние отступы HTML элемента ul. Свойство font-size задает размер текста пунктов нашего CSS меню. Свойство float позволяет выравнять CSS меню, в нашем случае по правому краю. Свойство position со значение relative позиционирует контейнер ul относительно его исходного места.

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

#hnav li { float: left; position: relative; }

#hnav li {

 

float: left;

 

position: relative;

 

}

Для каждого элемента li, которые находятся внутри контейнера ul мы задаем два свойства: float со значением left (тем самым мы добиваемся того, что наше CSS меню стало горизонтальным) и опять же, задаем свойство position со значением relative, чтобы элементы заняли свое место.

Теперь мы можем задать стили, для содержимого контейнеров li, то есть стили для пунктов горизонтального CSS меню:

#hnav li a{ float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-right: 10px; }

#hnav li a{

float: left;

display: block;

padding: 4px;

text-decoration: none;

color: #666;

text-transform: uppercase;

margin-right: 10px;

}

Свойство display имеет значение block, это говорит нам о том, что пункты нашего CSS меню будут вести себя как блочные (в данном случае контейнеры <a>, тег <a> сам по себе строчный элемент). Свойство padding устанавливает внутренние отступы между пунктами меню, чтобы те не накладывались друг на друга. Значение none свойства text-decoration позволяет убрать подчеркивание у ссылок(меню же из ссылок состоит). Свойство color задает цвет текста внутри контейнера <a>. Свойство text-transform: uppercase; задает начертание текста нашего CSS меню, а именно, весь текст будет написан прописными буквами.

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

#hnav li:hover a, #hnav li a:hover { background: #999; color: #fff; }

#hnav li:hover a,

#hnav li a:hover

{

background: #999;

color: #fff;

}

Свойство color изменяет цвет текста пункта меню при наведение на него курсора мыши. Свойство background задает цвет фона пункта CSS меню при наведение курсора на пункт.

Теперь мы можем «спрятать» вложенные пункты меню:

#hnav ul {display: none;}

#hnav ul {display: none;}

После того, как мы «спрятали» пункты выпадающего меню, нужно сделать так, чтобы эти пункты выпадали при наведение курсора:

#hnav li:hover ul {display: block;} #hnav ul { float: none; position: absolute; list-style: none; margin: 0; padding: 0; top: 1. 8em; left: 0; } #hnav ul li { float: none; clear: none; margin: 0; padding: 0; width: auto; color: #999; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

 

#hnav ul

{

float: none;

position: absolute;

list-style: none;

margin: 0;

padding: 0;

top: 1.8em;

left: 0;

}

 

#hnav ul li

{

float: none;

clear: none;

margin: 0;

padding: 0;

width: auto;

color: #999;

}

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

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

#hnav li:hover ul li a, #hnav ul li a { line-height: 200%; display: block; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; } #hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; } <span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

#hnav li:hover ul li a,

#hnav ul li a

{

line-height: 200%;

display: block;

padding: 0 6px 0 0;

float: none;

text-transform: lowercase;

color: #999;

background: none;

}

 

#hnav li:hover ul li a:hover,

#hnav ul li a:hover

{

background: none;

color: #000;

}

 

<span>

Как видите, мы создали горизонтальное выпадающее CSS меню, при этом, не используя JavaScript. Можно перейти к созданию вертикального CSS меню.

Так будет выглядеть горизонтальное выпадающее CSS меню:

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

Создание CSS меню. Выпадающее меню. Шаг 3 — создаем вертикальное CSS меню.

Приступим к созданию вертикального CSS меню. Для начала создаем маркированный HTML список, точно такой же, как и для горизонтального меню:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Создание CSS меню</title> </head> <body> div> <ul> <li><a href=»#»>Первый пункт</a></li> <li><a href=»#»>Второй пункт</a> <ul> <li><a href=»#»>Первый </a></li> <li><a href=»#»>Второй </a></li> <li><a href=»#»>Третий </a></li> </ul> </li> <li><a href=»#»>Третий пункт</a> <ul> <li><a href=»#»>Первый подпункт</a></li> <li><a href=»#»>Второй подпункт</a></li> </ul> </li> <li><a href=»#»>Четвертый пункт</a></li> </ul> <div> </body> </html> <span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3. org/TR/html4/loose.dtd»>

<html>

<head>

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

<title>Создание CSS меню</title>

</head>

<body>

div>

<ul>

<li><a href=»#»>Первый пункт</a></li>

<li><a href=»#»>Второй пункт</a>

<ul>

<li><a href=»#»>Первый </a></li>

<li><a href=»#»>Второй </a></li>

<li><a href=»#»>Третий </a></li>

</ul>

</li>

<li><a href=»#»>Третий пункт</a>

<ul>

<li><a href=»#»>Первый подпункт</a></li>

<li><a href=»#»>Второй подпункт</a></li>

</ul>

</li>

<li><a href=»#»>Четвертый пункт</a></li>

</ul>

<div>

</body>

 

</html>

 

<span>

Разница только в имени идентификатора для корневого элемента списка <ul>, поскольку для вертикального и горизонтального меню у меня находятся в одном файле.

Теперь можно задать общие стили для отображения CSS меню:

#vnav { width: 400px; float: left; list-style: none; margin: 0; padding: 0; font-size: 1.2em; }

#vnav {

width: 400px;

float: left;

list-style: none;

margin: 0;

padding: 0;

font-size: 1.2em;

}

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

Далее задаем стили для всех пунктов HTML списка:

#vnav li { clear: both; height: 2em; }

#vnav li

{

clear: both;

height: 2em;

}

Свойство height задает высоту элементов CSS меню, clear запрещает обтекание вокруг HTML элемента, значение both говорит о том, что ни с левой, ни с правой стороны наше вертикальное меню не будет обтекания.

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

#vnav li a { float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-bottom: 5px; margin-right: 10px; }

#vnav li a

{

float: left;

display: block;

padding: 4px;

text-decoration: none;

color: #666;

text-transform: uppercase;

margin-bottom: 5px;

margin-right: 10px;

}

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

Теперь мы задаем то, как будут отображаться родительские элементы вертикального CSS меню при наведение на них курсора мыши:

#vnav li:hover a, #vnav li a:hover { background: #999; color: #fff; }

#vnav li:hover a,

#vnav li a:hover

{

background: #999;

color: #fff;

}

Теперь мы должны сделать подпункты вертикального CSS меню невидимыми:

#vnav ul {display: none;}

#vnav ul {display: none;}

После чего следует задать CSS правила, по которым подпункты меню будут выпадать при наведение курсора на родительский элемент:

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

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

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

#hnav ul { list-style: none; float: left; margin: 0; padding: 4px 8px; }

#hnav ul

{

list-style: none;

float: left;

margin: 0;

padding: 4px 8px;

}

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

#hnav ul li { float: left; clear: none; margin: 0; padding: 0; width: auto; height: auto; color: #999; }

#hnav ul li

{

float: left;

clear: none;

margin: 0;

padding: 0;

width: auto;

height: auto;

color: #999;

}

Свойство float: left делает отображение подпунктов меню в линию.

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

#hnav li:hover ul li a, #hnav ul li a { display: inline; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; } #hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#hnav li:hover ul li a,

#hnav ul li a

{

display: inline;

padding: 0 6px 0 0;

float: none;

text-transform: lowercase;

color: #999;

background: none;

}

 

#hnav li:hover ul li a:hover,

#hnav ul li a:hover

{

background: none;

color: #000;

}

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

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

Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

Выпадающее горизонтальное меню на 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’е и наоборот, перед тем как применить «рецепт» проверяйте его работу в разных браузерах.

CSS: создание горизонтального меню | СХОСТ блог

Для того, чтобы создать горизонтальное меню, вам нужно добавить в HTML-документ блок <div> с нумерованным списком внутри. При этом одному из пунктов необходимо присвоить id. Уточним, что символ “#” означает адрес ссылки. Например:

<html>

<head>

<meta charset=»utf-8″>

<title>Горизонтальное меню</title>

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

</head>

<body>

<div>

<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>

</ul>

</div>

</body>

</html>

Поле этого нужно сделать несколько действий:

#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 — элементы горизонтального списка

html — элементы горизонтального списка — qaru

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

Спросил

Просмотрено 163к раз

Итак, я попытался создать горизонтальный список для использования на новом веб-сайте, который я разрабатываю.Я попробовал ряд предложений, уже найденных в Интернете, таких как установка «float» влево и тому подобное — но ни одно из них не помогло, когда дело дошло до решения проблемы.

  ul # menuItems {
      фон: нет;
      высота: 50 пикселей;
      ширина: 100 пикселей;
      маржа: 0;
      отступ: 0;
    }
    ul # menuItems li {
      дисплей: встроенный;
      стиль списка: нет;
      маржа слева: авто;
      маржа-право: авто;
      верх: 0px;
      высота: 50 пикселей;
    }
    ul # menuItems li a {
      семейство шрифтов: Arial, Helvetica, sans-serif;
      текстовое оформление: нет;
      font-weight: жирнее;
      цвет: # 000;
      высота: 50 пикселей;
      ширина: авто;
      дисплей: блок;
      выравнивание текста: центр;
      высота строки: 50 пикселей;
    }

В настоящее время я не уверен, что вызывает эту проблему, как мне ее решить?

BSMP

3,78077 золотых знаков3131 серебряный знак4141 бронзовый знак

Создан 29 мар.

1

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

  ul> li {
    дисплей: встроенный блок;
    / * Вы также можете добавить сюда поля, чтобы он выглядел красивее * /
    масштабирование: 1;
    * дисплей: встроенный;
    / * это исправление необходимо для IE7- * /
}
Comments
Leave Comment