I am currently working on a portfolio website and I have a specific idea in mind for how I want the work to be displayed. I would like it to slide up onto the screen when the user clicks on the portfolio section, similar to how a navigation bar slides over when you click on a menu icon. So far, I have been successful in implementing this effect for nav bars on the right and left, but I am facing a challenge when it comes to the bottom placement, as the block still shows even when the height is set to 0.
I have tried using `display:none` and then changing it to `display:block` with jQuery, however, this approach removes the smooth animation of it sliding onto the screen.
html
<div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
<a href="#">testing</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>
css
.portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
}
javascript
function openNav2() {
document.getElementById("portfolionav").style.height = "100vh";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
}