сряда, 25 февруари 2026 г.

Видове менюта за сайт

 

🔹 1. Хоризонтално меню

📄 HTML

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <title>Хоризонтално меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<nav class="horizontal-menu">
    <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>
</nav>

</body>
</html>

🎨 CSS (style.css)

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.horizontal-menu {
    background-color: #2c3e50;
}

.horizontal-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;              /* Подрежда елементите хоризонтално */
}

.horizontal-menu li {
    flex: 1;                    /* Всички бутони са с еднаква ширина */
}

.horizontal-menu a {
    display: block;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    color: white;
    transition: background 0.3s;
}

.horizontal-menu a:hover {
    background-color: #34495e;
}

🔹 2. Вертикално меню

📄 HTML

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <title>Вертикално меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<nav class="vertical-menu">
    <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>
</nav>

</body>
</html>

🎨 CSS (style.css)

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.vertical-menu {
    width: 200px;
    background-color: #2c3e50;
}

.vertical-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vertical-menu li {
    border-bottom: 1px solid #34495e;
}

.vertical-menu a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: white;
    transition: background 0.3s;
}

.vertical-menu a:hover {
    background-color: #34495e;
}

📌 Разлика накратко 

  • Хоризонтално меню → използва display: flex;

  • Вертикално меню → елементите са подредени стандартно един под друг

  • list-style: none; → маха точките

  • display: block; → прави целия ред кликаем


🔹 Падащо хоризонтално меню (Dropdown)

📄 HTML

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <title>Падащо меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<nav class="menu">
    <ul>
        <li><a href="#">Начало</a></li>
        
        <li class="dropdown">
            <a href="#">Услуги</a>
            <ul class="submenu">
                <li><a href="#">Уеб дизайн</a></li>
                <li><a href="#">SEO оптимизация</a></li>
                <li><a href="#">Поддръжка</a></li>
            </ul>
        </li>

        <li><a href="#">За нас</a></li>
        <li><a href="#">Контакти</a></li>
    </ul>
</nav>

</body>
</html>

🎨 CSS (style.css)

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.menu {
    background-color: #2c3e50;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu > ul {
    display: flex; /* Хоризонтално меню */
}

.menu li {
    position: relative; /* Нужно за падащото меню */
}

.menu a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
}

.menu a:hover {
    background-color: #34495e;
}

/* Скрито подменю */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #34495e;
    min-width: 180px;
}

/* Показване при hover */
.dropdown:hover .submenu {
    display: block;
}

.submenu li {
    width: 100%;
}

.submenu a {
    padding: 10px 15px;
}

📌 Как работи 

  • position: relative; → родителят става ориентир

  • position: absolute; → подменюто се позиционира спрямо родителя

  • display: none; → скрива подменюто

  • .dropdown:hover .submenu → показва го при задържане на мишката

Публикувано от в