{"id":1053,"date":"2019-02-11T12:25:45","date_gmt":"2019-02-11T06:55:45","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=1053"},"modified":"2019-02-11T12:28:42","modified_gmt":"2019-02-11T06:58:42","slug":"two-methods-full-screen-overlay-navigation","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/two-methods-full-screen-overlay-navigation\/","title":{"rendered":"Two Methods of Full Screen Overlay Navigation"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p style=\"text-align: left;\">Using JavaScript and CSS properties we can create stylish fullscreen overlay navigation with a hamburger toggle button. This navigation menu will appear when toggled. Besides, the overlay covers the whole screen and makes lots of space for menu items. Similarly, there are several ways to create this type of navigation. In this blog, I am showing two different types of<br \/>\nfullscreen overlay navigation:<\/p>\n<p style=\"text-align: left;\">1) <em>The overlay navigation menu from left to right\u00a0<\/em>and<br \/>\n2) <em>The overlay navigation menu downwards from the top<\/em>.<\/p>\n<p>&nbsp;<\/p>\n<h5 style=\"text-align: center;\"><strong>Let&#8217;s start with the following structure:<\/strong><\/h5>\n<p>&nbsp;<\/p>\n<h5><em>\u00a0 \u00a0<strong> 1)\u00a0 From left to right<\/strong><\/em><strong><em>\u00a0<\/em><\/strong><\/h5>\n<p>&nbsp;<\/p>\n<h6><strong>\u00a0 \u00a0 \u00a0\u00a0<\/strong><strong style=\"font-size: 1rem;\">HTML<\/strong><strong style=\"font-size: 1rem;\"><\/strong><strong>\u00a0<\/strong><\/h6>\n<p>&nbsp;<\/p>\n<pre>    &lt;!-- The overlay --&gt;\r\n   \r\n  &lt;div id=\"myNavigation\" class=\"overlay\"&gt;\r\n   &lt;!--To close the overlay navigation --&gt;\r\n   &lt;a href=\"javascript:void(0)\" class=\"closebtn\" onclick=\"closeNav()\"&gt;&amp;times;&lt;\/a&gt;\r\n\r\n   &lt;div class=\"overlay-content\"&gt;\r\n    &lt;a href=\"#\"&gt;About&lt;\/a&gt;\r\n    &lt;a href=\"#\"&gt;Services&lt;\/a&gt;\r\n    &lt;a href=\"#\"&gt;Portfolio&lt;\/a&gt;\r\n    &lt;a href=\"#\"&gt;Contact&lt;\/a&gt;\r\n   &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;!-- To open\/show the overlay navigation menu --&gt;\r\n   &lt;span style=\"font-size:30px;cursor:pointer\" onclick=\"openNav()\"&gt;\u2630 &lt;\/span&gt;\r\n<\/pre>\n<h6><strong style=\"font-size: 1rem;\"><\/strong><strong>\u00a0 \u00a0 \u00a0 \u00a0 CSS<\/strong><\/h6>\n<p>&nbsp;<\/p>\n<pre>    \/* The Overlay (background) *\/\r\n    .overlay {\r\n     height: 100%;\r\n     width: 0;\r\n     position: fixed;\r\n     z-index: 1; \r\n     left: 0;\r\n     top: 0;     \r\n     background-color:rgb(159, 183, 212);\r\n     overflow-x: hidden; \/* Disable horizontal scroll *\/\r\n     transition: 0.5s;\r\n    }\r\n\r\n  \/* Position the content inside the overlay *\/\r\n   .overlay-content {\r\n     position: relative;\r\n     top: 25%;\r\n     width: 100%;\r\n     text-align: center;\r\n     margin-top: 30px;\r\n    }\r\n\r\n     \/* The navigation links inside the overlay *\/\r\n   .overlay a {\r\n     padding: 8px;\r\n     text-decoration: none;\r\n     font-size: 36px;\r\n     color: #fff;\r\n     display: block;\r\n     transition: 0.3s;\r\n    }\r\n\r\n    \/* When mouse over the navigation links, change their color *\/\r\n   .overlay a:hover, .overlay a:focus {\r\n     color: #000;\r\n    }\r\n\r\n   \/* Position the close button (top right corner) *\/\r\n   .overlay .closebtn {\r\n     position: absolute;\r\n     top: 20px;\r\n     right: 45px;\r\n     font-size: 60px;\r\n    }\r\n\r\n\r\n<strong>   JAVASCRIPT<\/strong>\r\n\r\n    function openNav() {\r\n     document.getElementById(\"myNav\").style.width = \"100%\";\r\n    }\r\n\r\n   \/* Close when someone clicks on the \"x\" symbol inside the overlay *\/\r\n   function closeNav() {\r\n    document.getElementById(\"myNav\").style.width = \"0%\";\r\n   }\r\n\r\n<\/pre>\n<h5><strong><em>\u00a0 \u00a02) Downwards from the top<\/em><\/strong><\/h5>\n<p>&nbsp;<\/p>\n<pre>         Here CSS is little bit different from the one above. Default width is now 100% and height is 0 and overflow-y is hidden.\r\n<\/pre>\n<h6><strong style=\"font-size: 1rem;\"><\/strong><strong>\u00a0 \u00a0 \u00a0 \u00a0CSS<\/strong><\/h6>\n<pre>   .overlay {  \r\n    height: 0;\r\n    width: 100%;\r\n    position: fixed;\r\n    z-index: 1;\r\n    left: 0;\r\n    top: 0;\r\n    background-color:rgb(159, 183, 212);\r\n    overflow-y hidden;\r\n    transition: 0.5s;\r\n   }\r\n<strong>\r\n   JAVASCRIPT\r\n<\/strong>\r\n    function openNav() {\r\n     document.getElementById(\"myNav\").style.height = \"100%\";\r\n    }\r\n\r\n    function closeNav() {\r\n     document.getElementById(\"myNav\").style.height = \"0%\";\r\n    }<\/pre>\n<p>This is one of the simplest ways of Overlay Navigation. I&#8217;ll show more design on this type of navigation menu shortly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Using JavaScript and CSS properties we can create stylish fullscreen overlay navigation with a hamburger toggle button. This navigation menu will appear when toggled. Besides, the overlay covers the whole screen and makes lots of space for menu items. Similarly, there are several ways to create this type of navigation. In this blog, I [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":1081,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[72,5],"tags":[90,73],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v14.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Two Methods of Full Screen Overlay Navigation<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/two-methods-full-screen-overlay-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Two Methods of Full Screen Overlay Navigation\" \/>\n<meta property=\"og:description\" content=\"&nbsp; Using JavaScript and CSS properties we can create stylish fullscreen overlay navigation with a hamburger toggle button. This navigation menu will appear when toggled. Besides, the overlay covers the whole screen and makes lots of space for menu items. Similarly, there are several ways to create this type of navigation. In this blog, I [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/two-methods-full-screen-overlay-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-11T06:55:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-11T06:58:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/01\/Screenshot-from-2019-01-29-15-25-26.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1628\" \/>\n\t<meta property=\"og:image:height\" content=\"759\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/two-methods-full-screen-overlay-navigation\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/01\/Screenshot-from-2019-01-29-15-25-26.png\",\"width\":1628,\"height\":759},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/two-methods-full-screen-overlay-navigation\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/two-methods-full-screen-overlay-navigation\/\",\"name\":\"Two Methods of Full Screen Overlay Navigation\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/two-methods-full-screen-overlay-navigation\/#primaryimage\"},\"datePublished\":\"2019-02-11T06:55:45+00:00\",\"dateModified\":\"2019-02-11T06:58:42+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/two-methods-full-screen-overlay-navigation\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\",\"name\":\"Munmun Das\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/033db0a0941d27e1e3e3bdc05f2e1189?s=96&r=g\",\"caption\":\"Munmun Das\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1053"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=1053"}],"version-history":[{"count":28,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1053\/revisions"}],"predecessor-version":[{"id":1138,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1053\/revisions\/1138"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/1081"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=1053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=1053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=1053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}