Интерактивное меню

  • 5 Ответов
  • 570 Просмотров

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

Интерактивное меню
« : 20.07.2015, 14:43:44 »
Здравствуйте)

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

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

Re: Интерактивное меню
« Ответ #1 : 20.07.2015, 15: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

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Re: Интерактивное меню
« Ответ #2 : 20.07.2015, 15:29:04 »
andyester, можно и одной картинкой сделать:
Код: (css) [Выделить]
-webkit-filter: grayscale(50%);
-moz-filter: grayscale(50%);
-ms-filter: grayscale(50%);
filter: grayscale(50%);
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

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

*

Оффлайн Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Re: Интерактивное меню
« Ответ #4 : 20.07.2015, 17:34:03 »
Из админки никак.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

Re: Интерактивное меню
« Ответ #5 : 20.07.2015, 17:49:15 »
Разобрался ... сделал это меню с помощью модуля список материалов категории:
у каждого элемента этого модуля, то есть у материала, в параметрах есть 2 изображения image_intro и image_fulltext и добавляются они из админки