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


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

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

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



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

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

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


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

Прикрепления: 2189789.png(47.4 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 17.06.2018, 19:46 | Сообщение 20
Администраторы
Сообщений:18246
Награды: 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)
Kosten
Дата: Вторник, 19.06.2018, 01:22 | Сообщение 21
Администраторы
Сообщений:18246
Награды: 55


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

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

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

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

Это вид по умолчанию:



Здесь на мобильном телефоне:



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

HTML

Код
<header>
  <nav>
    <div>
      <a><span>ZORNET.RU  </span>1</a>
      <div>
        <a>ZORNET.RU 1</a>
        <a>ZORNET.RU  2</a>
        <a>ZORNET.RU  3</a>
        <a>ZORNET.RU  4</a>
        <a>ZORNET.RU  5</a>
        <a>ZORNET.RU  6</a>
      </div>
    </div>
    <div>
      <a><span>ZORNET.RU  </span>2</a>
      <div>
        <a>ZORNET.RU  1</a>
        <a>ZORNET.RU  2</a>
        <a>ZORNET.RU  3</a>
        <a>ZORNET.RU  4</a>
        <a>ZORNET.RU  5</a>
        <a>ZORNET.RU  6</a>
      </div>
    </div>
    <div>
      <a><span>ZORNET.RU  </span>3</a>
      <div>
        <a>ZORNET.RU  1</a>
        <a>ZORNET.RU 2</a>

      </div>
    </div>
    <div>
      <a><span>Скрипт </span>4</a>
    </div>
    <div>
      <a><span>SEO</span>5</a>
    </div>
    <div>
      <a><span>CSS </span>6</a>
    </div>
  </nav>
</header>


CSS

Код
header {
  width: 100%;
  height: 50px;
  background-color: #f44355;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

header > nav > div {
  float: left;
  width: 16.6666%;
  height: 100%;
  position: relative;
}

header > nav > div > a {
  text-align: center;
  width: 100%;
  height: 100%;
  display: block;
  line-height: 50px;
  color: #fbfbfb;
  transition: background-color 0.2s ease;
  text-transform: uppercase;
}

header > nav > div:hover > a {
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

header > nav > div > div {
  display: none;
  overflow: hidden;
  background-color: white;
  min-width: 200%;
  position: absolute;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  padding: 10px;
}

header > nav > div:not(:first-of-type):not(:last-of-type) > div {
  left: -50%;
  border-radius: 0 0 3px 3px;
}

header > nav > div:first-of-type > div {
  left: 0;
  border-radius: 0 0 3px 0;
}

header > nav > div:last-of-type > div {
  right: 0;
  border-radius: 0 0 0 3px;
}

header > nav > div:hover > div {
  display: block;
}

header > nav > div > div > a {
  display: block;
  float: left;
  padding: 8px 10px;
  width: 46%;
  margin: 2%;
  text-align: center;
  background-color: #f44355;
  color: #fbfbfb;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

header > nav > div > div > a:hover {
  background-color: #212121;
  cursor: pointer;
}

h1 {
  margin-top: 100px;
  font-weight: 100;
}

p {
  color: #aaa;
  font-weight: 300;
}

@media (max-width:600px) {
  header > nav > div > div > a {
    margin: 5px 0;
    width: 100%;
  }
  header > nav > div > a > span {
    display: none;
  }
}


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

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

Демонстрация
Прикрепления: 1523264.png(20.9 Kb) · 7115758.png(8.4 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 26.06.2018, 18:57 | Сообщение 22
Администраторы
Сообщений:18246
Награды: 55


В этом примере показано, как вы можете использовать классы navigation. При ширине окна мы показываем горизонтальное меню. При меньшей ширине окна мы переключаемся в вертикальное меню с помощью переключателя. В последние несколько лет наложение полно экранных меню доминировало на сайтах, на которых можно выиграть день.

Настройка стиля создаст оригинальный дизайн горизонтальное меню. Фактически, это вероятно самый быстрый и простой способ создания горизонтальной навигаций. Если вы не хотите использовать современные технологии XHTML и CSS в своем шаблоне, то, во всяком случае используйте этот стиль меню. При меньшей ширине окна мы переключаемся на прокручиваемое горизонтальное меню с помощью переключателя.



Удобное горизонтальный меню при помощи CSS

HTML

Код
<nav role="navigation">
<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="#">Скрипты</a>
    <ul>
      <li><a href="http://zornet.ru/about">Об авторе</a></li>
      <li><a href="http://zornet.ru/history">История блога интернет</a></li>
      <li><a href="http://zornet.ru/privacy-policy">Политика</a></li>
      <li><a href="http://zornet.ru/disclaimer">Отказ от CSS</a></li>
    </ul>
  </li>
  <li><a href="http://zornet.ru/sitemap">Шаблоны</a></li>
  <li><a href="http://zornet.ru/contact">ZORNET.RU</a>
  <li><a href="http://zornet.ru/contact">Обратная связь</a>  
  </li>
</ul>
<nav>


CSS

Код
nav {
    background: #27273a;
    padding: 0 0%;
}

nav ul {
list-style: none; /* Убираем маркер для элементов списка */
}

nav ul li {
display:inline-block;
}

nav ul li a {
    display: block;
    padding: 17px 15px;
    font-size: .9em;
    color: #fffafa;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    border-top: 1px solid #27272b;
}

nav ul li:hover {
background: #323240;
}

nav ul li ul {
display: none;
position:absolute;
background: #29293a;
}

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

nav ul li ul li {
display:block;
}


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