HTML+CSS 实现顶部导航栏菜单制作

下面我来为你详细讲解“HTML+CSS 实现顶部导航栏菜单制作”的完整攻略。

一、准备工作

在实现顶部导航栏菜单前，我们需要先准备好相关的素材和环境。

1.1 需要的素材

制作顶部导航栏菜单需要用到一些素材，具体包括：logo、背景图片、导航栏菜单文字和链接等。

在准备素材时，需要注意图片的大小和格式，要保证图片大小适当、格式正确，避免影响页面加载速度和美观度。

1.2 环境准备

制作顶部导航栏菜单需要用到HTML和CSS技术，所以我们需要在本地或云端开发环境搭建好HTML和CSS的开发环境，具体包括：文本编辑器、浏览器和HTTP服务器等。

在搭建环境时，需要注意选择适合自己的开发环境，并学会使用各种开发工具。

二、HTML+CSS 实现顶部导航栏菜单

2.1 HTML代码

顶部导航栏菜单的HTML代码通常包括一段顶部容器和一组导航链接，如下所示：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>顶部导航栏菜单制作</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="header">
        <a href="#"><img src="logo.png" alt="logo"></a>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </div>
</body>

</html>

2.2 CSS样式

为了使顶部导航栏菜单有更好的美观度和交互性，我们需要使用CSS样式来进行样式和交互的设置。具体的CSS样式代码如下：

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.header {
    background: #fff;
    height: 50px;
    line-height: 50px;
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    text-align: center;
}

.header a {
    display:inline-block;
    height: 100%;
    margin: 0 10px;
}

.header a img {
    height: 50px;
}

nav ul {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

nav ul li {
    display:inline-block;
}

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

nav ul li:hover > ul {
    top: 50px;
}

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 3px 3px rgba(0,0,0,.2);
    min-width: 200px;
}

nav ul ul li {
    display:block;
    width: 100%;
    text-align: left;
}

nav ul ul li a {
    display: block;
    padding: 10px;
    color: #333;
}

nav ul ul li a:hover {
    background: #f7f7f7;
}

2.3 示例说明

下面演示两个制作顶部导航栏菜单的样例。

示例一

HTML代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>顶部导航栏菜单制作示例1</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="header">
        <a href="#"><img src="logo.png" alt="logo"></a>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">产品</a>
                    <ul>
                        <li><a href="#">产品一</a></li>
                        <li><a href="#">产品二</a></li>
                        <li><a href="#">产品三</a></li>
                        <li><a href="#">产品四</a></li>
                    </ul>
                </li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </div>
</body>

</html>

CSS样式

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.header {
    background: #ccc;
    height: 50px;
    line-height: 50px;
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    text-align: center;
}

.header a {
    display:inline-block;
    height: 100%;
    margin: 0 10px;
}

.header a img {
    height: 50px;
}

nav ul {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

nav ul li {
    display:inline-block;
}

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

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 3px 3px rgba(0,0,0,.2);
    min-width: 200px;
}

nav ul ul li {
    display:block;
    width: 100%;
    text-align: left;
}

nav ul ul li a {
    display: block;
    padding: 10px;
    color: #333;
}

nav ul ul li a:hover {
    background: #f7f7f7;
}

示例二