Форум русской поддержки Joomla!® CMS
06.12.2016, 18:11:02 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 379 раз)
0 Пользователей и 1 Гость смотрят эту тему.
andyester
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« : 20.07.2015, 13:43:44 »

Здравствуйте)

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

Буду очень благодарен за помощь.
Записан
andyester
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #1 : 20.07.2015, 14: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
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #2 : 20.07.2015, 14:29:04 »

andyester, можно и одной картинкой сделать:
Код
-webkit-filter: grayscale(50%);
-moz-filter: grayscale(50%);
-ms-filter: grayscale(50%);
filter: grayscale(50%);
Записан
andyester
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #3 : 20.07.2015, 14:32:57 »

дело в том что они в неактивном состоянии черно-белые, а в активном(при наведении мыши) постепенно загораются... дело в том как этот код реализовать в Joomla, чтобы пользователь из админки выбирал все насторойки
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #4 : 20.07.2015, 16:34:03 »

Из админки никак.
Записан
andyester
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #5 : 20.07.2015, 16:49:15 »

Разобрался ... сделал это меню с помощью модуля список материалов категории:
у каждого элемента этого модуля, то есть у материала, в параметрах есть 2 изображения image_intro и image_fulltext и добавляются они из админки
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet