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

andyester

  • Новичок
  • 4
  • 0 / 0
Интерактивное меню
« : 20.07.2015, 12:43:44 »
Здравствуйте)

Столкнулся с проблемой по поводу реализации интерактивного меню.
Хочется чтобы в качестве кнопки выступало изображение(иконка) и при наведении на нее мышкой она менялась на другую.
Перепробовал многие модули но реализовать так и не получилось.
Может кто сталкивался с такой задачей и знает как это реализовать.

Буду очень благодарен за помощь.
*

andyester

  • Новичок
  • 4
  • 0 / 0
Re: Интерактивное меню
« Ответ #1 : 20.07.2015, 13:12:38 »
Код
HTML

<div class="uslugi_main" align="center">
         <div class="menu" align="center">
            <a href="naruzhka.html">
                <div class="animate2" align="center">
                <img class="first" src="images/icon_3x6_color.png" />
                <img class="second" src="images/icon_3x6.png" />
                <div class="podstr">
                <h4>Наружная реклама</h4>
                <h5>Эффективный способ заявить о себе!</h5>
                </div>
            </div>
            </a>
            <a href="#">
            <div class="animate2">
                <img class="first" src="images/icon_poligra_color.png" />
                <img class="second" src="images/icon_poligra.png" />
                <div class="podstr">
                <h4>Полиграфия</h4>
                <h5>Медленно, дорого, КАЧЕСТВЕННО!</h5>
                </div>
            </div>
            </a>
            <a href="#">
            <div class="animate2">
                <img class="first" src="images/icon_razrabotka_saytov_color.png" />
                <img class="second" src="images/icon_razrabotka_saytov-01.png" />
                <div class="podstr">
                <h4>Разработка сайтов</h4>
                <h5>Мы делаем - Вы зарабатываете!</h5>
                </div>
            </div>
            </a>
            <a href="#">
            <div class="animate2">
                <img class="first" src="images/icon_produkziya_color.png" />
                <img class="second" src="images/icon_produkziya.png" />
                <div class="podstr">
                <h4>POS - МАТЕРИАЛЫ</h4>
                <h5>Рекламная продукция</h5>
                </div>
            </div>
            </a>
        </div>
    </div>


Код
CSS

.uslugi_main{overflow:hidden;}
.animate2{
  display: inline-block;
  position:relative;
  width: 300px;
  height: 190px;
}
.animate2 img {
  position:absolute;
  top:0px;
  left:75px;
}
.animate2 img.first {
  opacity:0;
  filter:alpha (opacity=0);
}
.animate2:hover img.first {
  opacity:1;
  filter:alpha (opacity=100);
}
.animate2:hover img.second, .animate2 img.second:hover {
  opacity:0;
  filter:alpha (opacity=0);
}
.animate2:hover img.second, .animate2 img.second:hover {
  opacity:0;
  filter:alpha (opacity=0);
  -moz-transition: all 1.5s ease;
  -webkit-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}







Вот так должно быть
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Интерактивное меню
« Ответ #2 : 20.07.2015, 13:29:04 »
andyester, можно и одной картинкой сделать:
Код: css
-webkit-filter: grayscale(50%);
-moz-filter: grayscale(50%);
-ms-filter: grayscale(50%);
filter: grayscale(50%);
*

andyester

  • Новичок
  • 4
  • 0 / 0
Re: Интерактивное меню
« Ответ #3 : 20.07.2015, 13:32:57 »
дело в том что они в неактивном состоянии черно-белые, а в активном(при наведении мыши) постепенно загораются... дело в том как этот код реализовать в Joomla, чтобы пользователь из админки выбирал все насторойки
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Интерактивное меню
« Ответ #4 : 20.07.2015, 15:34:03 »
Из админки никак.
*

andyester

  • Новичок
  • 4
  • 0 / 0
Re: Интерактивное меню
« Ответ #5 : 20.07.2015, 15:49:15 »
Разобрался ... сделал это меню с помощью модуля список материалов категории:
у каждого элемента этого модуля, то есть у материала, в параметрах есть 2 изображения image_intro и image_fulltext и добавляются они из админки
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Пункт меню Текстовый разделитель ведет на главную страницу

Автор zahar_92

Ответов: 8
Просмотров: 2406
Последний ответ 27.07.2023, 13:37:17
от ei-dos
[РЕШЕНО]Скрыть пункт меню на мобильных устройствах

Автор lexxbry

Ответов: 16
Просмотров: 4625
Последний ответ 23.05.2023, 07:22:49
от geral
Цвет фона меню

Автор IhorPH

Ответов: 7
Просмотров: 1082
Последний ответ 21.03.2023, 11:47:29
от marksetter
OffCanvas меню Helix Ultimate добавить текст к иконке

Автор Andre100

Ответов: 2
Просмотров: 2103
Последний ответ 20.03.2023, 12:42:49
от Andre100
OffCanvas меню

Автор Алексей Лоскутов

Ответов: 5
Просмотров: 2145
Последний ответ 13.02.2023, 20:20:37
от dashkov