The menu, as you know, is an integral part of the site. An interesting navigation of the Internet resource is able to interest visitors. In addition, an important feature of any menu is its compactness. A simple vertical menu is easily created using HTML and CSS. But we will go further: learn to create an accordion menu using jQuery.
Create an Accordion Menu
What is a vertical accordion menu? This is such a drop-down list that creates convenient navigation and makes the site stylish. The menu, made in this form, allows you to include many subitems. Access to them occurs when you click on the desired element. 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 that appeals to everyone. Then, changing the color stylization of such navigation, it will be possible to fine-tune the design for any site.
HTML code
So, to create our vertical menu, you first need to type 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:
- Photo;
- movies;
- 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 how your online resource looks. The vertical menu for the site should harmoniously fit into its design.
CSS code
With styles you should have no difficulties. We only note that in this example, gradient fill is used. Here's what the CSS looks like:
The CSS-file sets the color, size, removes markers to the left of the list items. It is determined how each item and sub-menu will behave when you hover over it. For example:
# e1fee2 - this is the light green color of the subitems.
# c4f0f7 –blue hue of sub items when you hover over them.
Set the display property to block to adjust the indentation and size needed. Color, size, font type, layout - all this also describe in the CSS file. Name it, for example, accordionmenu_my1.css.
JQuery connection for menu enhancement
As you recall, our goal is to create a vertical jQuery menu. If you are new to this technology, don't be discouraged. We’ll use the Google repository and include the jQuery script. This will make the menu more attractive. jQuery is a JavaScript library based on the interaction of HTML hypertext markup and JavaScript. jQuery allows you to access the content 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 enter the code that closes the remaining tabs when opening the one that the mouse clicks on. Here's how it all looks:
Save all the changes, see how the menu looks in the browser. Here is the overall result of the work:
As a result, we will have an attractive menu that can always be redone depending on your preferences. And acquiring new knowledge in the field of jQuery, CSS, you will create unique elements of the site, improving your practical skills.