Vertical menu for a site in the form of an accordion on jQuery

The menu is known to be an integral part of the site. Interesting navigation of the Internet resource is able to interest visitors. In addition, an important property of any menu is its compactness. A simple vertical menu is easily created using HTML and CSS. But we'll go further: learn how to create an accordion menu with jQuery.

Create a menu-"accordion"

What is a vertical menu in the form of an accordion? This is such a drop-down list that creates convenient navigation and gives a stylish look to the site. The menu, executed in this form, allows you to include many sub-items. Access to them occurs when you click on the desired item. Someone will say that you can make a simple menu in this style without using jQuery. Yes it is. But such an object will not be very convenient for owners of tablets or smartphones. Let's create a vertical menu, attractive for everyone. Then, by changing the color styling of such navigation, it will be possible to customize the design for any site.

HTML Code

So, to create our vertical menu, you first need to type the HTML code, which will contain the following lines:

Save this code in a file called Accord_menu.html.

As you can see, we created an unordered list. It consists of 3 main points:

- Photo;

- films;

- books.

Each item has several sub-items. Where there are #, you will need to add links. Now it's important to describe the styles. It all depends on what your Internet resource looks like. The vertical menu for the site should harmoniously fit into its design.

CSS

With styles, you should not have any difficulties. We only note that in this example a gradient fill is used. Here's how the CSS looks:

The CSS file specifies the color, size, the markers are removed to the left of the list items. It is determined how each point and sub-menu will behave when you hover over it. For example:

# E1fee2 is a light-green color of the sub - points.

# C4f0f7 is a subtle hue of sub-points when you hover over them.

The display property is set to block to adjust the necessary indents and sizes. Color, size, font type, location - all this also describe in the CSS file. Name it, for example, accordionmenu_my1.css.

Connecting jQuery for menu improvements

As you remember, our goal is to create a vertical jQuery menu. If you are new to this technology, do not be discouraged. Use the Google repository and connect the jQuery script. This will make the menu more attractive. JQuery is a JavaScript library based on the interaction of hypertext markup HTML and JavaScript. JQuery allows you to access the contents and attributes of elements.

So, we connect the necessary script in the body of the HTML-file and set the rules for storing 2 variables, excluding jumps of elements. We make the code that closes the other tabs when you open the one by which the mouse click. Here's how it looks:

Save all changes, look at how the menu looks in the browser. Here is the overall result of the work: As a result, we will have an attractive menu, which can always be changed depending on your preferences. And by acquiring new knowledge in the field of jQuery, CSS, you will create unique elements of the site, improving your practical skills.