VPF::Цвет ссылок в меню - Форум программистов

Самозванка

Дата 26.12.2007, 16:58 (ссылка)

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

Загрузка ...

Девушка в стиле IT

Профиль
Группа: Завсегдатай
Сообщений: 484
Регистрация: 5.9.2006
Где: USA

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

Есть меню, вертикальное в одну колонку с подуровнями. Хочу сделать , что при нажатии на ссылку первого уровня, ссылка становилась другого цвета, и пока я работаю с подменю она этого цвета и оставалась. А в подменю, нажатая ссылка становилась тоже такого же цвета а фон под ней белым.

Как такое осуществить?

Код меню:

Код


                      <div id="menu_body">
<ul>
  <li><a href="#" onclick="openMenu('sub_menu_1');return(false)">О компании</a> 
      <ul id="sub_menu_1">
          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>
          <li><a href="#">sub menu 3</a></li>
</ul>
  </li>
  <li><a href="#" onclick="openMenu('sub_menu_2');return(false)">Поставщики</a>
      <ul id="sub_menu_2">
     </ul>
  </li>
  <li><a href="#" onclick="openMenu('sub_menu_3');return(false)">Новости</a>
     <ul id="sub_menu_3">
          <li><a href="#">Новости компании</a></li>
          <li><a href="#">Новости поставщиков</a></li>
          <li><a href="#">Новости полиграфии</a></li>
          <li><a href="#">Архив новостей</a></li>
    </ul>
  </li>
  <li><a href="#" onclick="openMenu('sub_menu_4');return(false)">Публикации</a>
    <ul id="sub_menu_4"> 
          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>
          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>
          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>
          <li><a href="#">sub menu 7</a></li>
    </ul>
 </li>
 <li><a href="#" onclick="openMenu('sub_menu_5');return(false)">Информация (PDF)</a>
    <ul id="sub_menu_5">
          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>
          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>
          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>
          <li><a href="#">sub menu 7</a></li>
    </ul>
  </li>
<li><a href="#" onclick="openMenu('sub_menu_6');return(false)">Форум</a>
    <ul id="sub_menu_6">
   </ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_7');return(false)">Регистрация, On-line консультации</a>
    <ul id="sub_menu_7">
   </ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_8');return(false)">Вакансии</a>
     <ul id="sub_menu_8">
      </ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_9');return(false)">Информационные партнёры</a>
     <ul id="sub_menu_9">
      </ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_10');return(false)">Контакты</a>
     <ul id="sub_menu_10">
      </ul>
</li>
</ul>
</div>

Код


    #menu_body ul li a:active
    {
     color:#A80230;font-weight: bold;  
    }
#menu_body{background:#DCDCDC;width:201px}
#menu_body ul li{list-style-type:none;border-bottom:1pt solid #7F7F7F;margin-left:-40px; padding-left:21px; height: 24px;}
#menu_body ul li a{color:#000;font-family:verdana; font-size:10pt; font-weight: regular;  text-decoration:none}
#menu_body ul li a:hover
    {
     color:red;
    }
#menu_body ul li ul li{border-bottom:0pt;list-style:none;color:#fff;list-style-position:inside;margin-left:-90px;}
#menu_body ul li ul{border-top:0px solid #fff;padding-left:20px}

--------------------

Неуёмная жажда жизни!

smile

Str!pe

Дата 26.12.2007, 17:01 (ссылка)

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

Загрузка ...

профиль удален

Профиль
Группа: Участник
Сообщений: 2426
Регистрация: 12.6.2005
Где: На земле.

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

Самозванка, браузеры сами меняют цвет ссылки на которую нажал пользователь smile

--------------------

Со мной можно связаться по скайпу или по аське.
Занимаюсь продвижением сайтов - самой таргетированной рекламой.

WebDisaster

Дата 26.12.2007, 17:37 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(Самозванка @ 26.12.2007, 16:58

)

Как такое осуществить?

Способ зависит от того, как этот сайт сделан ("статичный" или на движке).

В статичном сайте для "родительского" элемента назначается свой класс или id (<a class="">), где описываются все стили. Сам class назначается для данной ссылки (<a>) на всех страницах, открываемых из данного меню и подменю.

Если сайт на движке -- задайте этот вопрос своему backend-developer'у (пусть он получает адрес текущей страницы и в зависимости от него переопределяет стили).

Это сообщение отредактировал(а) WebDisaster - 26.12.2007, 17:38

bars80080

Дата 26.12.2007, 17:46 (ссылка)

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

Загрузка ...

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

Награды: 1

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

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

а где js код?

можно к примеру, на ссылки навесить id, а в твоих функциях прописать изменить цвет на такой-то,
если выбор другого меню, то у других заголовков цвет вернуть в обычный,
а выбранного установить новый

афаик: исключительно вопрос по js, с css здесь несоветую мудохаться

SelenIT

Дата 26.12.2007, 17:48 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Str!pe,

Цитата(Str!pe @ 26.12.2007, 17:01

)

браузеры сами меняют цвет ссылки на которую нажал пользователь

Оно так, но вебмастер может указать, на какой именно ;)

Самозванка,

Цитата(Самозванка @ 26.12.2007, 16:58

)

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

Только через JavaScript. Нужно добавить одну-две строчки в ф-цию openMenu. Если понадобится менять не только цвет, то лучше реализовать это добавлением/удалением дополнительного CSS-класса.

Цитата(Самозванка @ 26.12.2007, 16:58

)

А в подменю, нажатая ссылка становилась тоже такого же цвета а фон под ней белым.

Нажатой ссылке соответствует псевдокласс a:active, иногда для подстраховки и кроссбраузерности есть смысл продублировать те же стили для a:focus. Важна последовательность указания псевдоклассов для ссылок - :link (обычная), :visited (посещенная), :hover (наведенная), :fоcus (нажатая или выбранная Tab-ом), :active (только что сработавшая).

Добавлено @ 17:52

Цитата(bars80080 @ 26.12.2007, 17:46

)

на ссылки навесить id

Имхо в данной верстке лишнее. Можно добавить ссылку на this в вызов openMenu, можно обойтись и без него (нужная ссылка всегда будет в parentNode.getElementsByTagName('a')[0] показываемого/скрываемого ul-а).

Это сообщение отредактировал(а) SelenIT - 26.12.2007, 17:53

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

WebDisaster

Дата 26.12.2007, 20:47 (ссылка)

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

Загрузка ...

Опытный

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

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

Мда... как всегда. Опять, похоже, понял задачу совсем не так, как все остальные smile

А я решил, что требуется на страницах, открытых из "дочернего" подменю, выделять в меню "родительский" элемент. Как говорится, у кого что болит, тот о том... smile

Самозванка

Дата 27.12.2007, 15:42 (ссылка)

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

Загрузка ...

Девушка в стиле IT

Профиль
Группа: Завсегдатай
Сообщений: 484
Регистрация: 5.9.2006
Где: USA

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

JS код

Код


<script type="text/javascript">
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3','sub_menu_4','sub_menu_5','sub_menu_6','sub_menu_7','sub_menu_8','sub_menu_9','sub_menu_10');
function allclose() {
    for (i=0; i < id_menu.length; i++){
        document.getElementById(id_menu[i]).style.display = "none";
    }
}
function openMenu(id){
    for (i=0; i < id_menu.length; i++){
        if (id != id_menu[i]){
            document.getElementById(id_menu[i]).style.display = "none";
        }
    }
    if (document.getElementById(id).style.display == "block"){
        document.getElementById(id).style.display = "none";
    }else{
        document.getElementById(id).style.display = "block"; 
    }
}
</script>

Как прописать в нем стили для ссылки? Можно одну ссылку для примерчика, плиз?

--------------------

Неуёмная жажда жизни!

smile

SelenIT

Дата 27.12.2007, 15:59 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Самозванка, для HTML из Вашего первого поста можно так:

Код


a.currentlink { color: red; /* и вообще любые стили для выбранной ссылки главного меню */ }

Код


function openMenu(id){
    for (i=0; i < id_menu.length; i++){
        if (id != id_menu[i]){
            document.getElementById(id_menu[i]).style.display = "none";
        }
    } // без этого цикла, конечно, можно обойтись, ну да ладно... ;)
    var submenu = document.getElementById(id); // зачем лишние вызовы getElementById?
    var menulink = submenu.parentNode.getElementsByTagName('a')[0];
    if (submenu.style.display == "block"){
        submenu.style.display = "none";
        menulink.className = menulink.className.replace(/\s*currentlink/, '');
    }else{
        submenu.style.display = "block";
        menulink.className += ' currentlink';
    }
}

Это сообщение отредактировал(а) SelenIT - 27.12.2007, 16:02

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

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