This is an example of a menu-bar with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The font style is imported to the code with its URL. The colors and transition values used in the form are predefined as $page-background: #303f9f, $nav-background: white, $color: rgba(black, .87), and $transition: .75s. The body of the form is given the styles of font as 100% Roboto, background as $page-background, and margin as 50px. The navigation icon is given the styles of width as 300px, background as $nav-background, color as $color, clip-path as circle(24px at 32px 24px), and transition as clip-path $transition/2. The navigation icon list-items are given the styles of display as block, line-height as 50px, padding as 0 20px, and color as inherit. In a hover event, the navigation icon expands to display the menu-bar, which takes the background color of #ffe082 in a hover event, and #ffca28 in the active mode. Source: https://codepen.io/bennettfeely/pen/fHdFb