Szukam Jak zrobić wysuwany pionowy panel w nagłówku?

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.

http://www.kurshtml.edu.pl/skrypty/wygla...ijane.html

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;
}

@media screen and (min-width: 0px) {
 .topnavigation a:not(:first-child) {display: none;}
 .topnavigation a.icon {
   float: right;
   display: block;
 }
}

@media 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>

@Adrian16  i Twój sposób nie pomógł.
   

Problem rozwiązany. Kod zaczerpnąłem stąd: http://webkod.pl/kurs-css/lekcje/dzial-4...e-menu-css