How to place list items horizontally? Great overview of beautiful multi-level menus with codepen

1. Vertical bright jQuery menu 2. Cool effect. Dancing menu.

4. Dropdown list using jQuery

Excellent styling of the interface element in the form of a drop-down list.

When you hover the mouse over the button, a panel appears on top.

6. jQuery plugin “MobilyBlocks” for displaying a radial menu

7. Menu using sprites

Animated javascript menu with glow effect.

Fresh, nice menu using jQuery.

9. jQuery “GarageDoor” menu 10. jQuery vertical scroll menu

Implementation of a menu with a large number of items. Scrolls when you move the mouse cursor up or down.

11. jQuery drop-down list design

12. Page navigation plugin

Smooth scrolling to the desired section on the page. jQuery One Page Navigation plugin.

13. Plugin “Animated Content Menu”

New jQuery plugin. Excellent implementation of animated site navigation. When you go through menu items, a block with a description and possible links pops up, and depending on the selected item, the background of the page changes, which stretches to fill the entire screen regardless of the size of the browser window. Be sure to check out the demo page.

14. jQuery menu plugin “Sweet Menu”

Animated menu with pop-up items.

15. Fixed jQuery menu

When you scroll down the page, the menu remains fixed at the top of the screen.

16. Slider Kit Scrolling Menus

To implement a vertical menu with a large number of items. Scrolling through items is done using the mouse wheel, or using the “Previos” and “Next” links.

17. Stylish CSS3 menu

18. New CSS3 menu in Apple style

New menu in Apple style. It looks darker than before, but no less cute.

19. Original jQuery menu

Dropdown menu with background effect. Menu sub-items expand upward. When you hover over a menu item, the background image changes.

20. Animated menu with jQuery

Animated menu. Menu items are presented in the form of icons and descriptions. Several great effects when hovering the mouse over a menu item. There are 8 effects, to see them all - follow the links Exemple1-Exemple8 on the demo page.

21. “Scrolling menu” XML menu with scrolling

Vertical and horizontal scrolling menu. A good solution if there are a large number of items on the menu.

22. Context menu on a website using jQuery

A menu pops up when you right-click on a specific area.

23. Circular two-level menu for the site

When you select a menu item, submenu items are displayed on the right.

24. jQuery CSS3 menu with blur effect “Blur Menu” CSS3

The original jQuery CSS3 menu comes in 7 different styles. When you hover your mouse over one of the menu items, the rest seem to blur.

25. Some spectacular animated jQuery CSS3 menus

10 creative animated menus. Horizontal and vertical CSS3 menus with various effects and transitions.

The archive also includes the original menu PSD file.

27. MagicLine menu

The background or underline of a menu item follows the mouse with a slight delay, while the background smoothly changes its color as it moves from item to item. Very beautiful effect, looks unusual. Attention: the effect does not work in opera

28. Image Bubbles

An excellent effect when you hover your mouse over one of the images. The effect is somewhat reminiscent of jQDock described above.

31. Interesting jQuery menus with various effects

Horizontal, vertical menu. Interesting effects.

32. Great Apple-style jQuery menu

34. jQuery menu with an interesting effect

36. Fresh menu with an interesting effect using jQuery

A very interesting effect. Perfect for designing portfolio websites.

Interesting effect of thumbnails popping up on hover.

40. Dropdown list with autoscrolling

Nice transition effect between items.

42. Great jQuery menu

43. Beautiful large jQuery menu

44. jQuery Scrolling Menus

Menu items are presented in the form of thumbnails.

46. jQuery Radial Navigation Menu

47. CSS and jQuery menu

A navigation bar with a search box that becomes translucent as you scroll down the page.

48. Horizontal jQuery menu

49. Vertical jQuery menu

Great vertical menu. When you hover the cursor, a menu item pops up.

50. Horizontal jQuery menu

An interesting effect when hovering the cursor over a menu item.

52. jQuery Dropdown Menu

When you hover your mouse over the menu, its items will appear. The items that appear are displayed in the form of an arc, the radius of which you can set when configuring the plugin. In some browsers you won't see an arc display, the menu will be displayed straight, but this still won't ruin the overall impression of this jQuery menu implementation.

53. CSS and jQuery navigation bar

An interesting effect when hovering the mouse over a menu item.

54. jQuery popup panel

Fresh animated menu in gray tones.

58. Columnar site navigation using jQuery

An interesting solution for navigation, which is presented in the form of vertical stripes. When you hover your mouse over these bars, an image for the item and a list of submenus appear. When you click on a submenu item, a page with a description appears. This implementation is perfect for promotional sites or presentations. Be sure to check out the demo of the plugin.

59. jQuery site navigation

The site navigation is presented in the form of 4 pictures, when you hover over them you will notice an interesting animated effect.

60. Navigation bar scrolls with content

Navigation panel. Clicking on the arrow scrolls the page. The navigation scrolls along with the page content.

61. jQuery panel with various social services

62. Neat animated jQuery menu

63. jQuery “Watercolor Brushes” menu

The task of centering a horizontal menu can be tricky, especially for those new to CSS. The search for solutions leads to a very limited list of methods, most of which rely on CSS tricks, JavaScript, or the use of non-standard rules that are not supported by all browsers. In this tutorial, we'll walk through a method for centering a horizontal menu that uses only standard CSS rules and works in all browsers.

Example of a centered menu

Below is a horizontal menu centered in this column, in which the second tab is activated. You can try resizing your browser window or page to make sure the menu always remains centered and functional.

On the demo page you can see several design options for a horizontally centered menu. Any of them can be used in your projects.

HTML markup

All of the menus shown in this tutorial use a simple structure. This is an ordinary unordered list of links placed in an element div.

First bookmark
Second bookmark
Third tab
Fourth tab

Centered Menu CSS Code

Below is the complete CSS code used to center the menu. An explanation of the operating principle is given later in the lesson.

#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :none; padding:0; position:relative; text-align:center; padding:0; position:relative; right:50%; ) #centeredmenu ul li a ( display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration: none; line-height:1.3em; ) #centeredmenu ul li a:hover ( background:#369; color:#fff; ) #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover ( color:# fff; background:#000;

How does the centering method work?

The action of the method is based on the relative positioning of floating block elements one within the other. First, let's look at how the size of elements changes with displacement.

Element div(block) without displacement is stretched to the entire width available to it.

But if we move the div to the left, it will automatically shrink to fit its contents. Compression is key to implementing this menu centering method. It helps you move the menu to the correct position.

Standard left-aligned menu

Let's take a standard left-aligned menu and remake it step by step. For clarity, the items are colored in different colors, so it’s immediately clear what goes where.

Please note the following points:

Element centeredmenu div(blue rectangle) is offset to the left, but has a width of 100%, so it remains stretched across the entire page.
Element ul(pink rectangle) is inside the element centeredmenu div and moves to the left. This means that it will be compressed to the width of its content, that is, to the total width of all bookmarks.
All li elements (green rectangles) are inside the element ul and move to the left. Thus, they are compressed to the size of the links in them and lined up in one horizontal line.
Inside each link (orange rectangles) the bookmark text is displayed: Bookmark 1, Bookmark 2, and so on.

Shifting the position of an unordered list

Then we offset the element ul to the right by 50% using the position:relative; . When an element is offset by percentage under these conditions, it is important to remember that the total width of the elements it contains is not its width. In our case, the offset occurs by half the browser window (or the space available for display). As a result, our menu starts in the middle of the window and partially extends beyond its boundaries. And let's move on to the next step.

Shift the position of all menu elements

All that remains is to move all the elements li left by 50%. This is 50% of the width of our ul element (the container that contains the menu). Thus, the bookmarks are shifted exactly to the center of the window.

A few important notes

When using this centering method, there are several important points to remember:

Since the element ul partially extends beyond the window, this results in the display of scroll bars. Therefore, you need to use the overflow:hidden; rule. for element centeredmenu div. Thus, the protruding part of the element div will be cut off.
Since the element ul is not aligned to bookmarks, you cannot use any visual styles for it. Leave the ul element without a background color and without a border so that it becomes completely invisible. And styles for bookmarks should only be used for elements li.
If you need to set special styles for the first and last bookmarks, you need to add a class for the first and last elements li, so you can style them individually.

Conclusion

The proposed solution is compatible with all browsers, does not use JavaScript, and supports resizable text.

Most classic websites on the Internet use a horizontal menu as the main navigation element. Sometimes it may contain various additional features - multi-level structures, icons for sub-items, a search block, complex lists, etc. Recently there was a small selection on the blog, and today we’ll look at 4 practical examples of how to make a drop-down menu using CSS + HTML. The information will be useful for novice developers and those who want to change the navigation on their website.

The first CSS3 Dropdown Menu tutorial is the newest in the collection (from April 2016). Pros of the solution: in this horizontal drop-down menu for the site, the sub-items contain icons, the implementation and the CSS code itself are quite simple to understand and implement.

Step1 - HTML markup

The first step is to create an unordered list in HTML with anchor links (#) for its elements. There, in one of the items, we add another nested list, which will be responsible for the submenu.

Step2 - Display the menu

We remove unnecessary indents in CSS for elements of the horizontal drop-down menu of the site. At the same stage, we will set a fixed width and height of the menu items, and also add rounded corners.

.menu, .menu ul, .menu li, .menu a ( margin : 0 ; padding : 0 ; border : none ; outline : none ; ) .menu ( height : 40px ; width : 505px ; background : #4c4e5a ; background : -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; (top , #4c4e5a 0% , #2c2d33 100% ) ; background : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : linear-gradient(top , #4c4e5a 0% , # 2c2d33 100% ) ; -webkit-border-radius: 5px ; border-radius : 5px ; .menu li ( position : relative ; list-style : none ; float : left ; display : block ; height : 40px ;

Menu, .menu ul, .menu li, .menu a ( margin: 0; padding: 0; border: none; outline: none; ) .menu ( height: 40px; width: 505px; background: #4c4e5a; background: - webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); top, #4c4e5a 0%,#2c2d33 100%); background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .menu li (position: relative; list-style: none; float: left; display: block ; height: 40px ;

Step3 - link design

In addition to the basic features in styles (font, color, height), we use and create a smooth transition of text color when hovering. We also add separators to the menu, removing the border from the first element on the left and from the last on the right.

.menu li a ( display : block ; padding : 0 14px ; margin : 6px 0 ; line-height : 28px ; text-decoration : none ; border-left : 1px solid #393942 ; border-right : 1px solid #4f5058 ; font -family: Helvetica, sans-serif; font-weight: bold; color: #f3f3f3; text-shadow: 1px 1px 1px rgba (0, 0, 0, .6) transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -out; transition : color .2s ease-in-out; ) .menu li: first-child a ( border-left : none ; ) .menu li: last-child a( border-right : none ; ) .menu li : hover > a ( color : #8fde62 ; )

Menu li a ( display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font- family: Helvetica, sans-serif; font-weight: font-size: 13px; text-shadow: 1px 1px 1px rgba(0,0,0,.6); : color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; out; transition: color .2s ease-in-out; ) .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: hover > a ( color: #8fde62; )

Step4 - submenu

Since we have a drop-down site menu using CSS, we should also set the design for the nested list. First, set a margin of 40px on top and 0px on the left + add rounded corners. To show/hide the submenu, initially set the opacity property to zero, and when hovering it to one. To create the effect of a submenu appearing, set the list height value to zero, and with hover = 36px.

.menu ul ( position : absolute ; top : 40px ; left : 0 ; opacity : 0 ; background : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; border -radius : 0 0 5px 5px ; -webkit-transition: opacity .25s ease .1s ; -moz-transition: opacity .25s ease .1s ; -o-transition: opacity .25s ease .1s ; .25s ease .1s ; transition : opacity .25s ease .1s ; ) .menu li: hover > ul ( opacity : 1 ; ) .menu ul li ( height : 0 ; overflow : hidden ; padding : 0 ; -webkit-transition : height .25s ease .1s ; -moz-transition: height .25s ease .1s ; -ms-transition: height .25s ease .1s ; .1s ; ) .menu li: hover > ul li ( height : 36px ; overflow : visible ; padding : 0 ; )

Menu ul ( position: absolute; top: 40px; left: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; 25s ease .1s; transition: opacity .25s ease .1s; ) .menu li:hover > ul ( opacity: 1; ) .menu ul li ( height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; 1s; ) .menu li:hover > ul li ( height: 36px; overflow: visible; padding: 0; )

We set the width of the links = 100px, a border-bottom border is added at the bottom of all elements except the last one. Also, if you wish, you can place pictures for the submenu items (attention! do not forget to change the paths to the images in the code to the ones you use).

.menu ul li a ( width : 100px ; padding : 4px 0 4px 40px ; margin : 0 ; border : none ; border-bottom : 1px solid #353539 ; ) .menu ul li : last-child a ( border : none ; ) .menu a.documents ( background : url (../img/docs.png ) no-repeat 6px center ; ) .menu a.messages ( background : url (../img/bubble.png ) no-repeat 6px center ; ) .menu a.signout ( background : url (../img/arrow.png ) no-repeat 6px center ; )

Menu ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; ) .menu ul li:last-child a ( border: none; ) . menu a.documents ( background: url(../img/docs.png) no-repeat 6px center; ) .menu a.messages ( background: url(../img/bubble.png) no-repeat 6px center; ) .menu a.signout ( background: url(../img/arrow.png) no-repeat 6px center; )

I personally like the ease of implementation and the use of icons. Here is the final code from codepen:

Josh Riser's option is visually similar to the previous HTML and CSS dropdown menu. The code does not have a child selector ">" (useful in multi-level designs), but the author makes good use of CSS3 effects (transition, box-shadow and text-shadow) for a more beautiful result. The link in the source does not describe the process of creating a horizontal drop-down menu, so I will immediately provide the final code:

In this example, we will look at how to make a drop-down menu using CSS, which, in addition to the items, will contain a search block. A similar implementation can often be found in modern . In terms of implementation time and complexity, the solution is a little more complicated than the previous ones. It was published in May 2013, so you may need to tweak some things, although it worked fine in our testing.

HTML code

For navigation, as always, an unordered list (with the nav class) is used. Regular menu items are list items (li) and contain links (a href) without any classes or IDs. The exception is 3 specialized elements of this horizontal drop-down menu with the following IDs:

settings — link picture;
search — a block with a search and a corresponding button;
options - contains a submenu (implemented through a list with the subnav class).

Also in the code you will see a prefixfree script for using CSS properties without prefixes. The final HTML for the dropdown menu looks like this:

Application
Board
Options
- Settings
- Application
- Board
- Options

Application
Board
Options
- Settings
- Application
- Board
- Options

Menu CSS

1. Basic styles and menu elements

First, we specify the Montserrat font, a dark gray background, and a fixed height for the menu items. All elements have float: left alignment and relative positioning so that later you can add a submenu with position: absolute;

@import url (http: //fonts.googleapis.com/css?family= Montserrat) ;

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margin: 0; padding: 0; ) .nav ( background: #232323; height: 60px; display: inline-block; ) .nav li ( float: left; list-style-type: none; position: relative; )

2. Formatting links

Menu items use the basic design + . The height is the same as in the nav class. For #settings the image link at the beginning of the menu, the alignment is set.

.nav li a ( font-size : 16px ; color : white ; display : block ; line-height : 60px ; padding : 0 26px ; text-decoration : none ; border-left : 1px solid #2e2e2e ; font-family : Montserrat , sans-serif ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) ; .nav li a: hover ( background-color : #2e2e2e ; ) #settings a ( padding : 18px ; height : 24px ; font-size: 10px ; line-height: 24px ;

Nav li a ( font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); .nav li a:hover ( background-color: #2e2e2e; ) #settings a ( padding: 18px; height: 24px; font-size: 10px; line-height: 24px)

3. Search block

This element has a fixed width and consists of several parts - an input field (#search_text) with a green background and a search button (#search_button). In some browsers, the background color may be gray.

#search ( width : 357px ; margin : 4px ; ) #search_text ( width : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : Montserrat, sans-serif ; border : 0 none ; height : 52px ; margin-right : 0 ; color : white ; background : #1f7f5c ; float : border-box ; transition : all ) :: -webkit-input-placeholder ( /* WebKit browsers */ color : white ; ) : -moz-placeholder ( /* Mozilla Firefox 4 to 18 */ color : white ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ color : white ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color : white ; ) #search_text : focus ( background : rgb (64 , 151 , 119 ) ; ) #search_button ( border : 0 none ; background : #1f7f5c url (search.png) center no-repeat; float: left; text-align: center; cursor: pointer;

#search ( width: 357px; margin: 4px; ) #search_text( width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px ; margin-right: 0; outline: none; float: left; border-box: all ) ::-webkit-input-placeholder ( /* WebKit browsers */ color: white; ) :-moz-placeholder ( /* Mozilla Firefox 4 to 18 */ color: white; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: white; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color: white; ) #search_text:focus ( background: rgb(64, 151, 119); ) #search_button ( border: 0 none; background: #1f7f5c url (search.png) center no-repeat; float: left; text-align: 52px;

4. Dropdown submenu

The final touch will allow us to make a drop-down menu in CSS that fires for the last #options item.

#options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ) ; background-position : 85% center ; background-repeat : no-repeat ; padding-right : 42px ; ) .subnav ( visibility : hidden ; position : absolute ; top : 110% ; right : 0 ; width : 200px ; height : auto ; opacity : 0 ; transition : all 0.1s ; background : #232323 ; ) .subnav li ( float : none ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .subnav ( visibility : visible ; top : 100% ; opacity : 1 ; )

#options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav ( visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; transition: all 0.1s; background: #232323; ) .subnav li ( float : none; ) .subnav li a ( border-bottom: 1px solid #2e2e2e; ) #options:hover .subnav ( visibility: visible; top: 100%; opacity: 1; )

In the styles you will find the insertion of a triangle background image (triangle.png) to indicate the submenu - do not forget to indicate the correct path for this and other images in the example. The appearance of a submenu is implemented using the opacity property. Final solution on codepen:

This option mainly uses CSS2.1 techniques, the solution plus or minus is new - for March 2015. If you are missing one sublevel in a horizontal drop-down menu for a site, then this example contains three at once. Using the pseudo-class:only-child, a “+” symbol is added to items to indicate the presence of a submenu.

Overall, a good and simple example. We will not describe the implementation process in detail, because... it is similar to the previous ones - first you create an HTML framework, and then gradually add styles for it. Download the final code using the link to the source; you can partially view it in Codepen:

Total

Above we looked at 4 options for how to make a drop-down menu using CSS + HTML for, although there are many more similar examples on the Internet. There are solutions with jQuery, but this is most likely only useful for implementing some special effects and non-standard tasks. In most cases, a combination of CSS + HTML will be enough, especially since now the main requirements for a menu are convenience and fast loading speed.

Finally, two notes on the codes above. Some examples use images in the CSS for the dropdown menu, so you'll need to carefully review the image paths and provide the correct values for your site. Secondly, some of the solutions are 2-3 years old, so you should once again additionally check their performance in different browsers.

If you know any other interesting modern implementations of horizontal drop-down menus for a website, send links in the comments.

Specification Description

The tag is intended to display a list of menu items. Similar to tags and

.

In HTML4 the tag has become obsolete, it is recommended to use the tag instead
- MENU tag
- In this issue:
- Russian kitchen. Burlatskaya soup
- Ukrainian food. Vareniki
- Moldavian cuisine. Paprikash
- HTML5 IE Cr Op Sa Fx
- Copy Cut Paste