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.
, . 3 :
- ;
- ;
- .
. #, . . , -. .
CSS-
. , . CSS-:
CSS- , , . , . :
#e1fee2 – - .
#c4f0f7 – .
display block, . , , , – CSS. , , accordionmenu_my1.css.
jQuery
, - jQuery. , . Google JQuery. . jQuery JavaScript, HTML JavaScript. jQuery .
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.