<\/p>\n
<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”3.27.3″ _i=”1″ _address=”0.1″][et_pb_column type=”4_4″ _builder_version=”3.27.3″ _i=”0″ _address=”0.1.0″][et_pb_video src=”https:\/\/youtu.be\/IlWqo7HhR34?rel=0″ _builder_version=”3.27.3″ _i=”0″ _address=”0.1.0.0″][\/et_pb_video][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”3.27.3″ fb_built=”1″ _i=”1″ _address=”1″][et_pb_row _builder_version=”3.27.3″ _i=”0″ _address=”1.0″][et_pb_column type=”4_4″ _builder_version=”3.27.3″ _i=”0″ _address=”1.0.0″][et_pb_text _builder_version=”3.27.4″ _i=”0″ _address=”1.0.0.0″]<\/p>\n
The Finished Code<\/h2>\nFile Structure<\/h3>\n
Just so you can follow along a bit easier this is the file structure I used<\/p>\n
<\/p>\n
![\"file](\"https:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2019\/08\/file-structure-420x293.jpg\")
<\/p>\n
HTML Code<\/h3>\n
There isn’t much to say about this. It is a index.php and a nav.php, pretty standard.<\/p>\n
index.php<\/h4>\n
[\/et_pb_text][et_pb_text admin_label=”CodeBlock” module_class=”codeblock” _builder_version=”3.29.3″ text_font=”||||||||” text_font_size=”14px” hover_enabled=”0″ _i=”1″ _address=”1.0.0.1″]<\/p>\n
\n<html>\n<head>\n\t<title>Responsive Navigation<\/title>\t\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\">\t\n\t<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.4\/jquery.min.js\"><\/script>\n\t<script src=\"js\/navScript.js\"><\/script>\t\n<\/head>\n<body>\n\t<nav>\n\t\t<?php include 'nav.php' ; ?>\n\t<\/nav>\n\t<div class=\"spacer\"><\/div>\n\t\t<h1>Responsive Navigation<\/h1>\t\n\t<section>\n\tLorem ipsum dolor sit amet, consectetur adipiscing elit,\n\tJust put a bunch of fake text in here\n\t<\/section>\n<\/body>\n<\/html>\n<\/pre>\n[\/et_pb_text][et_pb_text _builder_version=”3.27.4″ _i=”2″ _address=”1.0.0.2″]<\/p>\n
nav.php<\/h4>\n
[\/et_pb_text][et_pb_text admin_label=”CodeBlock” module_class=”codeblock” _builder_version=”3.27.4″ text_font=”||||||||” text_font_size=”14px” _i=”3″ _address=”1.0.0.3″]<\/p>\n
\n<ul>\n\t<li id=\"mobile-open\"><button>MENU<\/button><\/li>\n\t<li><a href=\"index.php\">Home<\/a><\/li>\n\t<li><a href=\"page1.php\">Page 1<\/a>\n\t\t<ul>\n\t\t\t<li><a href=\"page1a.php\">Page 1a<\/a><\/li>\n\t\t<\/ul>\n\t<\/li>\n\t<li><a href=\"#\">Page 2<\/a><\/li>\n\t<li><a href=\"#\">Page 3<\/a><\/li>\n\t<li><a href=\"#\">Page 4<\/a><\/li>\n\t<li id=\"mobile-close\"><button>Close Menu<\/button><\/li>\n\t\n<\/ul>\n<\/pre>\n[\/et_pb_text][et_pb_text _builder_version=”3.27.4″ _i=”4″ _address=”1.0.0.4″]<\/p>\n
CSS stylesheet<\/h3>\n
[\/et_pb_text][et_pb_text admin_label=”CodeBlock” module_class=”codeblock” _builder_version=”3.29.3″ text_font=”||||||||” text_font_size=”14px” _i=”5″ _address=”1.0.0.5″]<\/p>\n
*{box-sizing:border-box}\n\n\nbody{margin:0; padding:0; font-family:'Arial',san-serif; font-size:1vw; color:#000000;} \n\n\nnav{position:fixed; background:linear-gradient(#000, #666);
color:#fff; width:100%; margin:0; padding:0; z-index:+500;}
\nnav ul{list-style:none; text-align:center; margin:0; padding:0}\nnav ul li{display:inline-block; padding:1.15vw 1vw; margin:0}\nnav ul li a{color:#fff; text-decoration:none; padding:1em 2px; }\nnav ul li:hover{background:#666}\n#mobile-open, #mobile-close{display:none}\nnav > ul > li.active{background:#000;}\nnav ul li ul{position:absolute; top:4vw; }\nnav ul li ul li{display:none; background:#333; border-bottom:solid 2px #ccc}\nnav ul li ul li:hover{background:#999}\n\n.spacer{height:5vw; width:100%}\n\n\nsection{width:33%; display:block; margin: 20px auto; }\n\n\n@media only screen and (max-width:800px){\n\tbody{font-size:16px; }\n\tnav ul li{margin:0; padding:15px 0; bottom-border:1px solid #ccc; width:100%}\n\tnav ul li{display:none}\n\tnav ul{background: #333}\n\t#mobile-open{display:block; }\n\t\n}\n\n<\/pre>\n[\/et_pb_text][et_pb_text _builder_version=”3.27.4″ _i=”6″ _address=”1.0.0.6″]<\/p>\n
jQuery Script<\/h3>\n
I probably didn’t need the $(document).ready()<\/strong> on each one of these scripts, just the first one.<\/p>\n
[\/et_pb_text][et_pb_text admin_label=”CodeBlock” module_class=”codeblock” _builder_version=”3.27.4″ text_font=”||||||||” text_font_size=”14px” _i=”7″ _address=”1.0.0.7″]<\/p>\n
\n$(document).ready(function(){\n\tvar pgurl =window.location.href.substr(window.location.href.lastIndexOf(\"\/\")+1);\n\t\n\t$(\"nav ul li a\").each(function(){\n\t\tif($(this).attr(\"href\") == pgurl || $(this).attr(\"href\") == ''){\n\t\t\t$(this).parent().addClass(\"active\");\n\t\t}\n\t})\n});\n\n$(document).ready(function(){\n\t$(\"#mobile-open\").click(function(){\n\t\t$(\"nav ul li\").css(\"display\",\"block\");\n\t});\n\t$(\"#mobile-close\").click(function(){\n\t\t$(\"#mobile-open\").siblings().css(\"display\",\"none\")\n\t});\n});\n\n$(document).ready(function(){\n var x = (window.innerWidth);\n\tif(x > 800){\n\t\t$(\"nav ul li\").hover(\n\t\t\tfunction(){\n\t\t\t\t$(this).find(\"ul li\").css(\"display\",\"block\");\n\t\t\t},\n\t\t\tfunction(){\n\t\t\t\t$(this).find(\"ul li\").css(\"display\",\"none\");\n\t\t\t}\n\t\t)\n\t}\n});\n\n<\/pre>\n[\/et_pb_text][et_pb_text _builder_version=”3.27.4″ _i=”8″ _address=”1.0.0.8″]<\/p>\n
That’s it folks, pretty simple. hope this helped you out.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
How To Code a Responsive Navigation What this post is about This post is about creating responsive navigation for any website using HTML, CSS and a bit of javaScript. In the end, there will only be 30 lines of jQuery to make it all work. Below there is a video that you can follow […]<\/p>\n","protected":false},"author":1,"featured_media":1484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[20],"tags":[],"class_list":["post-1481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design"],"_links":{"self":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts\/1481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/comments?post=1481"}],"version-history":[{"count":26,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts\/1481\/revisions"}],"predecessor-version":[{"id":1611,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts\/1481\/revisions\/1611"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/media\/1484"}],"wp:attachment":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/media?parent=1481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/categories?post=1481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/tags?post=1481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}