Beautiful menu in pure css3. css3 dropdown menu

• home
• News
• Contacts
• About Us

Our next task is to reset the default list styles. We need to remove the outer and inner padding from the list itself and the bullets from the list items. Then set the desired width:

#navbar ( margin: 0; padding: 0; list-style-type: none; width: 100px; )

Now it's time to style the links themselves. We will add to them background color, change the text parameters: color, font size and weight, remove the underlining, add small indents and redefine the display element from inline to block. Additionally, left and bottom frames have been added to the list items.

When you hover your mouse over a menu item, it appearance can change to attract the user's attention. You can create such an effect using the pseudo-class:hover.

Let's return to the vertical menu example discussed earlier and add the following rule to the style sheet:

#navbar a:hover ( background-color: #666; border-left: 5px solid #3333FF; ) Try »

In the previous example, we looked at the vertical navigation bar, which is most often found on websites to the left or right of the main content area. However, menus with navigation links are also often located horizontally at the top of the web page.

A horizontal menu can be created by styling regular list. Display property for elements

To place menu items horizontally, first create bulleted list with links:

• home
• News
• Contacts
• About Us

Let's write a couple of rules for our list that reset the default style used for lists, and redefine the list items from block to inline:

#navbar ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Try »

Now all we have to do is define the styling for our horizontal menu:

#navbar ( margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; ) #navbar a ( color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; background-color: #0066FF; ) Try »

The menu we will create will have the main navigation links located in horizontal panel navigation, and sub-items that will be displayed only after hovering the mouse over the menu item to which these sub-items relate.

First we need to create the HTML structure of our menu. We will place the main navigation links in a bulleted list:

• home
• News
• Contacts
• About Us

We will place the sub-items in a separate list, nesting it in the element

• home
• News
• Contacts
  • Address
  • Telephone
  • Email
• About Us

Now let's get started writing CSS code. First, you need to hide the list with sub-items using the display: none; declaration so that they are not displayed on the web page all the time. To display sub-items, we need that when hovering over an element

#navbar ul ( display: none; ) #navbar li:hover ul ( display: block; )

We remove the default indents and markers from both lists. We make list elements with navigation links floating, forming a horizontal menu, but for list elements containing sub-items we set float: none; so that they appear below each other.

#navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( float: left; ) #navbar ul li ( float: none; )

Next, we need to make sure our dropdown submenu doesn't push the content below the navigation bar down. To do this, we will set the list items position: relative; , and a list containing sub-items position: absolute; and add a top property with a value of 100% so that the absolutely positioned submenu appears exactly below the link.

#navbar ul ( display: none; position: absolute; top: 100%; ) #navbar li ( float: left; position: relative; ) #navbar ( height: 30px; ) Try »

The height for the parent list was added on purpose, since browsers do not consider floating content as element content, without adding height our list will be ignored by the browser and the content following the list will wrap around our menu.

Now we just need to style both of our lists and the drop-down menu will be ready:

#navbar ul ( display: none; background-color: #f90; position: absolute; top: 100%; ) #navbar li:hover ul ( display: block; ) #navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar ( height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; ) #navbar li ( float: left; position: relative; height: 100%; ) #navbar li a ( display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; ) #navbar ul li ( float: none; ) #navbar li:hover ( background-color: #f90; ) #navbar ul li:hover ( background-color: #666; )

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, but today we’ll look at 4 practical examples how to make a dropdown 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.

• My dashboard
• Likes
• Views
  • Documents
  • Messages
  • Sign Out
• Uploads
• Videos
• Documents

Step2 - Display the menu

We remove unnecessary indents in CSS for elements of the site's horizontal drop-down menu. At the same stage we will install fixed width and the 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%); background: -o-linear-gradient( 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 - linking

In addition to the basic features in styles (font, color, height), we use and create smooth transition hover text colors. 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, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in- 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 a 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 value of the list height 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; -ms-transition: opacity . 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; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease . 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; )

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. Not in the code 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 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. Final HTML option for the drop-down menu looks like:

• 
• 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); * ( 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; )

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; outline: none; background: #1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s; ) ::-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; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer; )

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; )

In the styles you will find an insert background image triangle (triangle.png) to indicate a 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 opacity properties. Final solution on codepen:

IN this option CSS2.1 techniques are mainly used, 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 speed downloads.

Finally, two notes on the codes above. Some examples use images for the dropdown menu in CSS, so you will have to carefully review the image paths and specify 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.

CSS3 changes the technology of creating websites. While many are reluctant to start using CSS3 due to the lack of support in some browsers, there are those who are going ahead and creating amazing things using the amazing features of CSS3. You no longer need to rely on scripts and images to create stylish website elements such as buttons and menus.

You can create a modern menu without Javascript or images by effectively using the new CSS3 properties: border radius and animation. This menu works great with Firefox, Opera, Chrome and Safari. The dropdown menu also works in browsers that do not support CSS3, such as IE7+, but rounded corners and shadows will not be displayed. CSS3 effects will one day replace everything jQuery animation, which is used by designers.

A fee is required for commercial use. The business version of CSS3Menu additionally provides the option to create a multi-column menu and includes an expanded set of menu templates and icons.

Once you complete your payment via a secure form, you will immediately receive your license information via e-mail. You can choose the most suitable payment method: credit card, bank transfer, check, PayPal, etc.

• Download free version
  for Windows & Mac
• Download commercial version
  for Windows & Mac - $59

1) Open the CSS3 Menu application, click the "Add Item" and "Add Submenu" buttons located on the CSS3 Menu toolbar to create a menu. You can also use the "Delete element" button to remove some buttons.

2) Use ready-made templates. To do this, select the theme you like from the "Templates" list. Double click on a theme to apply it.

3) Customize the appearance of the menu.
3.1. Click on the element and change the button appearance settings for normal and hovered states, set the link and the value of the Target attribute on the "Main Menu" tab.
3.2. Click on an element and change the appearance of the submenu for normal and hover states, set the link and the value of the Target attribute on the "Submenu" tab.

4) Saving the menu.
4.1. Saving the project file. To save the project, simply click the "Save" button located on the toolbar or select "Save" or "Save..." in the main menu.
4.2. Publishing menus in HTML format. To do this, click the "Publish" button on the toolbar.

CSS3 Menu
If you find errors in the operation of the program, or have any questions or suggestions, please contact technical support. Make sure your email includes information about your browser, OS, CSS3Menu version, and a link to your page. In most cases you will receive a response within one business day. Please read the FAQ first. Your question may have already been answered.
Email: