Search code examples
cssmenubar

How to have a changing background on a menu depending on selected item

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

Solution

  • 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>