Responsive Navigation with HTML/CSS

Submitted by: 
Language: 
Visitors have accessed this post 3022 times.

For the mark-up, create file and name it index.html.

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <title>CSS only Demo Responsive</title>
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1" media="all">
  8. <link rel="stylesheet" href="main.css" media="all" type="text/css">
  9. <link rel="stylesheet" href="responsive.css" media="all" type="text/css">
  10. <script src="responsive.1.0.js" type="text/javascript"></script>
  11. </head>
  12. <body>
  13. <div id="container">
  14. <header>
  15. <label for="show-menu" onclick="displayMenu()" class="show-menu" id="showMenu">Show Menu</label>
  16. <input type="checkbox" id="show-menu" role="button">
  17. <ul id="menu">
  18. <li><a href="index.html">Home</a></li>
  19. <li><a href="javascript:void(0)">About</a>
  20. <ul class="hidden">
  21. <li><a href="javascript:void(0)">Who We Are</a></li>
  22. <li><a href="javascript:void(0)">What We Do</a></li>
  23. </ul>
  24. </li>
  25. <li><a href="javascript:void(0)">Portfolio</a>
  26. <ul class="hidden">
  27. <li><a href="javascript:void(0)">Photography</a></li>
  28. <li><a href="javascript:void(0)">Web & User Interface Design</a></li>
  29. <li><a href="javascript:void(0)">Illustration</a></li>
  30. </ul>
  31. </li>
  32. <li><a href="javascript:void(0)">News</a></li>
  33. <li><a href="contact.html">Contact</a></li>
  34. </ul>
  35. </header>
  36. </div>
  37. <script src="jquery-2.1.3.js" type="text/javascript"></script>
  38. <script type="text/javascript">
  39. function displayMenu(){
  40. document.getElementById("showMenu").innerHTML;
  41. }
  42. </script>
  43. </body>
  44. </html>

Now we come to css, create a file and name it main.css.

  1. #container {
  2. display: block;
  3. width: 100%;
  4. margin: 1.09123432523124534% auto;
  5. }
  6. header{
  7. display: block;
  8. padding-bottom: 50px;
  9. }
  10. ul {
  11. list-style-type: none;
  12. margin: 0;
  13. padding: 0;
  14. position: absolute;
  15. }
  16. li {
  17. display: inline-block;
  18. float: left;
  19. margin-right: 0.0625em;
  20. }
  21. li a {
  22. display: block;
  23. min-width: 8.75em;
  24. height: 3.125em;
  25. text-align: center;
  26. line-height: 3.125em;
  27. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  28. color: #fff;
  29. background: #2f3036;
  30. text-decoration: none;
  31. }
  32. li:hover a {
  33. background: #19c589;
  34. }
  35. li:hover ul a {
  36. background: #f3f3f3;
  37. color: #2f3036;
  38. height: 2.5em;
  39. line-height: 2.5em;
  40. }
  41. li:hover ul a:hover {
  42. background: #19c589;
  43. color: #fff;
  44. }
  45. li ul {
  46. display: none;
  47. }
  48. li ul li {
  49. display: block;
  50. float: none;
  51. }
  52. li ul li a {
  53. width: auto;
  54. min-width: 6.25em;
  55. padding: 0 1.25em;
  56. }
  57. ul li a:hover + .hidden, .hidden:hover {
  58. display: block;
  59. }
  60. .show-menu {
  61. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  62. text-decoration: none;
  63. color: #fff;
  64. background: #19c589;
  65. text-align: center;
  66. padding: 0.625em;
  67. display: none;
  68. }
  69. input[type=checkbox]{
  70. display: none;
  71. }
  72. input[type=checkbox]:checked~#menu {
  73. display: block;
  74. }

For responsiveness create another css file and name it responsive.css or you can just copy this code to main.css.

  1. @media screen and (max-width:768px){
  2. header{
  3. padding-bottom: 0;
  4. }
  5. ul {
  6. position: static;
  7. display: none;
  8. }
  9. li {
  10. margin-bottom: 0.0625em;
  11. }
  12. ul li, li a {
  13. width: 100%;
  14. }
  15. .show-menu {
  16. display: block;
  17. }
  18. }


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.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.