Responsive HTML5 menu

I need a menu that is adaptative, so much that if I open it from a laptop that it is already exploded but if I open it from a mobile device, then it needs to be clicked and exploded.

Such tool I used on my web site. If I see my resume section:
http://marcoandolfi.eu5.org/cv.html

you have this view from your laptop:

Instead if you open it from your iPhone you should have a view like this:

First view:

When Opened:

Ok, nice! How? 

First of all you need a JS which is the main engine 

(on my website is a separate file "dropdown-menu.js"): 

   
 if(window.addEventListener){   
      window.addEventListener("load", doLoad, false);  
 }else if(window.attachEvent){   
      window.attachEvent("onload", doLoad);  
 }else if(window.onLoad){  
   window.onload = doLoad;  
 }  
   
function doLoad(){  
        var nav = document.getElementsByTagName("NAV")[0];  
        var childs = nav.childNodes;  
        for(var i = 0; i < childs.length; i++){  
        var child = childs[i];  
        if(child.tagName === "H2"){  
          child.onclick = function(){toogleMenu(nav)};  
          child.onfocus = function(){toogleMenu(nav)};  
          break;  
        }  
}  
   
      var elClass = nav.className;  
      var arrClasses = elClass.split(" ");  
      for(var i = 0; i < arrClasses.length; i++){  
         if(arrClasses[i] === "expanded") arrClasses.splice(i, 1);  
      }  
      nav.className = arrClasses.join(" ");  
      nav.className += " non-expanded";  
      return false;  
 };  
   
 function toogleMenu(el){  
      var elClass = el.className;  
      var arrClasses = elClass.split(" ");  
      for(var i = 0; i < arrClasses.length; i++){  
        if(arrClasses[i] === "expanded"){  
          arrClasses.splice(i, 1);  
          arrClasses[length + 1] = "non-expanded";  
        }  else if(arrClasses[i] === "non-expanded"){  
          arrClasses.splice(i, 1);  
          arrClasses[length + 1] = "expanded";  
        }  
      }  
      el.className = arrClasses.join(" ");  
      return false;  
 }  

Then a bit of CSS 

   
 nav h2, aside h2{  
      position: absolute;  
      left: -999em;  
 }  
   
 nav {  
      clear: left;  
      margin: 0 0 2em;  
 }  
   
 nav ol{  
      border: 1px solid #e6e6e6;  
      padding-left: 0;  
 }  
   
 nav li {  
      border-bottom: 1px solid #eee;  
      line-height: 2em;  
      list-style: none;  
      margin-left: 0;  
 }  
   
 nav li:last-child {  
   border-bottom: 0;  
 }  
   
 nav a {  
      color: #999;  
      display: block;  
      padding: .5em .8em;  
      text-decoration: none;  
 }  
   
 nav .current {  
      font-weight: bold;  
 }  
   
 .dropdown-header {  
      font-size: 14px;  
      font-weight: bold;  
      color: #000000;  
 }  
   
 @media screen and (max-width: 37.499em){ /* base: 16px -> [< 600px] */  
   
      nav {  
           margin: 0 0 1.5em;  
           overflow: hidden;  
           position: relative;  
      }  
   
      nav h2 {  
           cursor: pointer;  
           font-size: 0.5em;  
           height: 4.2em;   
           left: auto;  
           margin: 0;  
           right: 0;  
           position: absolute;  
           text-indent: -999em;  
           top: 0;  
           width: 4em;  
      }  
   
      nav.non-expanded h2 {  
           background: #ccc url(../img/check_icon.png) no-repeat -35px 45%;  
      }  
   
      nav.expanded h2 {  
           background: #ccc url(../img/check_icon.png) no-repeat 0px 45%;  
      }  
   
      nav h2{  
           background: none;  
      }  
   
      nav a {  
           padding-right: 3em;  
      }  
   
      nav li {  
           clear: left;  
           line-height: 1em;  
      }  
   
      nav.non-expanded li{  
           display: none;  
      }  
   
      nav.expanded li{  
           display: block;  
      }  
   
      nav li.current {  
           border-bottom-width: 0;  
           display: block;  
      }  
   
      nav.expanded li.current {  
           border-bottom-width: 1px;  
      }  
   
 }  

(on my website is a separate file "dropdown-menu.css"): 

and now the HTML:

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   [...]  
   <!-- Bootstrap core CSS -->  
   <link href="css/bootstrap.min.css" rel="stylesheet">  
   <!-- CSS for drop down menú adaptive -->  
   <link href="css/dropdown-menu.css" rel="stylesheet">  
   [...]  
  </head>  
  <body>  
    [...]          
       <nav>  
        <h2>Documents</h2>  
         <ol>  
           <li class="dropdown-header"> Professional </li>  
           <li class="selectable" id="CV"><a href="javascript:loadFrame('CV');">Curriculum Vitae</a></li>  
           <li class="selectable" id="ProjectList"><a href="javascript:loadFrame('ProjectList');">Project List</a></li>  
           <li class="selectable" id="Recommendation"><a href="javascript:loadFrame('Recommendation');">Recommendation</a></li>  
           <li class="dropdown-header"> Education </li>  
           <li class="selectable" id="HighSchoolDiploma"><a href="javascript:loadFrame('HighSchoolDiploma');">High School Diploma</a></li>  
           <li class="selectable" id="Bachelor"><a href="javascript:loadFrame('Bachelor');">Bachelor Degree</a></li>  
           <li class="selectable" id="Master"><a href="javascript:loadFrame('Master');">Master Degree</a></li>  
           <li class="selectable" id="Paper"><a href="javascript:loadFrame('Paper');">Scientific publication</a></li>  
           <li class="dropdown-header"> Certification </li>  
           <li class="selectable" id="TUV"><a href="javascript:loadFrame('TUV');">PM Certification</a></li>  
           <li class="selectable" id="Scrum"><a href="javascript:loadFrame('Scrum');">Scrum Master Certification</a></li>  
           <li class="selectable" id="HTML5"><a href="javascript:loadFrame('HTML5');">HTML5 Certification</a></li>  
           <li class="selectable" id="SAPHANA"><a href="javascript:loadFrame('SAPHANA');">SAP HANA Certification</a></li>  
         </ol>  
       </nav>  
   [...]  
   <!-- Bootstrap core JavaScript  
   ================================================== -->  
   <!-- Placed at the end of the document so the pages load faster -->  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
   <script src="js/dropdown-menu.js"></script>  
   <script src="js/bootstrap.min.js"></script>  
   [...]  
  </body>  
 </html>  

eh voilá!


Constraint: 
The JS is based on the search of the tag <nav>.
This means: if you have more than one <nav> tag potentially it will not work. You need to have only one <nav>. It is easy to extend to code and change the search of the tag not on the tag type, but on the tag id.