使用HTML和CSS创建网页导航菜单

翻滚的胖子
2023-06-06 13:58:46
HTML CSS JavaScript

本文将介绍如何使用HTML和CSS创建网页导航菜单，并提供详细的函数和代码案例，适合编程小白阅读学习。

HTML结构

首先，我们需要定义HTML结构。我们可以使用无序列表（<ul>）和列表项（<li>）来创建菜单项。每个菜单项都应该包含一个链接（<a>）和文本内容。

<ul id="menu">
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
</ul>

CSS样式

接下来，我们需要为菜单项添加CSS样式。我们可以使用display: inline-block;将列表项转换为块级元素，并使用text-align: center;将文本居中。

#menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu li {
    display: inline-block;
    margin: 0 10px;
    text-align: center;
}

#menu li a {
    display: block;
    padding: 10px 20px;
    background-color: #0072c6;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

JavaScript函数

最后，我们需要创建一个JavaScript函数来实现菜单项的交互。当用户将鼠标悬停在菜单项上时，我们需要为菜单项添加一个hover类，当用户将鼠标移开时，我们需要删除该类。

var menuItems = document.querySelectorAll('#menu li');

for (var i = 0; i < menuItems.length; i++) {
    menuItems[i].addEventListener('mouseover', function() {
        this.className += ' hover';
    });

    menuItems[i].addEventListener('mouseout', function() {
        this.className = this.className.replace(' hover', '');
    });
}

现在，我们已经完成了网页导航菜单的创建。您可以将这些代码复制到自己的HTML文件中，并进行修改以满足自己的需求。希望这篇文章对您有所帮助！

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com