Close

Vertical Magic Line

This is an example of a vertical magicline style navigation bar, designed using HTML, CSS, JavaScript and Bootstrap framework 4. The HTML version used here is Haml, whereas the JavaScript functions have been used to implement the magicline bar function on the navigation bar. The colors used in the form are predefined as $bg: #17B794, and $color: #22267B. The body of the form is given the styles of color as #fff, font-family as 'Cairo', sans-serif, and line-height as 1.25, whereas the background color of the form is set as radial-gradient(ellipse farthest-corner at center top, $bg, shade($bg, 60%)). The menu wrapper has the styles of position as relative, box-shadow as 0 .5em 2em rgba(black, 0.5), background as black, text-transform as uppercase to automatically convert the text to uppercase, text-align as center, display as inline-block, letter-spacing as .25em, and font-size as 1.5em. There are five child elements of the navigation bar, which are given a background color based on #22267B, which changes the percentage of its value accordingly, to give each child element a different shade of #22267B. The magicline has the styles of width as .5em, and box-shadow as 0 .5em 2em rgba(black, 0.5). Source: https://codepen.io/mican/pen/dNqPaZ

Post Comment or Questions

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

Your email address will not be published.

Several Related Snippets

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