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.
