Как изменить фон меню в зависимости от выбранного пункта - PullRequest
Новая
       11

Как изменить фон меню в зависимости от выбранного пункта

2 голосов
/ 28 июня 2011

Это меня пугает, и я не вижу пути. Это первый раз, когда я задаю вопрос, поэтому поправьте меня, если я не следую протоколу. Спасибо !!!

Мне нужно, чтобы фон меню менялся в соответствии с выбранным элементом, поэтому, когда он активен, элементы слева будут отображаться оранжевым, а элементы справа - серым.

Кроме того, треугольник, разделяющий цвета, должен находиться справа от активного пункта меню.

По первому элементу это просто, но по второму и следующему я не могу заставить код работать, так как он пересекает границы меню.

Например, у меня есть [отдельные лица] [empresas] [корредоры] [провидоры]

Когда empresas активен, отдельные и empresas должны быть оранжевого цвета, в то время как corredores и Verifiedores должны быть серого цвета.

Если выбраны corredores, то отдельные, empresas и corredores должны быть оранжевого цвета, в то время как провидоры серого цвета.

Я хотел опубликовать изображение для иллюстрации, но, как новичок, мне не разрешено. 

#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;
}

Это хорошо First active element appears correctly

Это не так, видите, что ИНДИВИДУОС должен быть оранжевым Second element is missing orange on the left for first element

Ответы [ 3 ]

1 голос
/ 29 июня 2011

Может быть эта скрипка дает некоторое вдохновение?

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.

1 голос
/ 30 июня 2011

РЕШЕНИЕ Хорошо, проблема решена, и это был самый чистый трюк, который я видел.Мне не нужно было добавлять что-либо еще в 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>
0 голосов
/ 28 июня 2011

Edit: только что увидел ваш последний комментарий ниже о .active класс.

Если вы можете добавить некоторый javascript на свои страницы, вы можете выполнить цикл for для каждого элемента li, добавляя «оранжевый» к его классу, пока не найдете класс .active, тогда остальные получатсерый "добавлен в класс.Я попробую скрипач позже, когда у меня будет немного свободного времени

...