My goal is to create a small menu with only the initial letter of each name visible, but when focused, I want the full word to appear. Here's an example:
css:
.menu:focus {
}
php:
<nav>
<li class="menu"><a href="home.php>h</a></li><br>
<li class="menu"><a href="galery.php>g</a></li>
</nav>
and so you simply see the menu like:
h
g
and if you click on 'h' for example, you would see:
home
g
How can I achieve this?
And then if clicked again, go to the linked page.
Is it possible?
edit
php:
<nav>
<li>
<span class="m">
H
</span>
<span class="f">
<a class="menu" href="home.php">
Home
</a>
</span>
</li>
</span>
css:
nav li .f {
display: none;
}
nav li:hover .f {
display: inline;
background-color: #202020;
}
Up to this point, everything works fine as the full word is displayed when passing by. However, changing from hover to focus breaks the functionality.
Also, making ".m" display none on hover is not working. Is there a way to make this switch possible?
css:
nav li:focus .f {
display: inline;
background-color: #202020;
}
nav li:hover .m {
display: none;
}
Thanks