VPF::Помогите с меню - Форум программистов

shimochka

Дата 4.11.2010, 00:27 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 22.7.2009

Репутация: нет
Всего: нет

Помогите пожалуйста с меню
Нужно чтобы при нажатии на пункт меню пункт подсвечивался
и оставался активным графическим фоном
Подскажите что в стилях прописать

Код


<ul class="menu_top">
<li id="current"><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>ПУНКТ1</span></a></li>
<li><a href="#"><span>ПУНКТ2</span></a></li>
<li><a href="#"><span>ПУНКТ3</span></a></li>
<li><a href="#"><span>ПУНКТ4</span></a></li>
<li><a href="#"><span>ПУНКТ5</span></a></li>
<li><a href="#"><span>ПУНКТ6</span></a></li></ul>

Код


ul.menu_top{width:auto;padding:0; margin:0;}
ul.menu_top li  {display: inline;list-style-type: none;}
ul.menu_top li a{display:block;float:left;line-height:21px;height:21px;margin:0 3px 3px 0;font-family:Arial, sans-serif;font-size:12px;font-style: text-decoration:none;color:#000;padding:0 9px 0 0}
ul.menu_top li a span{display:block;float:left;line-height:21px;height:21px;padding:0 0 0 9px;margin:0;cursor:pointer}
ul.menu_top li a:hover, ul.menu_top li#current a {background: url("../images/rb.png") 100% 50% no-repeat;text-decoration:none;color:#ff7800;}
ul.menu_top li a:hover span, ul.menu_top li#current a span{background: url("../images/lb.png") 0% 50% no-repeat;}

bars80080

Дата 4.11.2010, 13:26 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

это делается через javascript

самое простое относительно условий задачи:

Код


<li><a href="#"><span onclick="this.className='qw';">ПУНКТ1</span></a></li>

где в классе .qw {} вы можете прописать что-угодно

shimochka

Дата 6.11.2010, 17:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 22.7.2009

Репутация: нет
Всего: нет

Проблему решила на половину подключила скрипт

Код


<script> 
onload = function () 
{ 
for (var lnk = document.links, j = 0; j < lnk.length; j++) 
if (lnk [j].href == document.URL) lnk [j].style.color = 'red'; 
} 
</script>

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

bars80080

Дата 6.11.2010, 17:54 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

попробуйте так:

Код


for (var lnk = document.links, j = 0; j < lnk.length; j++) 
    // здесь можно выставить фон для неактивной ссылки
    lnk[j].style.background = '#ffffff'; // фон по умолчанию
    // здесь для выбранной ссылки
    if (lnk[j].href == document.URL) {
        lnk[j].style.color = 'red'; 
        lnk[j].style.background = '#ffff00'; // или yellow
    }
}

shimochka

Дата 7.11.2010, 08:52 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 22.7.2009

Репутация: нет
Всего: нет

Попробовала и теперь все ссылки
под белым фоном. У меня получаеться как бы Главная
под идентификатором  id="current" и подсвечивается
фоновым изображением, а как передать остальным
ссылкам  фоновое изображение когда они активны

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »