Chciałbym w nagłówku zrobić panel, który będzie się wysuwał pionowo. Będą w nim linki typu "Lista znajomych" "Wyloguj", itp. W wyszukiwarce Google znalazłem tylko poradniki o wysuwanych panelach z boku. Czy moglibyście mnie trochę pokierować, jak zrobić, żeby to się wysuwało w pionie?
*Wymagane zalogowanie się do konta testowego, ponieważ wysuwany panel ma być w nagłówku użytkowników.
To menu jest teraz tak namieszane, że szkoda komentować..
Tak na szybko, pobaw się jak chesz inaczej
CSS
/* Header */
.topnavigation {
overflow: hidden;
background-color: rgba(10,10,10,0.8);
}
.topnavigation a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnavigation a:hover {
background-color: #ddd;
color: black;
}
.topnavigation .icon {
display: none;
}
screen and (min-width: 0px) {
.topnavigation a:not(:first-child) {display: none;}
.topnavigation a.icon {
float: right;
display: block;
}
}
screen and (min-width: 0px) {
.topnavigation.responsive {position: relative;}
.topnavigation.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnavigation.responsive a {
float: none;
display: block;
text-align: left;
}
Następnie dodaj to do header
<div class="topnavigation" id="myTopnav">
<a href="#">Menu</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>