Menu rozsuwane, po kliknieciu.

Witam, kończę stronę zostały mi 2 sprawy z którymi nie potrafię się uporać: 

-Jak zrobić kalendarz, ewentualnie wrzucić zrobiony projekt. Chodzi o kalendarz z wydarzeniami jak ten: http://www.lo1milicz.pl/cms/index.php   

-Ważniejszy problem czyli rozsuwane menu po kliknięciu, dla urządzeń mobilnych.Już rozwijam problem.Otóż ustawiłem dla urządzeń z szerokością większą niż 1024px za pomocą @media, że menu rozwija się po najechaniu, zwykły lubiany hover, i zmienia się pozycja z visibility:none na visibility:visible   Na komórkach nie mozna przecież użyć hovera, drugi problem jest taki że właściwość visible jest słabo obsługiwana na urządzeniach mobilnych. Coś kombinowałem z AddEventListener i dodaniem nowej klasy, ale nie działa. Wrzucam fragmenty kodu z  HTML i CSS oraz zdjęcia: 

<div class="subnav "><ol><li><a href="index.html">Menu Główne</a></li><li><a href="https://uonetplus.vulcan.net.pl/powiatkrotoszynski">E-Dziennik</a></li><li><a href="#">Projekty</a><ul><li><a href="mFundacja.html">mFundacja</a></li><li><a href="swoi.html">SWOi</a></li><li><a href="newton.html">Newton</a></li><li><a href="fizyka.html">Ciekawa fizyka</a></li><li><a href="szkolawruchu.html">Szkoła w ruchu</a></li><li><a href="dlasztuki.html">Dla sztuki</a></li><li><a href="centres.html">CENTRES</a></li><li><a href="intaling.html">insta.ling</a></li></ul></li><li><a href="#">Ludzie</a><ul><li><a href="dyrekcja.html">Dyrekcja</a></li><li><a href="nauczyciele.html">Nauczyciele</a></li><li><a href="pedagog.html">Pedagog</a></li><li><a href="absolwenci.html">Absolwenci</a></li><li><a href="samorzad.html">Samorząd</a></li></ul></li><li><a href="#">Inne</a><ul><li><a href="patron.html">Patron</a></li><li><a href="historia.html">Historia szkoły</a></li><li><a href="wspolpraca.html">Współpraca</a></li><li><a href="kalendarz.html">Kalendarz</a></li><li><a href="dopobrania.html">Do pobrania</a></li></ul></li><li><a href="kontakt.html">Kontakt</a></li></ol></div> 

.subnav{

    width:95%;
    margin-left: auto;
    margin-right: auto;
    display:none;
    text-align: center;
    background: #207cca;



}
.after{
    display:block;
}
.subnav ol{
        width: 100%;
      background: #207cca;
      list-style: none;
      margin: 0;
      padding: 0;

}
.subnav ol a{
    text-decoration: none;
      display: inline-block;
      width: 100%;
      height: 100%;
      color: white;
    line-height: 2em;


}
.subnav ol a:hover{
    background-color: #d87585;
    cursor: pointer;
    font-weight: bold;
}
.subnav ol li{
     display: inline-block;
      width: 13%;
      margin: 0;
      text-align: center;
      position: relative;
      top: 0;


}

.subnav ol li ul{
    visibility: hidden;
      position: absolute;
      width: 100%;
      background: #207cca;
      padding: 0;

    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin:50% 0 ;
    -moz-transform-origin:50% 0 ;
    -ms-transform-origin:50% 0 ;
    -o-transform-origin:50% 0 ;
    transform-origin:50% 0 ;
    -webkit-transition-duration:0.5s ;
    -o-transition-duration:0.5s ;
    transition-duration:0.5s;


}
.subnav ol li ul li{
     margin: 0;
      display: inline-block;
      height: 2em;
      width: 100%;



}
.subnav ol li:hover ul{
    visibility: visible;
    -webkit-transform:scaleY(1) ;
    -ms-transform:scaleY(1) ;
    -o-transform:scaleY(1) ;
    transform:scaleY(1);
    z-index: 1;



}
.subnav a:hover{
  background: #d87585;
}

$('.l-icon').on('click',function(){
    $('.subnav').toggleClass("after");


});