Close

Radial Pop-Out Navigation

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

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.

Several Related Snippets

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