For an assignment, I have created a menu with a list of items positioned on the left side of the screen. The requirement is that when a menu item is clicked, it should move outside the menu using only CSS/HTML.
I managed to achieve this by utilizing the :target pseudo-class along with the href tag. However, I encountered an issue where I couldn't revert the menu back to its original position since a menu item always remains targeted and stays outside the menu.
Initially, I thought clicking on the targeted element again would remove the pseudo-class, but that did not work as expected.
I believe the optimal solution to return the menu to its initial layout is to un-target the current item without selecting another one.
Here is the HTML structure:
<a class="card" id="card1" href="#card1">
<div class="avatar"></div>
<div class="info">
<p>Leah Shapiro</p>
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cca0a9ada4e2bfa4adbca5bea38caba1ada5a0e2afa3a1">[email protected]</a></p>
</div>
</a>
<a class="card" id="card2" href="#card2">
<div class="avatar"></div>
<div class="info">
<p>Rob Been</p>
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f737a7e77316c77727077596c70727">[email protected]</a></p>
</div>
</a>
<a class="card" id="card3" href="#card3">
<div class="avatar"></div>
<div class="info">
<p>Peter Hayes</p>
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e9858c8881c79ae788899099869883828d8916"><abbr title="Email blocked due to scraping protection"></abbr></a></p>
</div>
</a>
The CSS styling for the menu:
.list {
height: 100%;
width: 200px;
background: #dddddd;
float: left;
}
.list .card {
border: solid;
display: flex;
align-items: center;
justify-content: center;
height: 55px;
}
:target {
z-index: 1000;
background-color: red;
position: absolute;
left: 300px;
top: 200px;
}
Link to the codepen demo: https://codepen.io/maydanachi/pen/QXPYvy
Although I found various JavaScript solutions for this issue, the rules specify that only CSS/HTML should be used.