Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Помогите с меню

Автор: shimochka 4.11.2010, 00:27

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

Код


<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

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

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

Код


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

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

Автор: shimochka 6.11.2010, 17:47

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

Код


<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

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

Код


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

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