Привет мой дорогой читатель, сегодня для тебя представлю html-код адаптивного меню для таплинка.
Пиши вопросы в комментариях если возникнут по коду.
Ниже представлен html-код данного меню, после кода написано дополнительное описание
<header class="main-header">
<div class="menu-wrap">
<a href="#" target="_blank" class="logo-wrap"><!-- в место # вставляете свою ссылку для логотипа -->
<img class="logo" src="http://ipic.su/img/img7/fs/adobe-logo-inteligencia-artificial-no-design-grafico-designe1.1650731586.png" alt="Logo"> <!-- Здесь меняете логотип -->
</a>
<input type="checkbox" id="nav-tog">
<label for="nav-tog" class="drop-trigger">
<span class="btn-bar top"></span>
<span class="btn-bar middle"></span>
<span class="btn-bar bottom"></span>
</label>
<nav class="main-nav">
<label for="nav-tog" class="nav-revert"></label>
<a href="#service" class="nav-item"><!-- ссылка для пункта меню -->
<span class="menu-it"> ПОЛЕЗНОЕ </span><!-- название пункта меню -->
</a>
<a href="https://" class="nav-item"><!-- ссылка для пункта меню -->
<span class="menu-it"> ДЛЯ ПОЛЬЗОВАТЕЛЯ </span><!-- название пункта меню -->
</a>
<a href="https://" class="nav-item"><!-- ссылка для пункта меню -->
<span class="menu-it"> ПОРТФОЛИО </span><!-- название пункта меню -->
</a>
<a href="tel:+79999999999" class="nav-item phone1"><!-- меняете на свой номер телефона (только цифры) -->
<p class="small">Звонок:</p> <!-- можно написать любое слово -->
<span class="big"><b><small style="display: inline; margin: 0px; padding: 0px; font-size: 20px; color: #ffffff; line-height: inherit;"><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.9375;">+</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.875;">7</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit;"> </small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.8125;">(</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.75;">9</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.6875;">1</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.625;">4</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.5625;">)</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit;"> </small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.5;">6</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.4375;">8</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.375;">1</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.3125;">-</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.25;">5</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.1875;">9</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.125;">-</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: inherit; line-height: inherit; opacity: 0.0625;">2</small><small style="display: inline; margin: 0px; padding: 0px; font-size: inherit; color: #333333; line-height: inherit; opacity: 0;">2</small></small></b></span>
</a>
</nav>
</div>
</header>
<style type="text/css">
span.big {
font-size: 20px; <!-- размер шрифта меню -->
font-family: gilroy; <!-- шрифт для меню -->
}
p.small {
font-size: 16px; <!-- размер шрифта для слова звонок -->
}
b {
color: #fff;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
}
.main-header {
padding: 5px 0 0 20px;
width: 100%;
background: transparent;
// background: rgb(47,190,239);
// box-shadow: 0px 3px 4px 0px rgba(0,0,0,.4);
}
.menu-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
// max-width: 1000px;
width: 100%;
// margin: 0 auto;
// padding: 15px;
}
<!-- настройки для логотипа высота и ширина -->
.logo-wrap {
width: 50px;
min-height: 50px;
// margin: 0 10px 10px 0;
}
.logo-wrap img {
display: block;
width: 100%;
height: 100%;
// opacity: 0.75;
}
.main-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0vh;
transition: height .0s ease-out .4s, opacity .2s ease-out .2s, padding-left .2s ease-in 0s;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
z-index: 400;
overflow: hidden;
background-color: #fff;
padding-left: 100%;
}
.nav-item {
display: block;
padding: 7px 10px;
margin: 5px auto;
color: rgb(0,0,0);
width: 100%;
text-align: center;
z-index: 100;
}
.menu-it {
font-size: 0.9rem;
color: #fff; /* цвет шрифта в меню */
}
.nav-item:first-of-type {
margin-top: 20vh;
}
.drop-trigger {
height: 34px;
width: 50px;
position: relative;
background: rgba(0,0,0,0);
transition: all .1s ease-out 0s;
z-index: 450;
border-width: 0;
margin-left: auto;
}
.drop-trigger .btn-bar {
position: absolute;
display: block;
top: 20%;
left: 50%;
height: 4px;
width: 60%;
transition: all .4s ease-in 0s;
// background: rgb(250,250,250);
background: #ffffff; /* цвет кнопки меню */
margin: 0 auto;
transform-origin: 50% 50%;
transform: translateX(-50%) translateY(-0%) rotate(-0deg);
}
.btn-bar.middle {
top: 50%;
transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
.btn-bar.bottom {
top: calc(80% - 3px);
}
.nav-revert {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 50%); <!-- цвет и прозрачность фона в мобильном меню -->
z-index: 1;
}
#nav-tog {
display: none;
}
#nav-tog:checked ~ .drop-trigger .btn-bar {
transition-timing-function: ease-out;
}
#nav-tog:checked ~ .drop-trigger .btn-bar {
top: 50%;
background: #ffffff; <!-- цвет крестика закрытия меню -->
}
#nav-tog:checked ~ .drop-trigger .btn-bar.top {
transform: translateX(-50%) translateY(-50%) rotate(-315deg);
}
#nav-tog:checked ~ .drop-trigger .btn-bar.middle {
transform: translateX(-50%) translateY(-50%) rotate(-225deg);
}
#nav-tog:checked ~ .drop-trigger .btn-bar.bottom {
transform: translateX(-50%) translateY(-50%) rotate(-225deg);
}
#nav-tog:checked ~ .main-nav {
transition: height .0s ease-in 0s, opacity .2s ease-in 0s, padding-left .23s ease-out .21s;
opacity: 1;
height: 100vh;
padding-left: 0%;
}
@media screen and (min-width: 800px){
.drop-trigger,
.nav-revert {
display: none;
}
.main-nav {
height: auto;
position: relative;
padding-left: 0%;
flex-direction: row;
justify-content: flex-end;
opacity: 1;
background: rgba(0,0,0,0);
}
.nav-item:first-of-type{
margin-top: 0;
}
.nav-item {
font-size: 16px;
margin: 0 5px;
color: rgb(250,250,250);
width: auto;
}
}
p.small {
color: #ffffff; <!-- цвет шрифта номера телефона -->
}
</style>
Для изменения цвета м размера цифр номера телефона нужно поменять значения в этой части кода в следующих свойствах:
Для добавления дополнительного пункта меню нужно копировать и вставить следующую часть кода
