На днях набросал код верхнего меню без использования скриптов. Всё работает на ура, но правильно ли это? Дело в том, что я использовал для стилизации input type="checkbox", pointer-events: none; и много чего ещё. Имеет ли такая реализация место в проектах или всё же лучше использовать JS для таких ситуаций?
Код меню:
body {
font-family: Tahoma, Arial
}
.topbar {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: white;
border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.topbar__button-open-leftmenu {
display: block;
width: 24px;
height: 24px;
padding: 8px;
cursor: pointer;
}
.topbar__button-open-leftmenu:hover {
border-bottom: 2px solid #1C90F3;
}
.topbar__button-open-leftmenu svg path {
fill: #333;
}
.topbar__button-open-leftmenu:hover svg path {
fill: #000;
}
.topbar__memu {
display: flex;
list-style: none;
padding: 0;
margin: 0 auto 0 0;
opacity: 1;
transform: translateX(0);
transition: all 0.4s ease;
pointer-events: auto;
}
.topbar__memu li {
transform: scale(1);
transition: all 0.6s ease;
opacity: 1;
}
.topbar__memu li:nth-child(1) {
transition-delay: 0s;
}
.topbar__memu li:nth-child(2) {
transition-delay: 0.1s;
}
.topbar__memu li:nth-child(3) {
transition-delay: 0.2s;
}
#topbar__checked-search:checked ~ .topbar__memu li:nth-child(1) {
transform: scale(0);
transition-delay: 0.2s;
opacity: 0;
pointer-events: none;
}
#topbar__checked-search:checked ~ .topbar__memu li:nth-child(2) {
transform: scale(0);
transition-delay: 0.1s;
opacity: 0;
pointer-events: none;
}
#topbar__checked-search:checked ~ .topbar__memu li:nth-child(3) {
transform: scale(0);
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.topbar__memu-item {
display: block;
height: 40px;
padding: 0 10px;
line-height: 40px;
font-size: 0.8rem;
color: #333;
text-decoration: none;
}
.topbar__memu-item:hover {
color: #000;
border-bottom: 2px solid #1C90F3;
}
.topbar__button-open-search {
display: block;
position: relative;
width: 40px;
height: 40px;
}
.topbar__button-open-search:hover {
background-color: #f5f5f5;
}
.topbar__button-open-search svg {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
}
.topbar__button-open-search svg path {
fill: #333;
}
.topbar__button-open-search:hover svg path {
fill: #000;
}
.topbar__button-open-search svg#icon-serach-close {
opacity: 1;
transition: all 0.4s ease;
}
.topbar__button-open-search svg#icon-serach-open {
opacity: 0;
transition: all 0.4s ease;
}
#topbar__checked-search:checked ~ .topbar__button-open-search svg#icon-serach-close {
opacity: 0;
transition: all 0.4s ease;
}
#topbar__checked-search:checked ~ .topbar__button-open-search svg#icon-serach-open {
opacity: 1;
transition: all 0.4s ease;
}
#topbar__checked-search {
display: none;
}
.topbar__search {
display: block;
position: absolute;
left: 50%;
top: 0;
width: 60%;
height: 30px;
padding: 5px;
opacity: 0;
transform: translateX(-50%);
transition: opacity 0.4s ease;
pointer-events: none;
}
#topbar__checked-search:checked ~ .topbar__search {
transition-delay: 0.6s;
opacity: 1;
pointer-events: auto;
}
.topbar__search-input {
display: block;
width: calc(100% - 40px);
height: 30px;
padding: 0 30px 0 10px;
border: none;
border-radius: 3px;
background-color: #f4f4f4;
font-family: inherit;
outline: none;
transition: background 0.2s ease;
}
.topbar__search-input:focus {
background-color: #eeeeee;
}
.topbar__search-button {
display: block;
position: absolute;
top: 11px;
right: 12px;
width: 18px;
height: 18px;
padding: 0;
background: none;
border: none;
cursor: pointer;
}
.topbar__search-button svg path {
fill: #333;
}
.topbar__search-button:hover svg path {
fill: #000;
}
.topbar__search-panel {
display: block;
position: fixed;
top: 42px;
left: 0px;
width: 100%;
height: calc(100vh - 42px);
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
transition: opacity 1s ease;
}
#topbar__checked-search:checked ~ .topbar__search-panel {
opacity: 1;
pointer-events: auto;
}
.topbar__search-panel-list {
display: block;
position: absolute;
top: 10px;
left: 50%;
width: 60%;
padding: 5px 0;
border-radius: 2px;
transform: translateX(-50%) translateY(-20%);
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.4s ease, opacity 0.4s ease;
opacity: 0;
}
#topbar__checked-search:checked ~ .topbar__search-panel .topbar__search-panel-list {
transition-delay: 0.6s;
transform: translateX(-50%) translateY(0%);
opacity: 1;
}
.topbar__search-panel-list:before {
display: block;
content: 'Результаты поиска:';
font-size: 0.8rem;
padding: 3px 10px;
margin: 0 0 5px 0;
color: #acacac;
border-bottom: 1px solid #f2f2f2;
}
.topbar__search-panel-list-item {
display: block;
font-size: 0.8rem;
padding: 3px 10px;
color: #333;
text-decoration: none;
}
.topbar__search-panel-list-item:hover {
background-color: #f4f4f4;
}
/* Leftmenu */
.leftmenu {
display: block;
position: fixed;
top: 42px;
left: 0px;
width: 100%;
height: calc(100vh - 42px);
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
#topbar__checked-leftmenu:checked + .leftmenu {
opacity: 1;
pointer-events: auto;
}
.leftmenu__list {
display: block;
position: absolute;
left: -200px;
width: 200px;
height: 100%;
margin: 0;
padding: 0;
background-color: white;
transition: left 0.4s ease;
}
#topbar__checked-leftmenu:checked + .leftmenu .leftmenu__list {
left: 0;
}
.leftmenu__list-item {
display: block;
padding: 6px 12px;
font-size: 0.8rem;
color: #333;
text-decoration: none;
}
.leftmenu__list-item:hover {
background-color: #f4f4f4;
}
.leftmenu__hidemenu {
display: block;
position: absolute;
left: 200px;
top: 0;
width: calc(100% - 200px);
height: 100%;
}
Если кто знает, как реализовать такое более качественно, то буду рад поучиться :)
Ответ
В современном web приложении js кода непомерно много, и, моё мнение - если есть возможность писать без js - пишите без js. В том числе и меню.
Если вы напишете на css меню - оно будет быстрее.
Вероятность краша программы, который остановит всю работу приложения
будет существенно снижена.
Написать css меню быстрее чем на js.
Когда стоит написать меню js.
Вам надо написать крутое меню которое имеет ряд функционала (нажатие по кнопки как описано выше, задержка при потере курсора мыши, итд).
Но все простые всплывашки если можно обойтись без js надо писать без js.
Это не только моё мнение, детально, почему стоит уменьшить объём js кода рассказано в этой статье
Комментариев нет:
Отправить комментарий