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

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

Menu, as you know, is an integral part of the site. An interesting navigation of an 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.

Creating an "accordion" menu

What is a vertical accordion menu? This is such a drop-down list that creates convenient navigation and gives style to the site. The menu, made in this form, allows you to include many sub-items. Access to them occurs when you click on the required element. Some 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 to use for owners of tablets or smartphones. Let's create a vertical menu that is attractive to everyone. Then, by changing the color styling of such navigation, it will be possible to adjust the design to any site.


So, in order to create our vertical menu, we first need to type in the HTML code that will contain the following lines:

Vertical menu
Vertical menu

Save this code in a file called Accord_menu.html.

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

- photos;

- movies;

- books.

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

CSS code

You shouldn't have any trouble with styles. We only note that in this example a gradient fill is used. This is what the CSS code looks like:

Vertical menu for the site
Vertical menu for the site

The CSS file sets the color, size, removes the markers to the left of the list items. Determines how each menu item and sub-item will behave when the cursor is hovered over it. For example:

e1fee2 is the light green color of the sub-items.

c4f0f7 – bluish tint of subitems when hovering over them.

Set the display property to block to control the necessary padding and size. Color, size, font type, location - all this is also described in the CSS file. Name it, for example, accordionmenu_my1.css.

Including jQuery to improve the menu

As you remember, our goal is to create a vertical jQuery menu. If you are new to this technology, don't be discouraged. Let's use the Google repository and connect the jQuery script. This will make the menu more attractive. jQuery Presentsis a JavaScript library based on the interplay of HTML and JavaScript hypertext markup. jQuery allows you to access the content and attributes of elements.

So, we include the necessary script in the body of the HTML file and set the rules for storing 2 variables, excluding element jumps. We introduce the code that closes the remaining tabs when the one that is clicked is opened. Here's what it all looks like:

jQuery vertical menu
jQuery vertical menu

Save all changes, see what the menu looks like in the browser. Here is the overall result of the work:

Vertical menu in the form of an accordion
Vertical menu in the form of an accordion

As a result, we will have an attractive menu, which can always be altered depending on your preferences. And by acquiring new knowledge in the field of jQuery, CSS, you will create unique website elements, improving your practical skills.

Popular topic

Editor's choice

  • The Psijic Order from The Elder Scrolls - who are they?
    The Psijic Order from The Elder Scrolls - who are they?

    The Psijics are the name of a mysterious and ancient Order from the Elder Scrolls game universe. Its members practice magic and are notorious for being at odds with the Thalmor. Even more interesting information about the Psijic Order can be found in today's guide

  • Three easy ways to turn off notifications in Viber
    Three easy ways to turn off notifications in Viber

    "Viber" today is one of the most popular and widespread instant messengers. Sometimes a situation arises that the sound of constantly incoming messages bothers or distracts a person from important matters. How to turn off notifications in Viber? The article presents three of the simplest and easiest ways to do this, and they will help you set the silent mode on both Android and iOS

  • How to advertise on Instagram yourself?
    How to advertise on Instagram yourself?

    One of the most effective methods of website promotion and business development at the moment is advertising on social networks. Social networks, where people actively communicate, are more willing to pay attention to useful posts, join groups, like posts and make reposts, are an almost inexhaustible source of traffic. A properly built advertising campaign will allow you to get new customers, keep the attention of existing ones and again win over those who were dissatisfied with the service

  • Google - what is it?
    Google - what is it?

    The article talks about the multidisciplinary corporation Google. Its services and the company's work as a device manufacturer are considered

  • How to remove a user from important friends on VKontakte: all ways
    How to remove a user from important friends on VKontakte: all ways

    Important friends of "VKontakte" are determined automatically. When friends, family, and a loved one appear first on the list, this is convenient. But relationships can change for various reasons, and the need to constantly see a person’s page may disappear. In this article, we will tell you how to remove from important VKontakte friends those users whom you do not want to see at the top of the list