i was trying to make my portfolio website with vanilla javascript. it's not half way there yet, i am facing some issues with the sidebar content. i've made the sidebar contents with (triangle top left) shape at the end, below is the html file ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="section">
<img src="img/avatar.png" alt="image" class="avatar" />
<p class="text-center">
Hello World !
</p>
<div class="content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!-- JS -->
<script src="js/jquery-3.4.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/tooltip.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
the css file ->
.avatar {
padding: 15px;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 200px;
}
.section {
margin-left: -400px;
width: 300px;
height: 100%;
position: fixed;
}
.content {
margin-top: 5px;
margin-bottom: 5px;
margin-left: -400px;
padding-top: 13px;
width: 250px;
height: 50px;
text-align: center;
}
.content:after {
content: "";
width: 0;
height: 0;
position: relative;
left: 150px;
top: -4px;
border-top: 50px solid rgba(0, 255, 0, 0.4);
border-right: 50px solid transparent;
}
and the js file ->
var section = document.querySelectorAll("div.section");
section[0].style.marginLeft = "0px";
section[0].style.transition = 0.5 + "s";
var content = document.querySelectorAll("div.content");
window.addEventListener("load", function() {
for (i = 0; i < content.length; i++) {
content[i].style.marginLeft = "0px";
content[i].style.backgroundColor = "rgba(0, 255, 0, 0.4)";
content[i].style.transition = (i + 1) * 0.2 + "s";
content[i].style.transitionDelay = "0.5s";
}
});
for (let j = 0; j < content.length; j++) {
content[j].addEventListener("mouseover", function() {
content[j].style.width = "300px";
content[j].style.transition = ".5s";
content[j].style.transitionDelay = "0s";
// window.getComputedStyle(content[j], ":after").getPropertyValue("left");
});
content[j].addEventListener("mouseout", function() {
content[j].style.width = "250px";
content[j].style.transition = ".5s";
content[j].style.transitionDelay = "0s";
});
}
everything seems to be ok but, when i am adding hover effect, the shapes overlaps with the div. it's because i am using (:after) css pseudo element. i've managed to access the pseudo element's value in javascript by window.getComputedStyle(content[j], ":after").getPropertyValue("left"); it's returning the pseudo elements value, when console.log() it. but how can i change the value and add more styles like change colors to it while hovering ?
