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

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. Удачи!)
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как убрать маркер только из одного пункта меню.

Автор kuraev64

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

Автор nesskafe

Ответов: 9
Просмотров: 271
Последний ответ 01.06.2020, 11:03:58
от sivers
[Решено] Слетает правый сайдбар на шаблоне protostar

Автор Mick_20

Ответов: 4
Просмотров: 1016
Последний ответ 28.05.2020, 15:45:06
от Muzzy
[Решено] Как сделать чтобы фотография открылась в отдельном окне?

Автор a-two

Ответов: 10
Просмотров: 314
Последний ответ 19.05.2020, 16:46:36
от a-two
Проблема с меню на сайте и иконками Awesome

Автор Lemonez

Ответов: 1
Просмотров: 550
Последний ответ 10.02.2020, 05:02:12
от Lemonez