Beefy Boxes and Bandwidth Generously Provided by pair Networks
Perl Monk, Perl Meditation
 
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 cooling their heels in the Monastery: (3)
As of 2025-03-24 14:02 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    When you first encountered Perl, which feature amazed you the most?










    Results (64 votes). Check out past polls.

    Notices?
    erzuuliAnonymous Monks are no longer allowed to use Super Search, due to an excessive use of this resource by robots.