HTML 中的水平菜单栏-html教程-PHP中文网

在 Html 中，我们有一组不同的功能来使用突出显示并且对用户端更具吸引力。我们已经在上一篇文章中讨论了滚动条，就像菜单栏中的同样的东西也为用户端提供了更多的设施。一般来说，菜单栏有助于对内容进行分类并增加网页的可读性。要在用户端菜单栏中获得更多交互性，可以以最简单的方式帮助您。滚动条有水平和垂直两种类型，就像菜单栏中的一样，也是开发人员必须使用的东西。我们将在下面的概念中看到更多细节。

语法：

在使用水平/垂直菜单栏时，我们必须使用 CSS 来反映 HTML 页面各个部分的样式。通常，导航栏需要一些标准 HTML 作为实现子文档或子派生文档的基础。导航栏或水平栏基本上有一个链接列表，因此使用

和

<style>
ul{
}
li variablename:hover{
}
</style>
<body>
<ul>
<li>
</li>
</ul>
</body>

登录后复制

上面的代码是水平菜单栏的基本语法。

HTML 中的水平菜单栏示例

我们已经看到了一些示例，可以更好地理解这些概念。

示例#1

代码：

<html>
<head>
<style>
ul {
margin: 5;
padding: 5;
background-color: green;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover {
background-color: #111;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>

登录后复制

示例输出：

HTML 中的水平菜单栏

在上面的例子中，当我们创建网页时，我们将在水平视图中显示菜单项，通常我们只会看到水平面板中的菜单项，因为这里的用户自定义视图是逐行的，所以我们将使用水平方向。相同的 CSS 样式类可用于所有 HTML 文档。

示例#2

代码：

<html>
<body>
<p style="font-family:Comic Sans MS">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</p>
</body>
</html>

登录后复制

示例输出：

HTML 中的水平菜单栏

第二个示例与第一个示例相同，但这里我们不会在 HTML 文档中使用任何 CSS 样式。

标签我们将使用一些 CSS 样式，如字体系列、宽度、高度等

示例 #3

代码：

<html>
<head>
<style>
ul {
margin: 5;
padding: 5;
background-color: #333;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>

登录后复制

示例输出：

HTML 中的水平菜单栏

一些免费的水平菜单类型：

每个功能都是针对不同场景的一些集合。水平菜单中的一些东西是一些纯CSS，此外他们还将使用javascript来确保它们具有响应能力并在移动设备上工作。

一些水平导航工作正常，但脚本不支持某些功能，还有浏览器兼容性问题。在网站设计中，水平条非常适合简约的外观，也可以很好地为用户提供简单的导航界面空间。

橙色响应式水平导航菜单：

它是横向菜单中的一种，它是一个轻量级、简约的菜单，完全纯CSS样式。该菜单还可以响应并转换为移动设备上的垂直菜单类型，支持查看小屏幕以使用手机。在桌面上，他们不会改变任何东西，它只能在网络浏览器屏幕上运行，在手机上也一样。

示例：

<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>

登录后复制

输出：

HTML 中的水平菜单栏

绿色选项卡水平菜单类型：

此菜单是选项卡式界面中水平面板的设计模式之一。它将使用大量且昂贵的应用程序，例如购买/销售产品商品应用程序，这将有助于最终用户非常快速且轻松地单击不同的菜单项，以将结果从数据库获取给用户。在上面的类型中，我们将使用一些脚本，例如 jquery，但这里我们将仅使用 HTML 和 CSS，因此它将快速将数据加载到用户屏幕。让我们以上一个主题中的相同示例

示例：

<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>

登录后复制

输出：

HTML 中的水平菜单栏

我们采用了相同的示例，但我们修改了一些 CSS 样式并更新了 HTML 文件。每当我们将鼠标光标放在选项卡中时，它都会自动突出显示所提到的绿色文本，因此当鼠标光标根据用户选择移动到另一个选项卡时，它会发生变化。

单杠气泡包裹：

在此菜单栏中，与之前的类型相同，我们将在 HTML 上使用完全 CSS 样式。此外，我们将添加 border-radius 属性，使其看起来像气泡类型。我们将看到具有不同 CSS 样式的相同示例，以及显示的输出，如下面的代码和结果。

示例：

<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>

登录后复制

Output:

HTML 中的水平菜单栏

We have taken sample examples as we discussed in the previous horizontal types but additionally, we add the border-radius in the style sheet.

Conclusion

Finally, we have concluded the session, like we have discussed in previous topics each and every HTML concepts have some more additional features that will depend on the versions. And also browser compatibility issue when comes to one version into another version. In the above horizontal menu bar not only the above concepts it will have further concepts also the same horizontal menu with textured tabs, and we have also used jquery plugins for further user attractive features if we need. If we won’t use the chrome browser in the web page output so we can add the tabbed and additionally blue screen type in CSS styles. When compare to HTML we have some additional features in jquery plugins.

以上是HTML 中的水平菜单栏的详细内容。更多信息请关注PHP中文网其他相关文章！