View Recent Edits
The CSS:
div.mobile-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
div.mobile-menu li {
float: left;
}
div.mobile-menu li a,
div.mobile-menu .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
div.mobile-menu li a:hover,
div.mobile-menu div#NodeletsDropdown dt a:hover,
div.mobile-menu .dropdown:hover .dropbtn {
background-color: red;
}
div.mobile-menu li.dropdown {
display: inline-block;
}
div.mobile-menu .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
div.mobile-menu .dropdown-content a {
color: #f1f1f1;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
div.mobile-menu .dropdown-content a:hover {
background-color: #f10101;
}
div.mobile-menu .show { display:block; }
div.mobile-menu div.nodelet_body { display:none; }
div.mobile-menu a.nodelethead-annot { display:none; }
div.mobile-menu div#NodeletsDropdown dt,
div.mobile-menu div#NodeletsDropdown dt a
{ background-color: #333; }
div.mobile-menu div#NodeletsDropdown dd { display:none; }
div { display:block; border: thin solid green; }
form { display:block; border: thin solid red; }
table { display:block; border: thin solid blue; }
The JavaScript:
function MainNavMenu() { document.getElementById("MainNavDropdown" ).
+classList.toggle("show"); }
function NodeletsMenu() { document.getElementById("NodeletsDropdown").
+classList.toggle("show"); }
function ShowNodelet(nid) { document.getElementById(nid).classList.tog
+gle("show"); }
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content"
+);
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
|