0 Пользователей и 1 Гость просматривают эту тему.
  • 3 Ответов
  • 10791 Просмотров
*

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
Добавляем немного интересной динамичности в меню.
Что реализуется:
при наведении курсором на меню слева будет "бегать" вверх/вниз некая картинка напротив соотв. пункта меню.

начнём с того, что строка вертикального меню отображается в ячейке <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 »
Как правильно задавать вопрос службе технической поддержки  yes!
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. Удачи!)
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как закруглить края выпадающего меню?

Автор coliandra

Ответов: 1
Просмотров: 188
Последний ответ 11.12.2020, 21:15:57
от effrit
При прокрутке страницы виджет залезает на меню

Автор coliandra

Ответов: 2
Просмотров: 160
Последний ответ 27.11.2020, 11:33:58
от coliandra
[Решено] Как сделать чтобы фотография открылась в отдельном окне?

Автор a-two

Ответов: 11
Просмотров: 410
Последний ответ 03.11.2020, 16:57:40
от Nikolay89
Как убрать маркер только из одного пункта меню.

Автор kuraev64

Ответов: 2
Просмотров: 463
Последний ответ 20.07.2020, 11:18:44
от kuraev64
Проблема с меню на сайте

Автор nesskafe

Ответов: 9
Просмотров: 347
Последний ответ 01.06.2020, 11:03:58
от sivers