Здравствуйте я повторял все действия из
этого видео. Но у меня сайд бар сначала не "уходил" за видимое поле, а когда я разобрался с этим он "не выходил"
Весь код прилагается.
HTML<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Меню для сайта</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="sidebar">
<div class="toggle-btn" onclick="openMenu">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Меню сайта</li>
<li><a href="http://www.google.com">гугл</a></li>
<li><a href="v1\index.html">мой сайт</a></li>
<li><a href="http://www.youtube.com">ютуб</a></li>
</ul>
</div>
<script>
function openMenu() {
document.getElementById("sidebar").classList.toggle('active');
}
</script>
</body>
</html>
CSS* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
#sidebar {
position: fixed;
width: 250px;
height: 100%;
background: #57626F;
left: -250px;
border-right: 4px solid #E0E5EA
}
#sidebar.active {
left: 0px;
}
#sidebar ul li:first-child {
text-align: center;
color: white;
font-size: 1.95em;
list-style: none;
padding: 25px 10px 10px 10px
}
#sidebar ul li:not(first-child) {
width: 90%;
margin-left: 10%;
font-size: 1.1em;
list-style: none;
padding: 15px 10px
}
#sidebar ul li a {
color: #dfe5eb;
text-decoration: none;
}
#sidebar ul li a:hover {color: #59e9df}
#sidebar .toggle-btn {
position: absolute;
left: 270px;
top: 20px;
background: #E0E5EA;
padding: 10px;
border-radius: 12px;
cursor: pointer;
}
#sidebar .toggle-btn:hover {background: #556270}
#sidebar .toggle-btn:hover span {background: #fafafa}
#sidebar .toggle-btn span {
display: block;
width: 25px;
height: 4px;
background-color: #666;
margin: 4px;
}
