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.
HTML Code
So, in order to create our vertical menu, we first need to type in the HTML code that will contain the following lines:
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:
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:
Save all changes, see what the menu looks like in the browser. Here is the overall result of the work:
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.
