Last Updated:

Create a stylish hidden menu in jQuery


The site menu is an integral part of navigation for a site, but navigation takes up a significant area of site design. In this lesson we will consider the menu of the site in the style of minimalism, which consists of small icons, the idea of this menu is that when you hover the cursor, other links hidden behind the icon, or even a search form, will open, or it is better to say to leave. The speed of the animation and the length of the menu can be changed to your discretion Nothing complicated in the menu is not, everything is as always 3 steps:

HTML frame menu CSS file with design and JavaScript code.


Let's start with the HTML markup.

Our entire menu is in the container <div class="menu"></div>. We insert each icon with all its internal content into the container <div class="item"></ div> and already in it you place other internal links, or a search form.



Step 2: CSS code

Write the design for the .menu class set the height of the menu width, font and font size, indentation, etc.:



We write the design for the .item class this is an internal menu, it is hidden behind the icon:



Here you specify the path to each of our icons and prescribe their design:



All other menu items are formatted as follows:


Step 3: JavaScript

As always, the first step is to include the jQuery framework and our JavaScript files between the <head> </head> tag, which do all the work:


And we insert JavaScript code on the site between the <body> </ body> tag, which activates all the effects of our animation: