Как сделать красивое меню для мультиссылки?
Created on 6 October, 2021 • Инструкции • 2,467 views • 3 minutes read
1. Отредактируйте или создайте мультиссылку
2. Добавьте новый блок - HTML
3. Скопируйте готовый код меню:
<style>
:root {
--theme-color: #03A9F4; /* основной цвет */
--bg-color: #fff; /* фоновый цвет */
}
@keyframes checked-anim {
0% {
width: 10%;
height: 10%;
}
100% {
width: 100%;
height: 100%;
border-radius: 0;
}
}
@keyframes not-checked-anim {
0% {
width: 100%;
height: 100%;
}
}
#menu li, a {
color: #fff;
font-weight: 700;
line-height: 1.8;
text-decoration: none;
text-transform: none;
list-style: none;
display: none;
outline: 0;
}
#menu li {
margin: 5px 0;
max-width: 320px;
}
#menu a {
display: block;
padding: 4px 40px;
border-radius: 30px;
background-color: var(--theme-color);
border: 3px solid var(--theme-color);
}
#menu a:hover,
#menu a:focus,
#menu a:active
{
display: block;
color: var(--theme-color);
background-color: transparent;
transition: all .3s;
}
#trigger, #burger, #burger:before, #burger:after {
position: fixed;
top: 25px;
right: 25px;
background: var(--theme-color);
width: 30px;
height: 5px;
cursor: pointer;
z-index: 999;
}
#trigger {
height: 25px;
background: none;
}
#burger:before {
content: " ";
top: 35px;
right: 25px;
}
#burger:after {
content: " ";
top: 45px;
right: 25px;
}
#menu-toggle:checked + #trigger + #burger {
top: 35px;
transform: rotate(-180deg);
transition: transform .2s ease;
}
#menu-toggle:checked + #trigger + #burger:before {
width: 20px;
top: 3px;
right: 14px;
transform: rotate(-145deg) translateX(-5px);
transition: transform .2s ease;
}
#menu-toggle:checked + #trigger + #burger:after {
width: 20px;
top: -3px;
right: 14px;
transform: rotate(145deg) translateX(-5px);
transition: transform .2s ease;
}
#menu {
position: fixed;
top: 0;
right: 0;
z-index: 998;
margin: 0; padding: 0;
width: 110px;
height: 110px;
background-color: var(--bg-color);
border-bottom-left-radius: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
animation: not-checked-anim .2s both;
transition: .2s;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
#menu-toggle:checked + #trigger + #burger + #menu {
animation: checked-anim .6s ease both;
}
#menu-toggle:checked + #trigger ~ #menu > li, a {
display: block;
}
[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
display: none;
}
</style>
<!-- begin burger -->
<input type="checkbox" id="menu-toggle"/>
<label id="trigger" for="menu-toggle"></label>
<label id="burger" for="menu-toggle"></label>
<!-- end burger -->
<!-- begin menu -->
<ul id="menu">
<li><a href="/me">Главная</a></li>
<li><a href="/example">Фишки</a></li>
<li><a href="/bonus">Бонусы</a></li>
<li><a href="/register">Регистрация</a></li>
</ul>
<!-- end menu -->
4. Вставьте готовый код в поле и жмите "Сохранить" - Готово
Ответы на вопросы:
1. Как изменить цвет фона?
Найдите в коде в 3й строке, такое свойство:
--bg-color: #fff; /* фоновый цвет */
и вместо #fff напишите свой цвет
Подобрать цвет можно здесь - https://colorscheme.ru
2. Как изменить цвет ссылок, меню и стрелки?
Найдите в коде строку:
--theme-color: #03A9F4; /* основной цвет */
и вместо #03A9F4 укажите свой цвет
3. Как изменить/добавить новые ссылки в меню?
Найдите строки в коде:
<!-- begin menu -->
<ul id="menu">
<li><a href="/me">Главная</a></li>
<li><a href="/example">Фишки</a></li>
<li><a href="/bonus">Бонусы</a></li>
<li><a href="/register">Регистрация</a></li>
</ul>
<!-- end menu -->
и продублируйте/измените строки, чтобы получилось так:
<!-- begin menu -->
<ul id="menu">
<li><a href="/me">Главная</a></li>
<li><a href="/example">Фишки</a></li>
<li><a href="/bonus">Бонусы</a></li>
<li><a href="/register">Регистрация</a></li>
<li><a href="Сюда вставляем новый URL">Новая ссылка</a></li>
</ul>
<!-- end menu -->
замените текст и вставьте нужную ссылку в свойство href="/register" вместо /register указываем свою ссылку на новую страницу таптабус или любой сайт
<!-- begin menu -->
<ul id="menu">
<li><a href="/Iovt8TX5R2">ТЕКСТ НОВОЙ ССЫЛКИ</a></li>
<li><a href="https://youtu.be/Ue5jD-vBZ40">ССЫЛКА НА ЮТУБ</a></li>
</ul>
<!-- end menu -->
Готово! Получившийся код, заново вставьте в HTML блок своей мультиссылки.