Close

Full-Screen Menu

This is an example of a full-screen burger style menu layout, designed using HTML, CSS, JavaScript and Bootstrap framework 4. The fonts are imported to the code with its URL. JavaScript functions have been used to implement the expanding function of the burger icon. The body of the form is given the styles of height as 100%, background-color as #333, font-family as 'Quicksand', sans-serif, and color as white. The burger icon has the styles of height as 6px, width as 30px, border-radius as 15px, and background-color as rgba(255, 255, 255, 0.95). The bars in the icons get the transform styles of rotate (45deg) and rotate (-45deg) to make the letter “X”. The heading of the form is given a font-size of 3em, whereas the content is given the styles of line-height as 160%, and letter-spacing as 1px. The menu list items are given the cursor style as pointer to get the hand cursor effect in a hover event. The menu items take the styles of background-color as rgba(white, .8), transition as all .15s, letter-spacing as 2px, color as #333, and border as 1px solid rgba(255, 255, 255, .15), in a hover event. Source: https://codepen.io/pwsm50/pen/KHDEI

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.