怎么让菜单在页面中部HTML,如何显示用户在网页中选择菜单栏的哪个选项

最新推荐文章于 2022-06-17 16:47:30 发布

McGL

最新推荐文章于 2022-06-17 16:47:30 发布

阅读量418

点赞数

文章标签：怎么让菜单在页面中部HTML

本文讨论如何在HTML菜单栏中通过改变颜色来标识用户所选的当前选项，以便用户在浏览网页时能清楚地看到他们所在的页面。实现这一功能需要结合CSS和JavaScript或服务器端技术，通过修改特定选项的样式来突出显示被选中的菜单项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在网页中有一个HTML菜单栏，并且网页中的所有页面都有它。当我在此菜单栏中选择一个选项时，我希望用户在浏览整个网页时识别用户选择了哪个选项(或用户处于哪个页面)。这可以通过改变该特定选项的颜色来识别。菜单栏的代码写在下面，如何显示用户在网页中选择菜单栏的哪个选项

/* Stylesheet */

#cssmenu > ul{

list-style: none;

margin: 0;

padding: 0;

vertical-align: baseline;

line-height: 1;

}

/* The container */

#cssmenu > ul {

display: block;

position: relative;

width: 150px;

}

/* The list elements which contain the links */

#cssmenu > ul li {

display: block;

position: relative;

margin: 0;

padding: 0;

width: 150px;

}

/* General link styling */

#cssmenu > ul li a {

/* Layout */

display: block;

position: relative;

margin: 0;

border-top: 1px dotted #fff;

border-bottom: 1px dotted #d9d9d9;

padding: 11px 20px;

width: 110px;

/* Typography */

font-family: Helvetica, Arial, sans-serif;

color: #3dafea;

text-decoration: none;

text-transform: uppercase;

text-shadow: 0 1px 0 #fff;

font-size: 13px;

font-weight: 300;

/* Background & effects */

background: #eaeaea;

}

/* Rounded corners for the first link of the menu/submenus */

#cssmenu > ul li:first-child>a {

border-top-left-radius: 4px;

border-top-right-radius: 4px;

border-top: 0;

}

/* Rounded corners for the last link of the menu/submenus */

#cssmenu > ul li:last-child>a {

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

border-bottom: 0;

}

/* The hover state of the menu/submenu links */

#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {

color: #fff;

text-shadow: 0 1px 0 rgba(0, 0, 0, .3);

background: #54cdf1;

background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);

background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3);

background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);

background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);

border-color: transparent;

}

/* The arrow indicating a submenu */

#cssmenu > ul .has-sub>a::after {

content: '';

position: absolute;

top: 16px;

right: 10px;

width: 0px;

height: 0px;

/* Creating the arrow using borders */

border: 4px solid transparent;

border-left: 4px solid #3dafea;

}

/* The same arrow, but with a darker color, to create the shadow effect */

#cssmenu > ul .has-sub>a::before {

content: '';

position: absolute;

top: 17px;

right: 10px;

width: 0px;

height: 0px;

/* Creating the arrow using borders */

border: 4px solid transparent;

border-left: 4px solid #fff;

}

/* Changing the color of the arrow on hover */

#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {

border-left: 4px solid #fff;

}

#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {

border-left: 4px solid rgba(0, 0, 0, .25);

}

/* THE SUBMENUS */

#cssmenu > ul ul {

position: absolute;

left: 150px;

top: -9999px;

padding-left: 5px;

opacity: 0;

/* The fade effect, created using an opacity transition */

-webkit-transition: opacity .3s ease-in;

-moz-transition: opacity .3s ease-in;

-o-transition: opacity .3s ease-in;

-ms-transition: opacity .3s ease-in;

}

/* Showing the submenu when the user is hovering the parent link */

#cssmenu > ul li:hover>ul {

top: 0px;

opacity: 1;

}

有人知道该怎么做吗？谢谢。

如果你正在谈论的活动菜单/页面，您需要使用JS或服务器端，以实现这一目标... –