Close

Full screen Menu

This is an example of a full-screen menu layout with a toggle button, designed using HTML, CSS, and Bootstrap framework 4. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the menu items in an orderly manner. The body of the form is given a linear gradient color of linear-gradient (SlateBlue, RoyalBlue ), whereas the toggle button has the styles of position as absolute, top and right as 15px, border-radius as 3px, and cursor as pointer to get the hand cursor effect in a hover event. The toggle button takes a transform effect of rotate(225deg) when it's checked. The menu container has the styles of display as table to display the items in a table order, width as 100%, height as s('calc(100% /'+$btnscount+')'), border-bottom as 1px solid rgba(white, .3), background as rgba(white, .15), perspective as 0px, transform as rotateX(-90deg) scale(.5), and transition as all .3s ease .1s. The menu items are given the styles of display as table-cell, vertical-align as middle, text-align as center, font-size as 2.5em, letter-spacing as .2em, color as white, text-shadow as 0 0 3px rgba(black, .3), font-family as 'Helvetica', sans-serif, and font-weight as 100. The menu items change their background to rgba(white, .1), in a hover event. Source: https://codepen.io/shakdaniel/pen/raWBOb

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.