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

This is an example of a full-screen menu layout with a toggle button, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The fonts are imported to the code with its URL, whereas the JavaScript functions have been used to implement the toggle function of the navigation button. 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 colors used and the button heights are predefined as variables. The body of the form is given a background color of #F5F5F5, and a font style as 'Roboto', sans-serif. The navigation button container has the styles of top as 5%, right as 2%, height as 27px, width as 35px, cursor as pointer to get the hand cursor effect in a hover event, and transition as opacity .25s ease. The button changes its opacity value to .7, in a hover event. The text link is given a font color of #FF5252, and a font-size of 20px. The navigation child elements are given a font color of #FFF, to appear in when the navigation button is clicked. Source: https://codepen.io/PaulVanO/pen/XJYGNQ

This is an example of a radial pop-out navigation, designed using HTML, CSS, JavaScript and Bootstrap framework 4. The font styles and icons are imported to the code with their URLs. The navigation icon expanding functions are implemented using JavaScript functions. The navigation icons are given the styles of position as absolute, left as 43%, top as 33%, width and height as 7rem, line-height as 7rem, border-radius as 50% to get the circular shape, transition as .3s, and background as #f00, which turns its background color to #333, in a hover event. The cursor style for the icons is set as pointer to get the hand cursor effect in a hover event, whereas the background color switches to #000 when the icon is clicked. The child elements of the navigation icon are given the styles of width and height as 5rem, border-radius as 50%, background as red, text-align as center, line-height as 1.5, color as #fff, font-size as 4rem, text-align as center, left and top as 1rem, and transition as .4s, which changes its background color to #000, in a hover event. Source: https://codepen.io/dudleystorey/pen/emVqYR

This is an example of a web layout with a sticky slider navigation bar, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. Media quarries are used to make the form responsive, whereas the JavaScript functions are used to implement the functionality of the navigation bar. The body of the form is given a font-family as "Century Gothic", 'Lato', sans-serif. The title of the form has the styles of font-size as 2rem, and letter-spacing as 1rem, whereas the subtitle has the styles of font-size as 1rem, letter-spacing as 0.3rem, and opacity as 0.6. The navigation bar has the styles of display as flex, justify-content as center, align-items as center, flex as 1, color as #000, letter-spacing as 0.1rem, transition as all 0.5s ease, and font-size as 0.8rem. In a hover event, the navigation bar items take the styles of font color as white, background as rgba(102,177,241,0.8), and transition as all 0.5s ease, in a hover event. Source: https://codepen.io/ettrics/pen/WRbGRN

This is an example of a draggable toggle menu, designed using HTML, CSS, JavaScript and Bootstrap framework 4. The font is imported to the code with the URL, whereas the JavaScript functions have been used to implement the expanding and dragging functions of the menu button. The body of the form is given the styles of background-color as #222222, color as white, font-family as 'Open Sans', sans-serif, and font-size as 12px. The menu icon is given the styles of position as absolute, width and top as 40px, background-color as white, border-radius as 50% to get the circle shape, cursor as pointer to get the hand cursor effect in a hover event, text-align as center, and line-height as 40px. The list items of the menu have the styles of font-size as 0.6 * 40px, and color as #222222. The menu is given four child elements, which are given the background colors of #FF5C5C, #5CD1FF, #FFF15C, and #64F592, respectively. Source: https://codepen.io/andyNroses/pen/AXwPkb

This is an example of a mobile menu, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The icons are imported to the code with their URLs. The JavaScript functions have been used to implement the clicking functions of the menu. The colors in the form, are predefined as $bg: #F0EDFD, $main: #7B49DD, and $white: #FFFFFF. The body of the form is given the styles of display as flex, justify-content as center, align-items as center, width as 100%, height as 100vh, font-family as 'Poppins', sans-serif, font-size as 11px, letter-spacing as 1px, background as $bg, and color as $white. The menu items are given the styles of display as flex, flex-direction as column, justify-content as center, align-items as center, position as relative, width and height as 140px, cursor as pointer to get the hand cursor effect, background as transparent, and transition as 150ms. In a hover event, the menu items take an animation of icon .1s 4. Source: https://codepen.io/ricardoolivaalonso/pen/JjjjJOX

This is an example of a navigation menu with animations, designed using HTML, CSS, JavaScript, 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, whereas JavaScript functions are used to implement the expanding function of the menu. The fonts and background images are imported to the code with the URL. Media quarries are used to make the form responsive. The body of the form is given the styles of font-family as "Barlow", sans-serif, and background-color as #f1f3f7. The menu icon has the styles of width and height as30px, and cursor style as pointer to get the hand cursor effect in a hover event. The four child elements of the menu is given four different background colors as #2d3561, #c05c7e, #f3826f, and #ffb961. The menu items have the styles of font color as white, text-transform as uppercase to automatically convert the text to uppercase, font-weight as 800, font-size as 40px, opacity as 0.3, and a transform style as rotate(-90deg). Source: https://codepen.io/rafaelavlucas/pen/JjPGNdq

This is an example of a collapsible menu layout, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. JavaScript has been used to implement the expanding function of the menu. The fonts are imported to the code with the URL. 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 the styles of color as #444246, background as linear-gradient(to bottom, #dd879f 0%,#4e337e 100%), font-family as 'Open Sans', sans-serif, and padding as 10% 0 0 40%. The text is given a text-transform style as uppercase to automatically convert the text to uppercase, and also the cursor style as pointer to get the hand cursor effect in a hover event. The menu list items are given the styles of display as block, min-height as 48px, font-weight as bold, font-size as 0.76em, position as relative, and border-bottom as 1px solid rgba(255,255,255,0.1), which takes the background color of #3ed8b5, in a hover event. Source: https://codepen.io/chrisota/pen/hkAFm