Transition sous-menu

Bonojur,

Je souhaite animer mon menu sur la hauteur au défilement mais je n'y arrive pas :

        <!-- DEBUT MENU HAMBURGER -->
            <ul class="side-nav" id="mobile-menu">
                <div class="logo">z</div>
                    <li class="<?=($page=="accueil")?"active" : ""; ?>"><i class="material-icons icone_menu">home</i><a href="index.php?page=accueil">Accueil</a></li>
                    
                    <script>
                        function sousMenu() {
                            var sous_menu = document.getElementById('sub-nav-mobile');
                            var btn_sous_menu = document.getElementById("btn-sous-menu");

                            if (sous_menu.style.display == 'none' ||  sous_menu.style.display == '') {
                                sous_menu.style.display = 'block';
                                btn_sous_menu.innerHTML = "clear";
                            }
                            else {
                                sous_menu.style.display = 'none';
                                btn_sous_menu.innerHTML = "add";
                                }
                            }
                                btn_sous_menu.addEventListener("click", sousMenu);
                                
                    </script>
                    
                <li><i class="material-icons icone_menu">line_weight</i><span style="color:#424242">Articles</span><a class="lien-sous-menu" href=javascript:sousMenu()><i id="btn-sous-menu" class="btn-sous-menu material-icons ">add</i></a>
					<ul id="sub-nav-mobile" class="sub-nav-mobile">
                        <li><a class="<?=($page=="articles")?"active" : ""; ?>" href="index.php?page=articles">Articles 1</a></li>
                        <li><a class="<?=($page=="articles")?"active" : ""; ?>" href="index.php?page=articles">Articles 2</a></li>
					</ul>
				</li>
                    <li class="<?=($page=="recherche")?"active" : ""; ?>"><i class="material-icons icone_menu">search</i><a href="index.php?page=recherche">Rechercher</a></li>
                    <li class="<?=($page=="contact")?"active" : ""; ?>"><i class="material-icons icone_menu">call</i><a href="index.php?page=contact">Contact</a></li>
            </ul>
            <!-- FIN MENU HAMBURGER -->

C'est donc mon UL avec l'ID "sub-nav-mobile" qui s'ouvre avec le javascript que je souhaite animer avec une transition sur le max-height mais je ne sais pas comment m'y prendre.
Je vous remercie de votre aide.

De l'aide, pourquoi pas ? Mais le mélange avec Php n'aide pas à la résolution du problème car il est difficile de tester le code en l'état. Un exemple en ligne sur CodePen, jsfiddle ou une plateforme similaire aiderait beaucoup.

L'injection d'un script en plein milieu des items du menu n'est pas à faire, quitte à le placer "à l'arrache" autant le mettre juste avant le menu. Quoi qu'il en soit ce mélange html/javascript d'un autre âge est assez terrible...

C'est vrai que code pen à l'air pratique alors voila l'URL:

http://codepen.io/barale61/pen/JXrPyg

C'est quand on clique sur le "+" que je souhaite faire une transition sur le sous-menu.

Il faut mettre la fenêtre en mode mobile pour voir le menu.
Modifié par barale61 (31 Mar 2016 - 17:57)