• Страница 2 из 2
  • «
  • 1
  • 2
Форум » Территория вебмастера » Начинающему вебмастеру » Подборка потрясающих меню для сайта на CSS (Создание меню для сайта с помощью HTML и CSS)
Подборка потрясающих меню для сайта на CSS
Kosten
Дата: Понедельник, 21.05.2018, 20:06 | Сообщение 1
Администраторы
Сообщений:17015
Награды: 55


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

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

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



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

Большинство из нас знакомы с версией быстрой загрузки, но если мы расширяем наш горизонт, есть океан адаптивных навигационных ресурсов. Вот список некоторых старых и новых материалов с CSS примером и и JavaScript, где многие идут адаптивной версткой для сайта. Навигация это скелет, который поддерживающий общий контент и информацию на сайте.

Конструкция мобильного навигационного меню является самым важным мостом и платформой для взаимодействия человека и компьютера, которая направлена на то, чтобы направлять пользователей в правильном направлении и не теряться. В настоящее время для выбора доступны различные типы меню, но какой вид меню можно рассматривать как отличный дизайн. Хороший дизайн меню может не только улучшить пользовательский интерфейс всего продукта.
Прикрепления: 4924367.jpg(21.7 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 01.06.2018, 19:03 | Сообщение 16
Администраторы
Сообщений:17015
Награды: 55


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

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

Горизонтальное меню со вкладками



Приступаем к установке

HTML

Код
<div id="kistunolpas-vevcub">
  <ul>
     <li class="active"><a href="http://zornet.ru/" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Главная</font></font></a></li>
     <li><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Zornet.Ru</font></font></a></li>
     <li><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Скрипты</font></font></a></li>
     <li><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Шаблоны</font></font></a></li>
  </ul>
</div>


CSS

Код
#kistunolpas-vevcub,
#kistunolpas-vevcub ul,
#kistunolpas-vevcub ul li,
#kistunolpas-vevcub ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#kistunolpas-vevcub:after,
#kistunolpas-vevcub > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#kistunolpas-vevcub {
  width: auto;
  border-bottom: 3px solid #3c7bb3;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#kistunolpas-vevcub ul {
  background: #f3f6f9;
}
#kistunolpas-vevcub > ul > li {
  float: left;
}
#kistunolpas-vevcub.align-center > ul {
  font-size: 0;
  text-align: center;
}
#kistunolpas-vevcub.align-center > ul > li {
  display: inline-block;
  float: none;
}
#kistunolpas-vevcub.align-right > ul > li {
  float: right;
}
#kistunolpas-vevcub.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#kistunolpas-vevcub > ul > li > a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #383535;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}
#kistunolpas-vevcub > ul > li.active > a,
#kistunolpas-vevcub > ul > li:hover > a,
#kistunolpas-vevcub > ul > li > a:hover {
  color: #f5efef;
}
#kistunolpas-vevcub > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#kistunolpas-vevcub > ul > li.active > a:after,
#kistunolpas-vevcub > ul > li:hover > a:after,
#kistunolpas-vevcub > ul > li > a:hover:after {
  background: #3c7bb3;
}


Демонстрация
Прикрепления: 5548326.png(5.0 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 01.06.2018, 19:34 | Сообщение 17
Администраторы
Сообщений:17015
Награды: 55


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

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

Горизонтальное меню в синем оттенке



Приступаем к установке:

HTML

Код
<div id="nudertem-pasazem">
  <ul>
     <li class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> Главная</font></font></a></li>
     <li><a href="#"><i class="fa fa-fw fa-bars"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> Zornet.Ru</font></font></a></li>
     <li><a href="#"><i class="fa fa-fw fa-cog"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> Скрипты</font></font></a></li>
     <li><a href="#"><i class="fa fa-fw fa-phone"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> Шаблоны</font></font></a></li>
  </ul>
</div>


CSS

Код
#nudertem-pasazem ul,
#nudertem-pasazem li,
#nudertem-pasazem a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#nudertem-pasazem {
  border: 1px solid #133e40;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
}
#nudertem-pasazem ul {
    zoom: 1;
    background: #3674b6;
    background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3669b6), color-stop(100%, #2a698f));
    background: -webkit-linear-gradient(top, #3684b6 0%, #2a448f 100%);
    background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
    background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
    background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
    padding: 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#nudertem-pasazem ul:before {
  content: '';
  display: block;
}
#nudertem-pasazem ul:after {
  content: '';
  display: table;
  clear: both;
}
#nudertem-pasazem li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#nudertem-pasazem li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #eef0f3;
  border: 1px solid transparent;
  font-size: 16px;
}
#nudertem-pasazem li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #2e5898;
}
#nudertem-pasazem li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #20305f;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #183344;
  -webkit-box-shadow: inset 0 5px 10px #183344;
  box-shadow: inset 0 5px 10px #133e40;
}
#nudertem-pasazem li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#nudertem-pasazem li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #253669;
  border: 1px solid #15283c;
  -moz-box-shadow: inset 0 5px 10px #15283c;
  -webkit-box-shadow: inset 0 5px 10px #122640;
  box-shadow: inset 0 5px 10px #122640;
}


Демонстрация
Прикрепления: 8722200.jpg(10.5 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 09.06.2018, 01:53 | Сообщение 18
Администраторы
Сообщений:17015
Награды: 55


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

Как пример, это новостной сайт может перечислить несколько категорий новостей в главном меню, таких как «Политика», «Бизнес», «Спорт» и много другой популярный и актуальных тем. Каждый из этих вариантов меню может включать несколько под категорий, что как можно больше содержат под категорий ссылок на переходы, а значит более информации идет.



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

HTML

Код
<nav>
  <ul class="lsarkulopan">
    <li><a href="http://zornet.ru">Главная</a></li>
    <li><a href="">Скрипты</a></li>
    <li><a href="" class="tesaxawertun">Блог</a>
      <ul class="ctenagrsam">
        <li><a href="">ZORNET.RU</a></li>
        <li><a href="">ZORNET.RU</a></li>
        <li><a href="">ZORNET.RU</a></li>
        <li><a href="">ZORNET.RU</a></li>
      </ul>
    </li>
    <li><a href="" class="tesaxawertun">Раздел uCoz</a>
      <ul class="ctenagrsam">
        <li><a href="">Под меню №1</a></li>
        <li><a href="">Под меню №2</a></li>
        <li><a href="">Под меню №3</a></li>
        <li><a href="">Под меню №4</a></li>
      </ul>
    </li>
    <li><a href="">ZORNET.RU</a></li>
  </ul>
</nav>


CSS

Код
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  display: block;
  text-decoration: none;
  outline: none;
}
.lsarkulopan {
    backface-visibility: hidden;
    background: rgba(226, 225, 225, 0.89);
}
.lsarkulopan > li {
  display: inline-block;
  position: relative;
}
.lsarkulopan > li > a {
    font-family: 'Exo 2', sans-serif;
    height: 69px;
    line-height: 69px;
    padding: 0 27px;
    font-weight: bold;
    color: #10598a;
    text-transform: uppercase;
    transition: .4s ease-in-out;
}
.tesaxawertun:after {
  content: "\f107";
  margin-left: 8px;
  font-family: FontAwesome;
}
.lsarkulopan li a:hover {
    color: #a5310d;
}
.ctenagrsam {
    background: #e8e5e5;
    border: 2px solid #116dab;
    position: absolute;
    left: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 5;
    width: 147px;
    transform: perspective(600px) rotateX(-90deg);
    transform-origin: 0% 0%;
    transition: .6s ease-in-out;
    border-radius: 0px 0px 5px 7px;
}
.lsarkulopan > li:hover .ctenagrsam {
  visibility: visible;
  opacity: 1;
    transform: perspective(600px) rotateX(0deg);
}
.ctenagrsam li a {
  color: #7f7f7f;
  font-size: 13px;
  line-height: 36px;
  padding: 0 25px;
  font-family: 'Kurale', serif;
  transition: .4s ease-in-out;
}


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

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

Также можно появляющийся панель сделать по углам по разному.

border-radius: 30px 0px 25px 17px;



Что в самой коробке, где находятся запросы под ссылкой, все это как по цвету и по форме можно поменять.
Прикрепления: 8440698.png(15.3 Kb) · 4004103.png(16.1 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 09.06.2018, 02:37 | Сообщение 19
Администраторы
Сообщений:17015
Награды: 55


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

Прикрепления: 2189789.png(47.4 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, Вчера, 19:46 | Сообщение 20
Администраторы
Сообщений:17015
Награды: 55


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

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

Горизонтальное меню с выпадающим подменю

Проверяя на работоспособность:



По умолчанию;



При наведение клика;

HTML

Код
<nav role="zsatenipolagetsa">
<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="http://zornet.ru/">zornet.ru</a>
    <ul>
      <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="/">Стили CSS</a></li>
  <li><a href="/">Дизайн сайта</a></li>
</ul>


CSS

Код
nav {
    background: #28283c;
    padding: 0 1%;
}

nav ul {
list-style: none;
}

nav ul li {
display:inline-block;
}

nav ul li a {
    display: block;
    padding: 17px 19px;
    font-size: 15px;
    color: #fdfdfd;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    border-top: 1px solid #2f2f42;
}

nav ul li:hover {
background: #35354a;
}

nav ul li ul {
display: none;
position:absolute;
background: #2f2f42;
}

nav ul li:hover ul {
display:block;
}

nav ul li ul li {
display:block;
}


Демонстрация
Прикрепления: 0062495.png(3.2 Kb) · 0639388.png(14.7 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Подборка потрясающих меню для сайта на CSS (Создание меню для сайта с помощью HTML и CSS)
  • Страница 2 из 2
  • «
  • 1
  • 2
Поиск: