当前位置：文江博客话题详情

如何根据所选项目改变菜单背景

发布于 2024-11-17 17:19:35 字数 1012 浏览 7 评论 0原文

这让我感到畏惧，我看不到要走的路。这是我第一次在这里提出问题，所以如果我不遵守协议，请纠正我。谢谢！！！

我需要根据所选项目更改菜单的背景，因此当活动时，左侧的项目将显示为橙色，而右侧的项目将显示为灰色。

此外，分隔颜色的三角形必须保持在活动菜单项的右侧。

对于第一个元素，很容易，但第二个以及后面的元素，我无法使代码工作，因为它超出了菜单的边界。

例如，我有 [individuos] [empresas] [corredores] [proveedores]

当 empresas 处于活动状态时，individuos 和 empresas 应为橙色，而 corredores 和 proveedores 应为灰色。

如果选择corredores，则individuos、empresas 和corredores 应为橙色，而provedores 为灰色。

我想发布一张图片来说明，但作为新手，我不被允许。

#navigation {
  position: absolute;
  line-height: 40px;
  padding: 0;
  margin: 0;
  margin-left: 210px;
  width: 730px;
  background-color: #757373;
}

#navigation ul li a {
  text-decoration: none;
  float: left;
  padding: 0 40px 0 10px;
}

#navigation .empresas .active {
  background: url(images/the-background.png) no-repeat right;
}

这个不错第一个活动元素正确显示

这个不是，看到 INDIVIDUOS 应该是橙色第二个元素在第一个元素的左侧缺少橙色

原文

This is daunting me and I can't see the way to go. This is the first time I put a question here, so correct me if I´m not following protocol. Thanks!!!

I need the background of the menu to change according to the selected item so when active, the items to the left will show in orange while keeping the items on the right in gray.

Also, the triangle separating the colors have to keep to the right of the active menu item.

For the first element, is easy, but the second and forward, I cant make the code work as it cuts on the boundaries of the menu.

For example, I have [individuos] [empresas] [corredores] [proveedores]

When empresas is active, individuos and empresas should be orange while corredores and provedores should be gray.

If corredores is selected, then individuos, empresas and corredores should be orange while proveedores is gray.

I wanted to post an image to illustrate but as newbie I am not allowed.

#navigation {
  position: absolute;
  line-height: 40px;
  padding: 0;
  margin: 0;
  margin-left: 210px;
  width: 730px;
  background-color: #757373;
}

#navigation ul li a {
  text-decoration: none;
  float: left;
  padding: 0 40px 0 10px;
}

#navigation .empresas .active {
  background: url(images/the-background.png) no-repeat right;
}

This one is good
First active element appears correctly

This one is not, see that INDIVIDUOS should be orange
Second element is missing orange on the left for first element

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

差↓一点笑了 2024-11-24 17:19:35

也许这个小提琴提供了一些灵感？

CSS：

#navigation li {
    background-color: #ffa500;
}
#navigation li.active+li,
#navigation li.active+li+li,
#navigation li.active+li+li+li,
#navigation li.active+li+li+li+li,
#navigation li.active+li+li+li+li+li {
    background-color: #757373;
}

HTML：

<div id="navigation">
    <ul>
        <li><a href="">professionals</a></li>
        <li><a href="">organizations</a></li>
        <li class="active"><a href="">others</a></li>
        <li><a href="">others2</a></li>
    </ul>
</div>

更新

请参阅带有“箭头”的更新的小提琴等等。如果您希望此功能也适用于 IE7，请添加 span 元素，而不是使用 :before 和 :after。

Maybe this fiddle provides some inspiration?

CSS:

#navigation li {
    background-color: #ffa500;
}
#navigation li.active+li,
#navigation li.active+li+li,
#navigation li.active+li+li+li,
#navigation li.active+li+li+li+li,
#navigation li.active+li+li+li+li+li {
    background-color: #757373;
}

HTML:

<div id="navigation">
    <ul>
        <li><a href="">professionals</a></li>
        <li><a href="">organizations</a></li>
        <li class="active"><a href="">others</a></li>
        <li><a href="">others2</a></li>
    </ul>
</div>

Update

See updated fiddle with the "arrow" and more. If you want this to work also in IE7, then add span elements instead of using :before and :after.

回复收藏 0 原文

南…巷孤猫 2024-11-24 17:19:35

解决方案
好的，问题解决了，这是我见过的最干净的技巧。我不需要向 php、类等添加任何其他内容。一位同事指出了解决方案。所需要的只是 z-index 和定位方面的一些技巧。感谢@peter 和@PeterSmith 的投入。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo menú</title>

<style type="text/css">

ul { list-style-type: none; }

ul li { display: inline; position: absolute; text-align: right; }

a { position: absolute; }

.uno { border: 1px #FF6600 solid; z-index: 4; width: 100px; }
a.uno:hover { background: #FF6600; }

.dos { border: 1px #FF6600 solid; z-index: 3; width: 200px; }
a.dos:hover { background: #FF6600; }

.tres { border: 1px #FF6600 solid; z-index: 2; width: 300px; }
a.tres:hover { background: #FF6600; }

.cuatro { border: 1px #FF6600 solid; z-index: 1; width: 400px; }
a.cuatro:hover { background: #FF6600; }

</style>

</head>

<body>
<ul>
<li><a href="" class="uno">PRUEBA 1</a></li>
<li><a href="" class="dos">PRUEBA 2</a></li>
<li><a href="" class="tres">PRUEBA 3</a></li>
<li><a href="" class="cuatro">PRUEBA 4</a></li>
</ul>
</body>
</html>

THE SOLUTION
Ok, problem solved and it was the cleanest trick I´ve seen. I did not need to add anything else to the php, classes or the like. The solution was pointed by a colleague. All that it was needed was some trickery with z-index and positioning. Thank @peter and @PeterSmith for your input.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo menú</title>

<style type="text/css">

ul { list-style-type: none; }

ul li { display: inline; position: absolute; text-align: right; }

a { position: absolute; }

.uno { border: 1px #FF6600 solid; z-index: 4; width: 100px; }
a.uno:hover { background: #FF6600; }

.dos { border: 1px #FF6600 solid; z-index: 3; width: 200px; }
a.dos:hover { background: #FF6600; }

.tres { border: 1px #FF6600 solid; z-index: 2; width: 300px; }
a.tres:hover { background: #FF6600; }

.cuatro { border: 1px #FF6600 solid; z-index: 1; width: 400px; }
a.cuatro:hover { background: #FF6600; }

</style>

</head>

<body>
<ul>
<li><a href="" class="uno">PRUEBA 1</a></li>
<li><a href="" class="dos">PRUEBA 2</a></li>
<li><a href="" class="tres">PRUEBA 3</a></li>
<li><a href="" class="cuatro">PRUEBA 4</a></li>
</ul>
</body>
</html>

回复收藏 0 原文