Youtube link - Click Here
Slide Page Content to the Right:
Source code : HTML
<!DOCTYPE html>
<html>
<head>
<title>
Slide content to the right
</title>
<script src="https://kit.fontawesome.com/69bab20bdc.js" crossorigin="anonymous"></script>
<link href="slideContent.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="nav">
<div class="close">
<p>close</p>
<!--pasting icon-->
<i class="fa-solid fa-xmark"></i>
</div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="main">
<div class="header">
<!--pasting icon-->
<i class="fa-solid fa-bars"></i>
<p>My page</p>
</div>
<img src="C:\Users\sugan\Downloads\Static (1).png"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto tempora tempore libero nesciunt error quidem. Atque, dolorum quod recusandae quas, tempore reiciendis itaque
ipsam accusamus corrupti repellendus minus vero?
</div>
</div>
<script>
document.getElementsByClassName("fa-bars")[0].addEventListener('click', function() {
document.getElementsByClassName('nav')[0].style.left = 0;
document.getElementsByClassName('main')[0].style.marginLeft = 200 + 'px';
document.getElementsByClassName('fa-bars')[0].style.display = 'none';
})
document.getElementsByClassName("close")[0].addEventListener('click', function() {
document.getElementsByClassName('nav')[0].style.left = -200 + "px";
document.getElementsByClassName('main')[0].style.marginLeft = 0 + 'px';
document.getElementsByClassName('fa-bars')[0].style.display = 'block';
})
</script>
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: relative;
}
.nav {
width: 200px;
height: 100%;
background-color: #ececec;
position: fixed;
left: -200px;
transition: 1s;
padding: 20px;
}
li {
list-style: none;
margin-top: 5px;
}
li:hover {
background-color: grey;
color: white;
}
.main {
transition: 1s;
}
.header {
padding: 20px;
background-color: #22559c;
font-size: 20px;
}
.header>p {
color: white;
margin-top: 5px;
}
img {
width: 100%;
}
.header>.fa-bars {
cursor: pointer;
color: white;
}
.nav>.close {
cursor: pointer;
background-color: red;
color: white;
}
.close>p,
.close>i {
display: inline;
}
Post a Comment