<!DOCTYPE html> <html lang="en"> <head> <title>CSS only Demo Responsive</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" media="all"> <link rel="stylesheet" href="main.css" media="all" type="text/css"> <link rel="stylesheet" href="responsive.css" media="all" type="text/css"> <script src="responsive.1.0.js" type="text/javascript"></script> </head> <body> <div id="container"> <header> <label for="show-menu" onclick="displayMenu()" class="show-menu" id="showMenu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="index.html">Home</a></li> <li><a href="javascript:void(0)">About</a> <ul class="hidden"> <li><a href="javascript:void(0)">Who We Are</a></li> <li><a href="javascript:void(0)">What We Do</a></li> </ul> </li> <li><a href="javascript:void(0)">Portfolio</a> <ul class="hidden"> <li><a href="javascript:void(0)">Photography</a></li> <li><a href="javascript:void(0)">Web & User Interface Design</a></li> <li><a href="javascript:void(0)">Illustration</a></li> </ul> </li> <li><a href="javascript:void(0)">News</a></li> <li><a href="contact.html">Contact</a></li> </ul> </header> </div> <script src="jquery-2.1.3.js" type="text/javascript"></script> <script type="text/javascript"> function displayMenu(){ document.getElementById("showMenu").innerHTML; } </script> </body> </html>
#container { display: block; width: 100%; margin: 1.09123432523124534% auto; } header{ display: block; padding-bottom: 50px; } ul { list-style-type: none; margin: 0; padding: 0; position: absolute; } li { display: inline-block; float: left; margin-right: 0.0625em; } li a { display: block; min-width: 8.75em; height: 3.125em; text-align: center; line-height: 3.125em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } li:hover a { background: #19c589; } li:hover ul a { background: #f3f3f3; color: #2f3036; height: 2.5em; line-height: 2.5em; } li:hover ul a:hover { background: #19c589; color: #fff; } li ul { display: none; } li ul li { display: block; float: none; } li ul li a { width: auto; min-width: 6.25em; padding: 0 1.25em; } ul li a:hover + .hidden, .hidden:hover { display: block; } .show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #19c589; text-align: center; padding: 0.625em; display: none; } input[type=checkbox]{ display: none; } input[type=checkbox]:checked~#menu { display: block; }
@media screen and (max-width:768px){ header{ padding-bottom: 0; } ul { position: static; display: none; } li { margin-bottom: 0.0625em; } ul li, li a { width: 100%; } .show-menu { display: block; } }
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.