免费的HTML5下拉菜单栏教程和插件

e powers of HTML5 are really amazing. There was a time when you needed jQuery to make a superb navigation bar, but not anymore. A pure HTML5 dropdown menu can sufficiently deliver the best user experience. Today’s post is about creating such HTML5 menu bars and navigation bars.

An HTML5 dropdown menu can be requirement of any website. Single-story menus sometimes are not enough and we need a dropdown menu. Thankfully, HTML5 has the power to create the most useful menus.

This post contains tutorial to create and edit an HTML5 dropdown menu, and a list of 20 best HTML5 menu bars that you can use in your website.

How to edit an HTML5 Dropdown Menu

Note: This section of for beginning web designers, if you are already well-versed at HTML/CSS, feel free to skip ahead.

When we say pure HTML, what we mean is that it does not include JavaScript. It does not mean that we are negating CSS.

The basic difference between JavaScript menus and pure HTML menus is that pure HTML menus are 100 per cent readable for search engines, so they give high SEO value. And these days, HTML5 and CSS3 has given enough transitions and effects to make the coolest navigation bars without requiring JavaScript or jQuery.

Understanding Coding Method

HTML: I can’t define all the functions, as that will take too much time but I’m describing the basic structure of an HTML5 navigation bar.

<nav>
    <ul>
        <li><a class="main" href="#">Option 1</a></li>
        <li><a class="main" href="#">Option 2</a></li>
        <li><a class="main" href="#">Option 3</a></li>
        <li><a class="main" href="#">Option 4</a></li>
    </ul>
</nav>

<nav> is the basic tag in which we put all the navigation bar. Rest is just <ul> which means unordered list and <li> which means list item.

For creating a multi-level menu, we just add another unordered list inside a list item. Here’s the example.

<nav>
    <ul>
        <li><a class="main" href="#">Option 1</a></li>
        <li><a class="main" href="#">Option 2</a>
            <ul>
                <li><a class="sub" href="#">Sub-option 1</a></li>
                <li><a class="sub" href="#">Sub-option 2</a></li>
                <li><a class="sub" href="#">Sub-option 3</a></li>
            </ul>
        </li>
        <li><a class="main" href="#">Option 3</a></li>
        <li><a class="main" href="#">Option 4</a></li>
    </ul>
</nav>

Of course, this is the just the tip of the iceberg, but you know the basics now. Time to check out CSS.

CSS: CSS is pretty simple and straightforward. That’s because the same set of commands can be applied anywhere, so if you know how to apply border at an image, you can apply border to anything. This is why I’m not putting down any specific properties, I’m just describing the basic CSS structure of a dropdown menu.

First thing we need to do is establish that all sub-menus must remain hidden unless they have the pointed on them. Here’s the CSS for them.

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }

Now set the properties of everything else.

nav ul {
    STYLING PROPERTIES FOR MAIN BAR
}

nav ul li {
    float: left;
}
    nav ul li:hover {
        HOVER STYLING PROPERTIES HERE
    }

The process carries on like this. I’m sure you get the picture now. If you still need any help, you can use the comments section below. I’ll be glad to help.

Pure HTML Menu Bars

Creating HTML/CSS Only Horizontal Navigation

Even though this is a very simple design, this is very powerful, customizable and SEO friendly navigation bar. If you are a beginner, you should start from this menu.

Live Demo | Download

Advanced HTML/CSS Menu

This is uses a unique effect from CSS3. When you rollover any menu item, all the nonactive items of the menu get blurred. Sounds simple enough but the results are not bad. Have a look.

Live Demo | Download

Stunning Icon Based Menu

No need for jQuery or JavaScript; no need to launch Photoshop. And let’s take it up a notch by including a great icon font to add some character to our menu.

Live Demo | Download

Multi-Level Responsive Navigation Menu

A menu system using the famous bootstrap CSS framework. BootM is a pure CSS based navigation system, its responsive, supports unlimited levels and icons as well.

Live Demo | Download

Stylishly Simple Nav Bar

There was a time when such designs were possible only with images and JavaScript, but that’s not the case these days. This is a download plus a brilliant tutorial.

Live Demo | Download

Slicked HTML/CSS Menu

This is probably the coolest navigation bar in this list. This is a cross browser tested, super cool, super fast, no images, no JavaScript menu that is surely to wow your clients and visitors.

Live Demo | Download

LavaLamp Menu

You might have worked with jQuery’s LavaLamp plugin, but this CSS3 based navigation bar does not use that tutorial. It is made using pure HTML5 and CSS3.