Last Updated:

How to create a beautiful menu for your website

The menu for the site is perhaps the most important part in the structure of any site, and a beautiful menu allows you to navigate the site while pleasing the eyes of visitors to the resource. In today's tutorial we will tell you how to make a beautiful menu, with simple animations and some effects using CSS3 technologies. Undoubtedly, the features of CSS3 (transformations and animations) allow you to give the design of the project a more refined look. Here's what we get out of it..

You can find a lot of interesting materials for yourself, as well as free templates and not only from our partners below, try and do not miss interesting offers:

Recently, we published a post on how to create such a menu, but without various effects.

The structure of the HTML code for the menu is used as standard for such cases:

As you can see, the markup is not complicated, in it we use a simple class li. The next step is to create CSS styles, perform a reset on the ul element:

 

The #menu item is the main one for our menu. Gradients, shadows and rounded corners will help us create the following design for it:

 

Turn off the wrapping:

 

Now let's formalize the list items:

 

Note the #menu selector li:hover > a . It works as follows: select the "a" element, which is a child of the "li" element; the element "li" must have an ancestor "#menu".

 

 

With CSS3 transformations, we can animate changes to CSS properties such as margin or opacity. Let's take advantage of this opportunity to design a spectacular appearance of submenus:

 

Now let's deal with the first and last item in the list of submenus:

 

Now jQuery. IE6 requires additional steps:

 

 

If you want to quickly start working on your future site, then you may need Russified ready-made templates. By the way, a new category of templates has appeared on the TemplateMonster marketplace, which will be replenished with more and more new solutions. In it you will find dozens of HTML templates in multiple language, which are designed for various business niches and topics. All of them will please you with an excellent visual editor that will save a lot of time on personalizing an online project. You should also be pleased with the excellent images that are included in the template data package.