Содержание

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

Горизонтальное меню с вертикальным подменю (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 я не видел ни одного подменю с вертикальной ориентацией главного меню. Примерная структура структуры…

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

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

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

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

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

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

<header>

    <h4>Header</h4>

</header>

<main>

    <nav>

        <ul>

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

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

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

</ul>

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

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

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

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.

<header>

    <h4>Header</h4>

    <nav>

        <ul>

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

Загрузка…

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

Выпадающее горизонтальное меню с поиском на CSS3 и HTML5