Beefy Boxes and Bandwidth Generously Provided by pair Networks
Think about Loose Coupling
 
PerlMonks  

mobile css and javascript

by jdporter (Paladin)
on Nov 09, 2016 at 17:59 UTC ( [id://1175616]=wonki: print w/replies, xml ) Need Help??

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'); } } } }
Log In?
Username:
Password:

What's my password?
Create A New User
Domain Nodelet?
Chatterbox?
and the web crawler heard nothing...

How do I use this?Last hourOther CB clients
Other Users?
Others romping around the Monastery: (7)
As of 2024-03-28 10:48 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    No recent polls found