Код: Выделить всё
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
menu.onclick = () => {
menu.classList.toggle('bx-x');
navbar.classList.toggle('open');
}< /code>
#menu-icon {
font-size: 35px;
color: var(--text-color);
cursor: pointer;
z-index: 10001;
display: none;
}
@media (max-width: 1280px) {
header {
padding: 14px 2%;
transition: .2s;
}
.navbar a {
padding: 5px 0;
margin: 0px 20px;
}
}
@media (max-width: 1090px) {
#menu-icon {
display: block;
}
.navbar {
position: absolute;
top: 100%;
right: -100%;
width: 270px;
height: 29vh;
background: var(--main-color);
display: flex;
flex-direction: column;
justify-content: flex-start;
border-radius: 10px;
transition: all .50s ease;
}
.navbar a {
display: block;
margin: 12px 0;
padding: 0px 25px;
transition: all .50s ease;
}
.navbar a:hover {
color: var(--text-color);
transform: translateY(5px);
}
.navbar a:active {
color: var(--text-color)
}
.navbar .open {
right: 2%;
}
}< /code>
[url=#][i][/i]Logo[/url]
[list]
[*][url=#]Home[/url]
[*][url=#]About me[/url]
[*][url=#]Services[/url]
[*][url=#]Blog[/url]
[*][url=#]Contact me[/url]
[/list]
[url=#][i][/i]Sign In[/url]
[url=#]Register[/url]
Здесь вы можете увидеть:
Здесь "src =" https://i.sstatic.net/iktfzkwk.png "/>
Каждый раз, когда я уменьшаю размер экрана, другие варианты Navbar не открываются, показывают только поперечный знак. Кто -нибудь может помочь мне решить эту проблему?
Подробнее здесь: https://stackoverflow.com/questions/795 ... the-navbar
