Close

Floatting Draggable Menu

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

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.