Close

Animated Menu Indicator

This is an example of an animated menu indicator, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The background image and fonts are imported to the code with their URLs. Media queries are used to increase the responsiveness of the form, whereas JavaScript functions have been used to implement the active color of the indicator. The body of the form is given the styles of text-align as center, display as flex, height as 100vh, width as 100%, justify-content as center, align-items as center, and padding as 0 20px. The navigation wrapper is given the styles of display as inline-flex, background-color as #fff, border-radius as 40px, and box-shadow as 0 10px 40px rgba(159, 162, 177, .8), whereas the child elements of the navigation bar is given the styles of color as #83818c, padding as 20px, transition as .3s, margin as 0 6px, font-family as 'DM Sans', sans-serif, and font-weight as 500. The five child elements take five different font colors and a border-bottom effect, in the active mode. The child elements also take the font color of #333, in a hover effect. Source: https://codepen.io/knyttneve/pen/LKrGBy

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 *

Several Related Snippets

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