7 июня 2013 в 16:37
Поделитесь ценными мыслишками... Создал меню из картинок, всё работает хорошо, но мне нужно что-бы при переходе по ссылке и отображении текущей страницы изначальная картинка-кнопка менялась на активную(тобеж другую)... Псевдокласс :hover работает хорошо, при наведении на картинку она меняется, но вот при переходе по этой ссылке всё остаётся как и прежде, пробовал Псевдокласс :active но как я понимаю он справедлив только для текстовых ссылок... короче ничего не получилось... Второй день уже бьюсь с проблемой, может кто сталкивался...
Комментарии
А разве в главном меню ссылкам не назначается класс active когда находишься по пути этой ссылки?
Опубликуйте код вашего меню. Прямо начиная с ul , ну и что бы текущая ссылка тоже туда попала.
можно даже сказать что это не меню, а картинки со ссылками... вот код
<div id="menu"> <a href="http://3d-tour.pro/gallery" title="Галерея" class="gallery"> </a></div>
<div id="menu"> <a href="http://3d-tour.pro/" title="На главную" class="home"> </a></div>
///css///
.gallery{
background: url("/sites/default/files/img/ico_gallery_hower.png") no-repeat scroll 0 0 transparent;
float: right;
height: 130px;
margin-right: 38px;
width: 130px;
}
.contact{
background: url("/sites/default/files/img/ico_contact_hower.png") no-repeat scroll 0 0 transparent;
float: right;
height: 130px;
margin-right: 38px;
width: 130px;
}
.home{
background: url("/sites/default/files/img/ico_home_hower.png") no-repeat scroll 0 0 transparent;
float: right;
height: 130px;
margin-right: 38px;
width: 130px;
}
.home:hover{
background: url("/sites/default/files/img/ico_home_hower.png") no-repeat scroll 0 0 transparent;
}
.contact:hover{
background: url("/sites/default/files/img/ico_contact_hower.png") no-repeat scroll 0 0 transparent;
}
.gallery:hover{
background: url("/sites/default/files/img/ico_gallery_hower.png") no-repeat scroll 0 0 transparent;
}
Вот не правильно у вас сделано.
Не стоит подменять таким образом меню.
id - должны быть уникальны для страницы.
Установите модуль https://drupal.org/project/menu_attributes, он позволит каждому пункту меню назначить отдельный class или id - это как больше нравится. А потом для соответствующих классов пропишите стили (это у вас уже сделано, но их наверняка придётся корректировать).
И проблемы с active решаться автоматически, поскольку ссылкам в меню, друпал автоматом устанавливает класс active, если это активная ссылка.
А для ссылок, что бы текст не мешался можно использовать стиль (main-menu - это выдуманный класс)
text-indent: 10000px;
display: block;
}
По поводу class или id можно почитать тут тут и тут
спасибо за подсказку, сейчас буду пробовать...
подскажите, а как картинку отделить от самой ссылки? либо увеличить поле ссылки, чтобы была видна вся картинка, у меня получается вот, что:
http://s019.radikal.ru/i600/1306/e0/54857b6a8443.jpg
задайте ссылке высоту и ширину соответствующие размерам картинки. При этом свойство display:block;
всё, спасибо!!! разобрался, нужно было только поиграться с css!
В заголовке напишите [РЕШЕНО]. Тут так принято.