| Kosten | Суббота, 22 Июня 2019 | Сообщение 1 |
| Рассматривать навигацию, то по своей структуре они схожи, где 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.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Суббота, 22 Июня 2019 | Сообщение 2 |
|
| Способ 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
Код <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+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) |
| |
