[Решено] Меню с бегающими картинками

userxp

Живу я здесь
2019
403 / 6
Злой и ужасный бармалей

[Решено] Меню с бегающими картинками

« : 15.02.2006, 23:12:23 »

Добавляем немного интересной динамичности в меню.
Что реализуется:
при наведении курсором на меню слева будет "бегать" вверх/вниз некая картинка напротив соотв. пункта меню.

начнём с того, что строка вертикального меню отображается в ячейке <td> вот таким образом:
<a href="/" class="mainlevel" id="active_menu">Главная</а>
где class="mainlevel" - это для всех строчек и id="active_menu" - это только для текущего выбранного меню.

теперь берём наш файл стилей шаблона template_css.css и пишем/заменяем в нём:
/* стандартное меню */
a.mainlevel {
   display: block;
   padding-left: 13px; /* оставляем слева место под изображение */
}
a.mainlevel:hover {
   background: url(../images/arrw.gif) no-repeat; /* изображение появляется слева от текста при наведении курсора */
}
/* оформление текущего выбранного пункта меню */
a#active_menu {
   background: url(../images/arrw.gif) no-repeat; /* статич. изображение напротив текущего меню */
}
a#active_menu:hover {
   background: url(../images/arrw.gif) no-repeat; /* изображение при "наезде" на текущее меню */
}
../images/arrw.gif - это путь http://ваш_сайт/templates/имя_шаблона/images/arrw.gif
файлы изображений - по желанию

ну а дальше только ваша фантазия...

зы. ПРОВЕРЕНО, мин нет в Internet Explorer 6, FireFox 1.5, Opera Browser 8.01.

« Последнее редактирование: 06.11.2009, 15:24:32 от PaLyCH »

Записан

Как правильно задавать вопрос службе технической поддержки

SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3

Re: Меню с бегающими картинками

« Ответ #1 : 23.03.2007, 23:36:24 »

помогите мне чайнику как зделать так чтобы на одной странице можно было зделать разные кнопки тобиш где 1.gif ,2.gif, 3.gif, 4.gif, чтобы загружались разные рисунки а не так как у меня сейчас прописано 3.gif и 4.gif а загружается всеровно 1.gif 2.gif. вот код

конецформыначалоформы<style type="text/css">
A.rollover {
background: url('1.gif'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 196px; /* Ширина рисунка */
height: 183px; /* Высота рисунка */
border: 1px solid #000; /* Рамка вокруг картинки */
}

A.rollover:hover {
background: url('2.gif'); /* Путь к файлу с заменяемым рисунком */
}
</style>
</head>
<body>
<a href="#" class="rollover"> </a>

<style type="text/css">
A.rollover {
background: url('3.gif'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 196px; /* Ширина рисунка */
height: 183px; /* Высота рисунка */
border: 1px solid #000; /* Рамка вокруг картинки */
}

A.rollover:hover {
background: url('4.gif'); /* Путь к файлу с заменяемым рисунком */
}
</style>
</head>
<body>
<a href="#" class="rollover"> </a>

Записан

Gelendrast

Осваиваюсь на форуме
34
0 / 0

Re: Меню с бегающими картинками

« Ответ #2 : 05.02.2009, 19:03:16 »

Скажите,как сделать,чтобы под картинкой не было бордера,т.е как бы отдельно от линка(чтобы бордер было только под линком))

« Последнее редактирование: 05.02.2009, 19:59:51 от Gelendrast »

Записан

Falcon_85

Новичок
4
0 / 0

Re: Меню с бегающими картинками

« Ответ #3 : 12.10.2009, 13:27:16 »

Найди в коде CSS там должно быть типо того:
{border-bottom: ?px,?,?; border-left: ?px,?,?;}
убери border-left или выстави значение px на 0. Удачи!)

Записан

Кликабельность псевдоэлемента в пункте меню Автор vasilii.pupkov	Ответов: 4 Просмотров: 7370	29.12.2021, 23:15:38 от v42bis
Выпадающее меню Автор DrShepard	Ответов: 10 Просмотров: 6257	20.10.2021, 12:36:16 от DrShepard
Как закруглить края выпадающего меню? Автор coliandra	Ответов: 1 Просмотров: 4459	11.12.2020, 21:15:57 от effrit
При прокрутке страницы виджет залезает на меню Автор coliandra	Ответов: 2 Просмотров: 4160	27.11.2020, 11:33:58 от coliandra
[Решено] Как сделать чтобы фотография открылась в отдельном окне? Автор a-two	Ответов: 11 Просмотров: 3780	03.11.2020, 16:57:40 от Nikolay89

[Решено] Меню с бегающими картинками - Вопросы по CSS

Новости Joomla

Process Forge — фреймворк для создания AI-процессов.

Вышла новая версия joomLab Article Slider 1.1.0

Компонент Joomla 6: Генератор LLMs.txt.

userxp

[Решено] Меню с бегающими картинками

Re: Меню с бегающими картинками

Gelendrast

Re: Меню с бегающими картинками

Falcon_85

Re: Меню с бегающими картинками

Похожие темы