ZorNet.Ru — сайт для вебмастера » Меню для сайта » Вертикальное меню при помощи HTML + CSS3

Вертикальное меню при помощи HTML + CSS3

Этот пример вертикального меню отлично подойдет на многие тематические сайты, где навигации идет красивый эффект при наведение на чистом CSS3. Полностью дизайна на манюшке выполнен при помощи стилистики CSS, где в самом каркасе, это в самом верху можно наблюдать шрифтовую кнопку, что можно поставить в соответствие направление по тематики сайта.

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

С проверки на работоспособность:

Установка:

HTML

Код

<aside class="saetonal-menu">
  <div class="navegasea-musanes menu-surangesan">
  <div class="saetonal-menu-bt"><span class="fa fa-windows"></span>Приложения</div>
  <ul class="adesave-siokunes">
  <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>
  <li><a href="/">Скачать</a></li>
  <li><a href="/">Скрипты</a></li>
  <li><a href="/">Контакты</a></li>
  </ul>
  </div>

CSS

Код

* {background: transparent;margin:0;padding:0;outline:none;border: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

/* saetonal-menu
----------------------------------------------- */

.navegasea-musanes {overflow:hidden; margin-bottom:20px;}
.saetonal-menu-bt {font-size:18px; padding:10px; margin-bottom:10px;}
.saetonal-menu-bt .fa {font-size:24px; width:40px; vertical-align:top; margin-top:-5px; transform:rotate(-45deg);}

.menu-surangesan {background-color:#41795e; color:#f0f7f4;}
.menu-surangesan .saetonal-menu-bt {border-radius:6px 6px 0 0; border-bottom:1px solid #347656; box-shadow:0 1px #66ab89; margin:0;}
.menu-surangesan a {
  border-bottom: 1px solid #2b5642;
  box-shadow: 0 1px #66ab89;
  display: block;
  padding: 10px 60px 10px 20px;
  color: #e9f7f1;
  font-size: 14px;
  text-decoration: none;
}
.menu-surangesan li:last-child a {border-bottom:0; box-shadow:none;}
.menu-surangesan li:hover {
  color: #e8f5ef;
  background-color: #3f6f4b;
}
.menu-surangesan a:hover {color:#f0f7f4;}
.menu-surangesan li {position:relative;}
.menu-surangesan li span {position:absolute; right:10px; top:10px; opacity:0.8;}

li {
list-style-type: none; /* Убираем точки маркеры */
}
.saetonal-menu {width:240px;float:left;}

.site-desc h1, .site-desc h2, .site-desc h3, .saetonal-menu-bt, .full-in h1 {
  background-image: linear-gradient(transparent, rgba(0,0,0,0.15)),linear-gradient(135deg, #5be4ac, #178a5a);
  background-size: 100%;
}

.site-desc h1, .site-desc h2, .site-desc h3, .saetonal-menu-bt, .navegasea-musanes, .saetonal-menu-img, .s-in, .full-in h1, .full-comms {
  border-radius: 6px;
}

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

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

18 Января 2021 Загрузок: 1 Просмотров: 1328 Комментариев: (7)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 7
Порядок вывода комментариев: medbrb3 16 Июля 2021 19:29¹ -1 ну и толку от него? старое главное меню то все равно не убирается из шаблона 922 Kosten 16 Июля 2021 21:07² 0 Это почему, оно и под мобильный должно корректно показывать, ведь основном по ширине навигации идет. На счет другого блока, так на сайте есть раздвижное меню, которое вообще идет без контейнера. Что только можно констатировать, здесь каждому стилю нужен свой дизайн, где бы красиво и оригинально смотрелось. medbrb3 17 Июля 2021 04:27³ -2 я и не спорю, меню очень классное, но вот оригинальное меню фиг удалишь, полоска от фона остается и всё :с -SAM- 17 Июля 2021 04:50⁴ 0 А причём здесь опубликованный материал? Это уже ваше неумение переписать тот шаблон под свои нужды. medbrb3 20 Июля 2021 07:13⁵ -1 А вот хамить тут не нужно. От умения это никак не зависит, некоторые шаблон старые. и если материал подразумевает под собой супер -пупер замену основному меню шаблона, то стоило бы указать что: не заменит полностью основное меню на старых шаблонах либо дать инструкцию по полной замене. Я не спорю, поднимая сайт с нуля можно установить и на старом, но когда твоему сайту больше 10 лет. тут будут сложности. и впредь не хамите людям старше вас Сопрано 20 Июля 2021 13:27⁶ +1 Не по теме, вам разве кто то грубо сказал, вероятно вы сами накрутили. А кто старше и младше, в интернете очень глупо звучит. Если сайту больше десяти лет, но это только уважение, не каждого "предприятие" могло сохранится. -SAM- 22 Июля 2021 08:27⁷ +1 Тут опубликован участок html и css к нему, то есть нет привязки к CMS. Если конечно вы знаете терминологию, о чём я. То есть тут не ориентировано под установку на какой-то конкретный шаблон (новый он или старый), как и на uCoz (а вот, если в каком-то конкретном системном шаблоне там после правильной установки нужно чего-то переписывать, исходя из конфликта с системными стилями этого шаблона, то об этом неизвестно). Вот я и говорю, что здесь больше неумение поставить то, что выложили (как и приспособить под свой шаблон - надо знать html\css и особенности CMS). И да, если сайту 10 лет, а его шаблон не обновляется, постоянно переписывается, изменяется код без должных знаний, то почти наверняка там скапливается куча ненужных (и даже портящих каркас) участков кода, довесков... вот почему, если не менять шаблон с нуля, то нужно хотя бы периодически проводить ревизию имеющегося, приводя в соответствие нынешних требований ИТ (те же показатели качества и замеры скорости, как пример). Иначе просто некачественные сайты будут уступать в выдаче поисковой тем, что конкурируют и сделаны с соблюдением всех стандартов и требований. Но это уже так, как оффтоп. P.S.: если в том шаблоне есть чего-то, что не устраивает - нужно переписать. Ну вот, ведь ту полоску делали конкретно под тот шаблон, когда верстали макет. Она сама собой не появилась, как и не было учёта на то, что кто-то там будет чего-то ставить поверх своё... в общем, от неё можно избавиться, но на это нужны знания и умения. На ZorNet в профиле на персональной странице пользователя не выводиться дата рождения, или возраст (хотя возможность задать имеется в анкетных данных) - увы, сейчас такой шаблон этой страницы... ну, а заполненный пол - исходя из даты входа (в основном мужской контингент, но случаются и неверные uID-данные, что ложный пол проставили были изначально себе пользователи со времён uNet-а еще, как понял)... тоже как оффтоп.