ZorNet.Ru — сайт для вебмастера » HTML и CSS » Горизонтальное меню в синем цвете на CSS3

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

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

Адаптивность здесь выставляем самостоятельно, хотя она настроено, возможно кому нужно больше, чтоб меню было.Но на мобильном аппарате уже будет совершенно другой вид. Здесь не станет на всю ширину экрана показывать запросы, а сделано так, что по правой стороне по клику появится полоса запросов, где иконки аналогично присутствуют. По адаптивности, то на этом этапе мы используем экран @media для применения различных стилей для разных размеров экрана.

Это для того, чтобы сделать страницу отзывчивой, как @media screen и min-width: 961px - это как пример, что используется для отображения меню навигации. Когда ширина экрана больше или равна 961 и мы используем только экран @media и (max-width: 960px), чтобы показать различные стили, когда ширина экрана меньше или равна 960px. Вот и все, вот как создать отзывчивое меню навигации с помощью CSS и HTML. Вы можете настроить этот код в соответствии с вашими требованиями.

Так реально будет смотреться после, как установите:

Горизонтальное меню для сайта на HTML+CSS

Этот вид уже с мобильных гаджетов:

Здесь с мобильного просматриваем категорий:

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

HTML

Код

<header>
<section>
<a href="http://zornet.ru" id="kardasen" target="_blank">ZORNET.RU</a>
<label for="toggle-1" class="tukilosa-narvegis"><ul><li></li> <li></li> <li></li></ul></label>
<input type="checkbox" id="toggle-1">
<nav>
<ul>
<li><a href="#kardasen"><i class="icon-home"></i>Главная</a></li>
<li><a href="#about"><i class="icon-user"></i>Шаблоны</a></li>
<li><a href="#portfolio"><i class="icon-thumbs-up-alt"></i>Стили</a></li>
<li><a href="#services"><i class="icon-gear"></i>Дизайн</a></li>
<li><a href="#gallery"><i class="icon-picture"></i>CSS</a></li>
<li><a href="#contact"><i class="icon-phone"></i>SEO</a></li>
</ul>
</nav>
</header>
</section>

CSS

Код

header {
  width: 100%;
  display: table;
  background-color: #2e57c1;
  margin-bottom: 50px;
}
#kardasen {
  float: left;
  font-size: 24px;
  text-transform: uppercase;
  color: #f7f1f1;
  font-weight: 600;
  padding: 20px 0px;
  text-shadow: 0 1px 0 #272424;
}
nav{width:auto; float:right;}
nav ul{display:table; float:right;}
nav ul li{float:left;}
nav ul li:last-child{padding-right:0px;}
nav ul li a{color:#f0f3f7; font-size:18px; padding: 25px 20px; display:inline-block; transition: all 0.5s ease 0s;text-shadow: 0 1px 0 #272525;}
nav ul li a:hover {
  background-color: #002e5b;
  color: #efe598;
  transition: all 0.5s ease 0s;
}
nav ul li a:hover i {
  color: #e2da98;
  transition: all 0.5s ease 0s;
}
nav ul li a i {
  padding-right: 10px;
  color: #f5f7f9;
  transition: all 0.5s ease 0s;
  text-shadow: 0 1px 0 #231f1f;
}

.tukilosa-narvegis ul{display:table; width:25px;}
.tukilosa-narvegis ul li{width:100%; height:3px; background-color:#002e5b; margin-bottom:4px;}
.tukilosa-narvegis ul li:last-child{margin-bottom:0px;}

input[type=checkbox], label{display:none;}

.content{display:table; margin-bottom:59.7px; width:900px;}
.content h2{font-size:17px; font-weight:500; color:#124271; border-bottom:1px solid #2f91ef; display:table; padding-bottom:9.8px; margin-bottom:10px;}
.content p{font-size:14px; line-height:21px; color:#949090; text-align:justify;}

footer{display:table; padding-bottom:30px; width:100%;}
.social{margin:0px auto; display:table; display:table;}
.social li{float:left; padding:0px 10px;}
.social li a{color:#002e5b; transition: all 0.5s ease 0s;}
.social li a:hover{color:#fde428; transition: all 0.5s ease 0s;}

@media only screen and (max-width: 1440px) {
section{max-width:95%;}
}

@media only screen and (max-width: 980px) {
header{padding:20px 0px;}
#kardasen{padding:0px;}
input[type=checkbox] {position: absolute; top: -9999px; left: -9999px; background:none;}
input[type=checkbox]:fous{background:none;}
label {float:right; padding:8px 0px; display:inline-block; cursor:pointer; }
input[type=checkbox]:checked ~ nav {display:block;}

nav{display:none; position:absolute; right:0px; top:53px; background-color:#002e5b; padding:0px; z-index:99;}
nav ul{width:auto;}
nav ul li{float:none; padding:0px; width:100%; display:table;}
nav ul li a{color:#FFF; font-size:15px; padding:10px 20px; display:block; border-bottom: 1px solid rgba(225,225,225,0.1);}
nav ul li a i{color:#fde428; padding-right:13px;}
}

@media only screen and (max-width: 980px) {
.content{width:90%;}
}

@media only screen and (max-width: 568px) {
h1{padding:25px 0px;}
h1 span{display:block;}
}

@media only screen and (max-width: 480px) {
section {max-width: 90%;}
}

@media only screen and (max-width: 360px) {
h1{font-size:20px;}
label{padding:5px 0px;}
#logo{font-size: 20px;}
nav{top:47px;}
}

@media only screen and (max-width: 320px) {
h1 {padding: 20px 0px;}
}

Теперь вы можете настроить этот код в соответствии с вашим требованием.

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

02 Июня 2018 Просмотров: 990 Комментариев: (0)

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

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

Kosten

Комментарии: 0