元素则用于定义菜单项的链接。
3. CSS样式
接下来，我们将使用CSS3来美化菜单。以下是一个基本的CSS样式示例：
.navbar {
background-color: #333;
overflow: hidden;
}
.nav-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-item a:hover {
background-color: #ddd;
color: black;
}
在这个例子中，我们为导航菜单添加了背景颜色，并使菜单项浮动以形成水平布局。我们还为链接添加了悬停效果，以提供视觉反馈。
4. 响应式设计
为了确保菜单在不同设备上都能良好显示，我们可以使用媒体查询来调整样式：
@media screen and (max-width: 600px) {
.nav-item {
float: none;
}
.nav-item a {
text-align: left;
}
}
这段代码将使菜单在屏幕宽度小于600像素时变为垂直布局。
5. JavaScript交互
为了增强用户体验，我们可以使用JavaScript来添加一些交互功能，例如：
document.querySelector(‘.nav-item’).addEventListener(‘click’, function() {
this.classList.toggle(‘active’);
});
这段代码将使菜单项在点击时切换一个激活状态，从而展开或收起子菜单。
6. 总结
通过以上步骤，我们使用HTML5和CSS3创建了一个时尚且易用的顶部导航菜单。记住，设计时应始终考虑用户体验和可访问性。不断测试和优化你的菜单，以确保它在各种设备和浏览器上都能提供最佳表现。