DirectoryWeb
    • Каталог
      • Скрипты
      • Боты
      • Программы
      • Android, iOS приложения
    • Арбитраж трафика
      • Тизерные сети
      • SMS рассылки
      • Telegram Ads
      • Анализ трафика
      • Видео трафик
      • Автоматизация
      • CPA-сети
      • Push-реклама
      • Popunder реклама
      • Нативная реклама
      • Ретаргетинг
      • Кейсы
      • Трекеры
      • Партнёрские программы
        • Товарные партнерки
        • Финансовые партнерки
        • Партнерки интернет-магазинов
        • Зарубежные партнерки
      • Реклама в Telegram
      • Сервисы
        • Прокси
        • Виртуальные карты
      • Инструменты
        • Мультиаккаунтинг
      • Обзоры
      • Мануалы
      • Антидетект-браузеры
    • Статьи
      • Маркетплейсы
      • Безопасность в сети
      • Заработок в интернете
      • Сайтостроение
      • Оптимизация сайтов
      • Обучение
      • Криптовалюты
      • Новости
      • Разное
      • Новости сайта
  • Контакты
  • Telegram
  • Вход / Регистрация

купить скрипт казино

Psb.Hosing - Хостинговое решение для быстрой и стабильной работы ваших проектов.
Купить резедентные прокси
Vibix - надеждый видео-балансир
    Заработок в интернете без вложений » Статьи » Сайтостроение » Как сделать вертикальное меню для сайта

Отзывы

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

Статьи / Сайтостроение

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

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

Итак, что же для этого нужно? Всё очень просто для начала создаем стили для нашего вертикального меню. Открываем файл стилей Вашего сайта и добавляем туда следующее:

 Показать / Скрыть текст
.vertical-menu {    list-style: none;     padding: 10px;      width: 220px;     border: 2px solid #000000;     border-radius: 3px;      -moz-border-radius: 3px;    -webkit-border-radius: 3px;     background: #4a72a9;     background: -moz-linear-gradient(top, #2f86fd 3%, #4a72a9 51%, #1c58a9 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#2f86fd), color-stop(51%,#4a72a9), color-stop(100%,#1c58a9));    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f86fd', endColorstr='#1c58a9',GradientType=0 ); }.vertical-menu .button {    outline: 0;     padding: 5px 10px;     display: block;     color: #ebeded;      font-weight: bold;     text-shadow: 1px 1px #000000;     border: 1px solid #000000;     border-radius: 3px;     -moz-border-radius: 3px;      -webkit-border-radius: 3px;      background: #b8bdc9;     background: -moz-linear-gradient(top, #b8bdc9 3%, #b8bdc4 5%, #797a7c 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#b8bdc9), color-stop(5%,#b8bdc4), color-stop(100%,#797a7c));}.vertical-menu .button:hover {    background: #5F6B72;    background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#5F6B72), color-stop(4%,#56646C), color-stop(50%,#4D5A62), color-stop(100%,#434D54)); }.vertical-menu .button:active {    padding: 5px 10px;     top: 0;    background: #515B62;     background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147));}


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

 Показать / Скрыть текст
<ul class="vertical-menu">    <li><a href='/раздел1/' class='button'>РАЗДЕЛ #1</a></li>    <li><a href='/раздел2/' class='button'>РАЗДЕЛ #2</a></li>    <li><a href='/раздел3/' class='button'>РАЗДЕЛ #3</a></li>    <li><a href='/раздел4/' class='button'>РАЗДЕЛ #4</a></li></ul>


Теперь вам расскажу подробнее про функции в файле стилей, за что отвечает то или иное значение параметра.

Внешний вид:

 Показать / Скрыть текст
.vertical-menu {    list-style: none;     padding: 10px;      width: 220px;     border: 2px solid #000000;     border-radius: 3px;      -moz-border-radius: 3px;    -webkit-border-radius: 3px;     background: #4a72a9;     background: -moz-linear-gradient(top, #2f86fd 3%, #4a72a9 51%, #1c58a9 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#2f86fd), color-stop(51%,#4a72a9), color-stop(100%,#1c58a9));    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f86fd', endColorstr='#1c58a9',GradientType=0 ); }


- "padding: 10px;" - внутренние отступы для блока кнопок. На демо-примере это наша "рамка" синего цвета;
- "width: 220px;" - ширина блока меню;
- "border: 2px solid #000000;" - рамка самого блока меню и его цвет. На нашем примере - это обводка черного цвета, шириной в 2 пикселя;
- "border-radius: 3px;" - радиус закругления углов блока. У нас в 3 пикселя, можете сделать и более, но не переусердствуйте, так как сглаживание углов будет нечетким. Параметры "-moz" и "-webkit" указывают об закруглении браузерам сафари, хром и мозила, так как они требуют конкретики для себя :);
- "background: #4a72a9;" - цвет фона. В "-moz" и "-webkit" цвет фона задается с переходом из трех цветов. В "filter:" - для IE задаются два цвета - верх и низ.

Вид кнопок:

 Показать / Скрыть текст
.vertical-menu .button {    outline: 0;     padding: 5px 10px;     display: block;     color: #ebeded;      font-weight: bold;     text-shadow: 1px 1px #000000;     border: 1px solid #000000;     border-radius: 3px;     -moz-border-radius: 3px;      -webkit-border-radius: 3px;      background: #b8bdc9;     background: -moz-linear-gradient(top, #b8bdc9 3%, #b8bdc4 5%, #797a7c 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#b8bdc9), color-stop(5%,#b8bdc4), color-stop(100%,#797a7c));}



- "padding: 5px 10px;" - отступы от краев;
- "color: #ebeded;" - цвет текста";
- "font-weight: bold;" - курсив текста. В нашем случае - "жирный";
- "text-shadow: 1px 1px #000000;" - "тень" текста, его отступы и цвет;
- "border: 1px solid #000000;" - рамка вокруг кнопки, ширина и цвет;
- " border-radius: 3px;" - так же закругление кнопок;
- "background: #b8bdc9;" - цвет фона кнопки. Для браузеров Мозила Firefox кнопка задается с помощью трех цветов в "-moz-linear-gradient...", для Хрома в "-webkit-gradient...". Эксплорер и Опера к сожалению будут выдавать кнопку одного цвета;

Цвет кнопки при наведении и когда она активна:

 Показать / Скрыть текст
.vertical-menu .button:hover {    background: #5F6B72;    background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#5F6B72), color-stop(4%,#56646C), color-stop(50%,#4D5A62), color-stop(100%,#434D54)); }.vertical-menu .button:active {    padding: 5px 10px;     top: 0;    background: #515B62;     background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147));}


Ну тут уже разберётесь и сами. На этом всё надеюсь помог ждите следующих уроков .

Telegram

МАРКЕТПЛЕЙС ЦИФРОВЫХ ТОВАРОВ

Перейти в чат вебмастеров
  • DirectoryWeb
  • 15.04.2012
  • 1 19 586
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
Скрипт экономической игры «Русский Фермер»
Скрипт экономической игры «Русский Фермер»
7-02-2015, 00:00, Экономические игры
Скрипт удвоителя SPEED CAR
Скрипт удвоителя SPEED CAR
5-04-2019, 14:37, HYIP, MLM, МММ
Скрипт инвестиционного проекта №21 для GoldCoders
Скрипт инвестиционного проекта №21 для GoldCoders
4-11-2024, 17:33, Скрипты / Финансы / HYIP, MLM, МММ
Скрипт интернет магазина ImageCMS Shop 4.8.1 Premium
Скрипт интернет магазина ImageCMS Shop 4.8.1 Premium
2-05-2014, 21:40, Скрипты
Скрипт системы активной рекламы Misoft CMS 1.1.9
Скрипт системы активной рекламы Misoft CMS 1.1.9
25-10-2020, 11:15, Рекламные сервисы
База трастовых сайтов High PR Base v1
База трастовых сайтов High PR Base v1
17-02-2014, 19:53, Программы

Твой комментарий..

  • Скрипты
    • Telegram
    • Финансы
    • CS:GO
    • Бонусники
    • Браузерные игры
    • Интернет магазины
    • Автопостинг
    • Доски объявлений
    • Обменники
    • Казино
    • Каталоги
    • Конструкторы сайтов
    • Облачные майнинги
    • Платёжные системы
    • Рекламные сервисы
    • Социальные сети
      • TikTok Ads
    • Экономические игры
    • Чаты
    • Хостинги
    • HYIP, MLM, МММ
    • Фриланс биржи
    • E-mail рассылки
    • Разное
  • Арбитраж трафика
    • Тизерные сети
    • SMS рассылки
    • Telegram Ads
    • Анализ трафика
    • Видео трафик
    • Автоматизация
    • CPA-сети
    • Push-реклама
    • Popunder реклама
    • Нативная реклама
    • Ретаргетинг
    • Кейсы
    • Трекеры
    • Партнёрские программы
      • Товарные партнерки
      • Финансовые партнерки
      • Партнерки интернет-магазинов
      • Зарубежные партнерки
    • Реклама в Telegram
    • Сервисы
      • Прокси
      • Виртуальные карты
    • Инструменты
      • Мультиаккаунтинг
    • Обзоры
    • Мануалы
    • Антидетект-браузеры
  • HTML шаблоны
  • Боты
  • Программы
    • Парсинг
  • Android, iOS приложения
  • Статьи
    • Маркетплейсы
    • Безопасность в сети
    • Заработок в интернете
    • Сайтостроение
    • Оптимизация сайтов
    • Обучение
    • Криптовалюты
    • Новости
    • Разное
    • Новости сайта
Как в 6 раз увеличить продажи в США и Европе с помощью SEO - Реальный кейс
Подробнее
Как в 6 раз увеличить продажи в США и Европе с помощью SEO - Реальный кейс
Партнерская сеть Travelpayouts
Подробнее
Партнерская сеть Travelpayouts
Рекламная платформа Push.House
Подробнее
Рекламная платформа Push.House
Как добиться успеха в продвижении своего канала от MRBEAST PRODUCTION
Подробнее
Как добиться успеха в продвижении своего канала от MRBEAST PRODUCTION
SMOService
Подробнее
SMOService
Скрипт инвестиционного HYIP проекта Fiarello-Group
Подробнее
Скрипт инвестиционного HYIP проекта Fiarello-Group
Скрипт экономической игры Andry Birds NEW
Подробнее
Скрипт экономической игры Andry Birds NEW
Cкрипт сервиса активной рекламы «MIBUX»
Подробнее
Cкрипт сервиса активной рекламы «MIBUX»
Рип скрипта экономической онлайн игры «Fattoria»
Подробнее
Рип скрипта экономической онлайн игры «Fattoria»
Настройка прокси в программе для парсинга Scraper API
Подробнее
Настройка прокси в программе для парсинга Scraper API
Loading...

Внимание! Данный материал предоставлен сайтом DirectoryWeb.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое

  • Топ просмотров
  • Высший рейтинг
  • Самый топ
Скрипт сайта рулетки CSGOSHIK

Скрипт сайта рулетки CSGOSHIK

  • DirectoryWeb
  • 01.10.2018
  • 1 3 943
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт онлайн казино Фараон

Скрипт онлайн казино Фараон

  • DirectoryWeb
  • 30.09.2018
  • 1 8 026
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт онлайн казино FlashCasino 1.2

Скрипт онлайн казино FlashCasino 1.2

  • DirectoryWeb
  • 26.10.2018
  • 1 3 510
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Cкрипт онлайн лотереи Lottery for life

Cкрипт онлайн лотереи Lottery for life

  • DirectoryWeb
  • 17.10.2018
  • 1 4 321
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт онлайн казино Вулкан NEW

Скрипт онлайн казино Вулкан NEW

  • DirectoryWeb
  • 28.10.2018
  • 1 12 616
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт Bitcoin игр онлайн Quizda

Скрипт Bitcoin игр онлайн Quizda

  • DirectoryWeb
  • 01.08.2018
  • 1 4 242
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт игры моментальной лотереи - рулетки Best-Loto

Скрипт игры моментальной лотереи - рулетки Best-Loto

  • DirectoryWeb
  • 23.01.2018
  • 1 8 513
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт моментальной лотереи Fast Loto

Скрипт моментальной лотереи Fast Loto

  • DirectoryWeb
  • 05.10.2017
  • 1 7 999
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт онлайн казино Brilliant-Club

Скрипт онлайн казино Brilliant-Club

  • DirectoryWeb
  • 02.07.2017
  • 1 10 263
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Информация
  • О проекте
  • Правила
  • Статистика
  • Облако тегов
  • Контакты
  • Карта сайта
Каталог
  • Скрипты
  • Боты
  • Программы
  • Android, iOS приложения
  • Статьи
Арбитраж трафика
  • Кейсы
  • Партнёрские программы
  • Сервисы
  • Инструменты
  • Обзоры
Полезные ссылки
  • Партнерские программы и сервисы
  • Скрипты, моды и шаблоны
Заказ
Быстрый вход

Используйте социальные сети для быстрой регистрации и авторизации.

ВКонтакте
Создать аккаунт / Регистрация
Авторизация

Я забыл свой пароль