Full Screen Modal Nav Using Pure HTML and CSS

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.