Как сделать горизонтальное меню на CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Как сделать горизонтальное меню на CSS (Сделать разметку оформления для навигаций сайта)

Как сделать горизонтальное меню на CSS

Kosten

Суббота, 22 Июня 2019, 01:50 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

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

Вашему вниманию HTML разметка, которое предназначена под горизонтальную навигацию.

Код

<ul>
<li><a href="">Один пункт для меню</a></li>
<li><a href="">Второй</a></li>
<li><a href="">Третий</a></li>
...
</ul>

Горизонтальная навигация, которая прописана внутри тега ul и /ul, где также рекомендовано размещать под элемент nav и /nav или header и /header. Вот по этому находящаяся html-разметка придает семантический смысл, где будет появляется другие возможности, что повлияет на форматирование блока навигаций.

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

Код

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/
  padding-left: 0; /*убираем левый отступ, равный 40px*/
}
a {text-decoration: none; /*убираем подчеркивание текста ссылок*/

HTML-разметка и базовые стили

HTML

Код

<nav class="gtamilas-kopadvun">
  <ul>
    <li><a href="#"><i class="fa fa-home fa-fw"></i>Zornet.Ru</a></li>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Скрипты</a></li>
    <li><a href="#">Шаблоны</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

<nav class="kidesam-tedopesaven">
  <ul>
    <li><a href="#"><i class="fa fa-home fa-fw"></i>Zornet.Ru</a></li>
  <li><a href="#">Главная</a></li>
    <li><a href="#">Скрипты</a></li>
    <li><a href="#">Шаблоны</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

<nav class="dasetu-lasewab">
  <ul>
    <li><a href="#"><i class="fa fa-home fa-fw"></i>Zornet.Ru</a></li>
  <li><a href="#">Главная</a></li>
    <li><a href="#">Скрипты</a></li>
    <li><a href="#">Шаблоны</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

<nav class="kasulegas">
  <ul>
    <li><a href="#"><i class="fa fa-home fa-fw"></i>Zornet.Ru</a></li>
  <li><a href="#">Главная</a></li>
    <li><a href="#">Скрипты</a></li>
    <li><a href="#">Шаблоны</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS

Код

ul {
  list-style: none;
  margin: 0 auto;
}
a {
  text-decoration: none;
  font-family: 'Lora', serif;
  transition: .5s linear;
}
i {
  margin-right: 10px;
}

nav {
  display: block;
  width: 660px;
  margin: 0 auto 30px;
}
.gtamilas-kopadvun ul {
  padding: 1em 0;
  background: #ECDAD6;
}
.gtamilas-kopadvun a {
    padding: 1em;
    background: rgba(156, 130, 123, 0.3);
    border-right: 1px solid #b19891;
    color: #443a38;
}
.gtamilas-kopadvun a:hover {background: #b19891;}
.gtamilas-kopadvun li {
  display: inline;
}
.kidesam-tedopesaven ul {
  background: #D4E7EE;
  overflow: hidden;
  padding: 0;
}
.kidesam-tedopesaven li {
  float: left;
}
.kidesam-tedopesaven a {
    display: block;
    padding: 1em;
    border-right: 1px solid #97abb9;
    background: rgba(184, 200, 212, 0.3);
    color: #3d6b6f;
}
.kidesam-tedopesaven a:hover {background: #ADC0CE}
.dasetu-lasewab ul {
  padding: 0;
  background: #E4EFD1;
}
.dasetu-lasewab li {
  display: inline-block;
}
.dasetu-lasewab a {
    padding: 1em;
    display: block;
    color: #719441;
    border-right: 1px solid #bbdc84;
    background: rgba(189, 214, 149, 0.3);
}
.dasetu-lasewab a:hover {background: #BAD78B}
.kasulegas ul {
  display: -webkit-flex;
  display: flex;
  background: #FFD7A7;
  padding-left: 0;
}
.kasulegas a {
    padding: 1em;
    display: block;
    color: #b9502a;
    border-right: 1px solid #e6933a;
    background: rgba(234, 167, 94, 0.3);
}
.kasulegas a:hover {background: #f39f46
}

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

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

Прикрепления: 2198675.png (36.2 Kb) · html.zip (3.4 Kb)

Страна: (RU)

Kosten

Суббота, 22 Июня 2019, 02:34 | Сообщение 2

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Способ 1. li {display: inline;}

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;}. Дальше стилизуем ссылки по своему желанию.

Способ 2. li {float: left;}

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;}, расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 3. li {display: inline-block;}

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 4. ul {display: flex;}

Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {display: block;} и стилизуем их по своему желанию.

1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

HTML

Код

<ul class="menu-main">
  <li><a href="" class="current">Work</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Blog</a></li>
  <li><a href="">Contact</a></li>
</ul>

CSS

Код

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');
.menu-main {
  list-style: none;
  margin: 40px 0 5px;
  padding: 25px 0 5px;
  text-align: center;
  background: white;
}
.menu-main li {display: inline-block;}
.menu-main li:after {
  content: "|";
  color: #606060;
  display: inline-block;
  vertical-align:top;
}
.menu-main li:last-child:after {content: none;}
.menu-main a {
  text-decoration: none;
  font-family: 'Ubuntu Condensed', sans-serif;
  letter-spacing: 2px;
  position: relative;
  padding-bottom: 20px;
  margin: 0 34px 0 30px;
  font-size: 17px;
  text-transform: uppercase;
  display: inline-block;
  transition: color .2s;
}
.menu-main a, .menu-main a:visited {color: #9d999d;}
.menu-main a.current, .menu-main a:hover{color: #feb386;}
.menu-main a:before,
.menu-main a:after {
  content: "";
  position: absolute;
  height: 4px;
  top: auto;
  right: 50%;
  bottom: -5px;
  left: 50%;
  background: #feb386;
  transition: .8s;
}
.menu-main a:hover:before, .menu-main .current:before {left: 0;}
.menu-main a:hover:after, .menu-main .current:after {right: 0;}
@media (max-width: 550px) {
.menu-main {padding-top: 0;}
.menu-main li {display: block;}
.menu-main li:after {content: none;}
.menu-main a {
  padding: 25px 0 20px;
  margin: 0 30px;
}
}

2. Адаптивное меню для свадебного сайта

HTML

Код

<nav class="top-menu">
  <ul class="menu-main">
    <li><a href="" class="current">Work</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

CSS

Код

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
.top-menu {
  position: relative;
  background: #fff;
  box-shadow: inset 0 0 10px #ccc;
}
.top-menu:before,
.top-menu:after {
  content: "";
  display: block;
  height: 1px;
  border-top: 3px solid #575350;
  border-bottom: 1px solid #575350;
  margin-bottom: 2px;
}
.top-menu:after {
  border-bottom: 3px solid #575350;
  border-top: 1px solid #575350;
  box-shadow: 0 2px 7px #ccc;
  margin-top: 2px;
}
.menu-main {
  list-style: none;
  padding: 0 30px;
  margin: 0;
  font-size: 18px;
  text-align: center;
  position: relative;
}
.menu-main:before,
.menu-main:after {
  content: "\25C8";
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.menu-main:before {left: 15px;}
.menu-main:after {right: 15px;}
.menu-main li {
  display: inline-block;
  padding: 5px 0;
}
.menu-main a {
  text-decoration: none;
  display: inline-block;
  margin: 2px 5px;
  padding: 6px 15px;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  color: #777777;
  border-bottom: 1px solid transparent;
  transition: .3s linear;
}
.menu-main .current, .menu-main a:hover {
  border-radius: 3px;
  background: #f3ece1;
  color: #313131;
  text-shadow: 0 1px 0 #fff;
  border-color: #c6c6c6;
}
@media (max-width: 500px) {
  .menu-main li {display: block;}
}

3. Адаптивное меню с фестонами

HTML

Код

<ul class="menu-main">
  <li><a href="" class="current">Work</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Blog</a></li>
  <li><a href="">Contact</a></li>
</ul>

CSS

Код

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption');
.menu-main {
  list-style: none;
  padding: 0 30px;
  margin: 0;
  font-size: 18px;
  text-align: center;
  position: relative;
  background: white;
}
.menu-main:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  left: 0;
  bottom: -20px;
  background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px;
  background-size: 20px 20px;
  background-repeat: repeat-x;
}
.menu-main li {display: inline-block;}
.menu-main a {
  text-decoration: none;
  display: inline-block;
  margin: 0 15px;
  padding: 10px 30px;
  font-family: 'PT Sans Caption', sans-serif;
  color: #777777;
  transition: .3s linear;
  position: relative;
}
.menu-main a:before,
.menu-main a:after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F58262;
  opacity: 0;
  transition: .5s ease-in-out;
}
.menu-main a:before {left: 5px;}
.menu-main a:after {right: 5px;}
.menu-main a.current:before,
.menu-main a.current:after,
.menu-main a:hover:before,
.menu-main a:hover:after {opacity: 1;}
.menu-main a.current,
.menu-main a:hover {color: #F58262;}
@media(max-width:680px) {
  .menu-main li {display: block;}
}

4. Адаптивное меню на ленточке

HTML

Код

CSS

Код

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption');
.top-menu {
  margin: 0 60px;
  position: relative;
  background: #5A394E;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.1),
    inset -1px 0 0 rgba(255,255,255,.1),
    inset 150px 0 150px -150px rgba(255,255,255,.12),
    inset -150px 0 150px -150px rgba(255,255,255,.12);
}
.top-menu:before,
.top-menu:after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  width: 100%;
  height: 3px;
}
.top-menu:before {
  top: 0;
  border-bottom: 1px dashed rgba(255,255,255,.2);
}
.top-menu:after {
  bottom: 0;
  border-top: 1px dashed rgba(255,255,255,.2);
}
.menu-main {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.menu-main:before,
.menu-main:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 0;
  top: 8px;
  border-top: 18px solid #5A394E;
  border-bottom: 18px solid #5A394E;
  transform: rotate(360deg);
  z-index: -1;
}
.menu-main:before {
  left: -30px;
  border-left: 12px solid rgba(255, 255, 255, 0);
}
.menu-main:after {
  right: -30px;
  border-right: 12px solid rgba(255, 255, 255, 0);
}
.menu-main li {
  display: inline-block;
  margin-right: -4px;
}
.menu-main a {
  text-decoration: none;
  display: inline-block;
  padding: 15px 30px;
  font-family: 'PT Sans Caption', sans-serif;
  color: white;
  transition: .3s linear;
}
.menu-main a.current,
.menu-main a:hover {background: rgba(0,0,0,.2);}
@media (max-width: 680px) {
.top-menu {margin: 0;}
.menu-main li {
  display: block;
  margin-right: 0;
}
.menu-main:before,
.menu-main:after {content: none;}
.menu-main a {display: block;}
}

5. Адаптивное меню с логотипом по середине

HTML

Код

<nav class="top-menu">
  <ul class="menu-main">
    <li class="left-item"><a href="">Work</a></li>
    <li class="left-item"><a href="">About</a></li>
    <li class="left-item"><a href="">Story</a></li>
    <li class="right-item"><a href="">Contact</a></li>
    <li class="right-item"><a href="">Shop</a></li>
    <li class="right-item"><a href="">Gallery</a></li>
</ul>
  <a class="navbar-logo" href=""><img src="https://html5book.ru/wp-content/uploads/2017/04/lily-logo.png"></a>
</nav>

CSS

Код

@import url('https://fonts.googleapis.com/css?family=Arimo');
.top-menu {
  position: relative;
  background: rgba(34,34,34,.2);
}
.menu-main {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-main:after {
  content: "";
  display: table;
  clear: both;
}
.left-item {float: left;}
.right-item {float: right;}
.navbar-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.menu-main a {
  text-decoration: none;
  display: block;
  line-height: 80px;
  padding: 0 20px;
  font-size: 18px;
  letter-spacing: 2px;
  font-family: 'Arimo', sans-serif;
  font-weight: bold;
  color: white;
  transition: .3s linear;
}
.menu-main a:hover {background: rgba(0,0,0,.3);}
@media (max-width: 830px) {
.menu-main {
  padding-top: 90px;
  text-align: center;
}
.navbar-logo {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
}
.menu-main li {
  float: none;
  display: inline-block;
}
.menu-main a {
  line-height: normal;
  padding: 20px 15px;
  font-size: 16px;
}
}
@media (max-width: 630px) {
.menu-main li {display: block;}
}

6. Адаптивное меню с логотипом слева

HTML

Код

<nav class="top-menu">
  <a class="navbar-logo" href=""><img src="https://html5book.ru/wp-content/uploads/2017/04/lily-logo.png"></a>
  <ul class="menu-main">
    <li><a href="">Work</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Story</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="">Gallery</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

CSS

Код

@import url('https://fonts.googleapis.com/css?family=Arimo');
.top-menu {
  background: rgba(255,255,255,.5);
  box-shadow: 3px 0 7px rgba(0,0,0,.3);
  padding: 20px;
}
.top-menu:after {
  content: "";
  display: table;
  clear: both;
}
.navbar-logo {display: inline-block;}
.menu-main {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
.menu-main li {display: inline-block;}
.menu-main a {
  text-decoration: none;
  display: block;
  position: relative;
  line-height: 61px;
  padding-left: 20px;
  font-size: 18px;
  letter-spacing: 2px;
  font-family: 'Arimo', sans-serif;
  font-weight: bold;
  color: #F73E24;
  transition:.3s linear;
}
.menu-main a:before {
  content: "";
  width: 9px;
  height: 9px;
  background: #F73E24;
  position: absolute;
  left: 50%;
  transform: rotate(45deg) translateX(6.5px);
  opacity: 0;
  transition: .3s linear;
}
.menu-main a:hover:before {opacity: 1;}
@media (max-width: 660px) {
.menu-main {
  float: none;
  padding-top: 20px;
}
.top-menu {
  text-align: center;
  padding: 20px 0 0 0;
}
.menu-main a {padding: 0 10px;}
.menu-main a:before {transform: rotate(45deg) translateX(-6px);}
}
@media (max-width: 600px) {
.menu-main li {display: block;}
}

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

Страна: (RU)

Как сделать горизонтальное меню на CSS (Сделать разметку оформления для навигаций сайта)

Страница 1 из 1
1