Главнаяhtml и cssКак сделать меню

Как сделать меню в html

как сделать меню

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

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


Как сделать меню на html

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

К примеру, для создания меню мы используем список с классом class="menu" (название класса любое, только латинские буквы), и код html будет выглядеть так:


<style type="text/css">      <!-- Стилевое оформление для меню -->
  .menu {
     margin: 0;
     padding: 0;
     list-style-type: none;
     }
</style>

<ul class="menu">                      <!-- Маркированный список меню -->
   <li><a href="#">Главная</a></li>    <!-- Пункты меню -->
   <li><a href="#">Статьи</a></li>
   <li><a href="#">Обо мне</a></li>
   <li><a href="#">Контакты</a></li>
</ul>

В стилевом оформление для меню я указал обязательные свойства с нужными значениями:

Обязательные параметры и значения CSS
  • margin: 0; - убираем все отступы списка, иначе браузер подставит значения по умолчанию 20px;
  • list-style-type: none; - убираем маркеры у пунктов меню, иначе браузер добавит точки или цифры.

Вот таким образом делается меню на html страницах, и теперь перейдём к созданию горизонтального меню и рассмотрим всё на примерах.


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

Для отображения горизонтального меню применяя список, нам достаточно прописать в вышеуказанный код всего один параметр display: inline;, чтобы пункты меню выровнялись в одну строку и шли друг за другом по горизонтали. А так же добавим отступы между пунктами меню с помощью margin.


<style type="text/css">
  .menu {
     margin: 0;
     padding: 0;
     list-style-type: none;
     }
  .menu li {
     margin: 0 10px 0 0;
     padding: 0;
     display: inline-block;
     }
</style>

<ul class="menu">
   <li><a href="#">Главная</a></li>
   <li><a href="#">Статьи</a></li>
   <li><a href="#">Обо мне</a></li>
   <li><a href="#">Контакты</a></li>
</ul>

И выглядеть это будет так:



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

Давайте каждому пункту в горизонтальном меню придадим рамку border и сделаем у неё скошенные края, заполним определённым цветом background-color (добавим фон для пункта меню), и изменим вид ссылки.


<style type="text/css">
  .menu-2 {
     margin: 0;
     padding: 0;
     height: auto;
     list-style-type: none;
     background-color: #6699ff;
     text-align: center;
     }
  .menu-2 li {
     margin: 8px 10px 8px 0;
     padding: 2px 14px 4px;
     background-color: #4960fb;
     border: 2px solid #071eb9;
     border-radius: 1px 20px;
     display: inline-block;
     transition: all 0.7s ease 0s;
     }
  .menu-2 a {
    color: #f2f2f2;
    text-decoration: none;
    }
  .menu-2 li:hover {
    background-color: #ccc;
    border-radius: 20px 1px;
    }
  .menu-2 li:hover a {
    color: #0e25c0;
    }
</style>

<ul class="menu-2">
   <li><a href="#">Главная</a></li>
   <li><a href="#">Статьи</a></li>
   <li><a href="#">Обо мне</a></li>
   <li><a href="#">Контакты</a></li>
</ul>

Отображаться горизонтальное меню уже будет таким образом:





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

И для наглядности сделал пункты меню по центру, применив свойство text-align: center;, которое можно удалить (выровняется автоматически по левому краю), либо задать значение text-align: right; и горизонтальное меню отобразится по правому краю.

Кстати вы можете так же воспользоваться готовое меню на css и jQuery, которые вы можете там воочию посмотреть и бесплатно скачать.


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

Вертикальное меню на CSS делается и оформляется на странице практически так же как и горизонтальное, только здесь изменяется в .menu-2 li {... параметр со значением display: block; (указывает на блочный элемент), что придаёт ему вертикальное отображение пунктов меню.

И ещё одно дополнение к вертикальному меню: так как оно в большинстве случаев находится в боковой колонке сайта, которое имеет фиксированную ширину, то и мы вынуждены задать ширину width: 100%; нашему вертикальному меню, чтобы оно полностью занимало всю ширину колонки.

Давайте рассмотрим вертикальное меню CSS на примере:


<style type="text/css">
  .saitbar {
     margin: 0 auto;
     padding: 0;
     width: 240px;
     }
  .menu-3 {
     margin: 0;
     padding: 0;
     background-color: #999;
     height: auto;
     list-style-type: none;
     }
  .menu-3 li {
     margin: 0 0 2px;
     padding: 0;
     background-color: #990000;
     border-left: 26px solid #273ed9;
     transition: all 0.7s ease 0s;
     display: block;
     }
  .menu-3 a {
     padding: 6px 0 8px 10px;
     color: #f2f2f2;
     text-decoration: none;
     border-left: 6px solid #5269ff;
     transition: all 0.7s ease 0s;
     display: block;
     }
  .menu-3 li:hover {
     background-color: #ccc;
     }
  .menu-3 li:hover a {
     color: #0e25c0;
     padding: 6px 0 8px 22px;
     border-left: 6px solid #900000;
     }
</style>

<div class="saitbar">
<ul class="menu-3">
   <li><a href="#">Первый пункт меню</a></li>
   <li><a href="#">Второй пункт меню</a></li>
   <li><a href="#">Третий пункт меню</a></li>
   <li><a href="#">Четвёртый пункт меню</a></li>
</ul>
</div>

Вот так вертикальное меню отобразится на странице:





Будьте внимательны!
<div class="saitbar"> я прописал для вертикального меню вместо боковой колонки сайта, поэтому вы его удалите и в конце кода </div> то же удалить.


Как сделать выпадающее меню на CSS

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

Обязательно запомните!
Для того, чтобы выпадающее меню строго появлялось напротив ведущей ссылки, необходимо в CSS для тега li, где находится эта ссылка, прописать position: relative;, а для выпадающего меню position: absolute;

Давайте напишем html код для выпадающего меню на CSS.


<style type="text/css">
  .saitbar {
     margin: 0 auto;
     padding: 0;
     width: 240px;
     }
  .menu-4, .menu-4 .podmenu, .menu-4 .podmenu-2 {
     margin: 0;
     padding: 0;
     background-color: #999;
     height: auto;
     list-style-type: none;
     }
  .menu-4 li {
     margin: 0 0 2px;
     padding: 0;
     background-color: #990000;
     border-left: 26px solid #273ed9;
     transition: all 0.7s ease 0s;
     display: block;
     position: relative;
     }
  .menu-4 a {
     padding: 6px 0 8px 10px;
     color: #f2f2f2;
     text-decoration: none;
     border-left: 6px solid #5269ff;
     transition: all 0.7s ease 0s;
     display: block;
     }
  .menu-4 li:hover {
     background-color: #ccc;
     }
  .menu-4 li:hover a {
     color: #0e25c0;
     padding: 6px 0 8px 22px;
     border-left: 6px solid #900000;
     }
  .menu-4 ul.podmenu, .menu-4 ul.podmenu-2 {
     display: none;
     position: absolute;
     top: 0;
     width: 150px;
     background-color: #ccc;
     }
  .menu-4 ul.podmenu {
     left: 214px;
     }
  .menu-4 ul.podmenu-2 {
     left: 150px;
     }
  .menu-4 li:hover .podmenu, .podmenu li:hover .podmenu-2 {
     display: block;
     padding: 4px 0 4px 14px;
     }
  .menu-4 .podmenu li, .podmenu .podmenu-2 li {
     margin: 0;
     padding: 0;
     background-color: #ccc;
     border-left: 0 solid #273ed9;
     transition: all 0.7s ease 0s;
     display: block;
     }
  .menu-4 .podmenu li a, .podmenu .podmenu-2 li a {
     border-left: 0 solid #900000;
     padding: 4px 10px;
     color: #444;
     font-size: 14px;
     border-bottom: 1px dotted #999;
     }
  .menu-4 .podmenu li a:hover, .podmenu .podmenu-2 li a:hover {
     color: #0e25c0;
     }
</style>

<div class="saitbar">
 <ul class="menu-4">
   <li><a href="#">Первый пункт меню</a></li>
   <li><a href="#">Второй пункт меню ⇒</a>
     <ul class="podmenu">
       <li><a href="#">Первый подпункт</a></li>
       <li><a href="#">Второй подпункт</a></li>
       <li><a href="#">Третий подпункт ⇒</a>
         <ul class="podmenu-2">
           <li><a href="#">Первая ссылка</a></li>
           <li><a href="#">Вторая ссылка</a></li>
           <li><a href="#">Третья ссылка</a></li>
           <li><a href="#">Четвёртая ссылка</a></li>
         </ul>
       </li>
       <li><a href="#">Четвёртый подпункт</a></li>
     </ul>
   </li>
   <li><a href="#">Третий пункт меню ⇒</a>
     <ul class="podmenu">
       <li><a href="#">Первая ссылка</a></li>
       <li><a href="#">Вторая ссылка</a></li>
       <li><a href="#">Третья ссылка</a></li>
       <li><a href="#">Четвёртая ссылка</a></li>
     </ul>
   </li>
   <li><a href="#">Четвёртый пункт меню</a></li>
 </ul>
</div>

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





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

Посмотрите!
Как сделав всего 3 изменения в CSS, наше вертикальное расположение навигации с выпадающим меню, превратиться в горизонтальное с выпадающим меню.





Изменения в CSS для выпадающего меню
  • Заменить в .saitbar - width: 240px; на width: 100%;
  • Заменить в .menu-4 li - display: block; на display:inline-block;
  • Заменить в .menu-4 ul.podmenu - top: 0; на top: 34px;
  • Заменить в .menu-4 ul.podmenu - left: 214px; на left: 7px;

Рейтинг: 4.6/5     Оценили: 27

Похожие публикации

Комментарии к статье 0