Full Screen Modal Nav Using Pure HTML and CSS

full-screen-modal-nav-using-pure-html-and-css.jpg

Basically, there is a button you will see at first. When you
will click on it a box will appear with full-screen size, the box
contains the nav. The nav has a sidebar a top bar, a blank field
with a search box. In the sidebar, there are nav items or links and
each item has its own image, when you click on any item the image
will change on the left blank field. At the top bar, there is a
text for showing the menu and a close button to close the popup
box. This program is also responsive, in small screen size the
sidebar will shift to the top and you have to scroll to see all
items.

The modal box nav can be a good practice of those peoples whos
step in web design and development. You can use this modal
full-screen nav on your website, after some changes like logo,
link, etc.

First I have created a main div named container and put all
elements inside it. For the modal button, I have created a checkbox
input and a label for it. And created an SVG shape for the cross
icon to close, also created radio input and labels for the nav
sidebar items. After that, I created a div list for image
placement, and search input for the search box. Many other divs and
elements also in the HTML file.

Download