Close

Accordion Navigation Menu

This is an example of a web form accordion menu, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The JavaScript library JQuery has been used to implement the accordion expand functions. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the child elements of the accordion in an orderly manner. The body of the form is given a style set of height as 100%, font-size as 20px, min-width as calc(300px + 1.5rem), line-height as 1.5, background-color as #333, font-family as "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, and color as rgba(255, 255, 255, .5). The title of the form is given the styles of font-weight as 700, font-size as 1.6rem, and color as white. The accordion child elements are given an opacity of 100ms ease-in-out, which changes to .5, in a hover event. The plus mark is given a font size of .6rem, and a transform style of translateY(-50%), which changes its icons to minus when it is expanded. The accordion items are set to reveal a sub-menu when they are expanded. Source: https://codepen.io/jamestalmond/pen/BpqrWo

Post Comment or Questions

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

Your email address will not be published.

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.