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

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

Меню с картинками на чистом CSS в строчку

 (Прочитано 1611 раз)
0 Пользователей и 1 Гость смотрят эту тему.
rubinded
Осваиваюсь на форуме
***

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

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



« : 19.02.2015, 18:26:46 »

Здравствуйте ребята. Хочу сделать меню на главной странице сайта в виде картинок которые при наведении сменяются текстом. Должна получится своего рода плитка с анимацией. Но, возникла проблема: плитки (элементы) размещаются один под одним, а нужно с лева на право (горизонтально).

ВОПРОС:  как эти элементы разместить в горизонтальном порядке? И еще нужно чтоб на малых экранах (смартфонах) они спрыгивали вниз (в зависимости от ширины экрана). Помогите пожалуйста разобраться... !

Код HTML:
Код:
<div>
<figure>
 <img src="http://rybalc1n.bget.ru/images/logos_menu/auto.png">
 <figcaption>
  <h2>АВТО</h2>
   <p><a href="#">Автомойки</a></p>
   <p><a href="#">Автосалоны</a></p>
   <p><a href="#">Автосервисы</a></p>
   <p><a href="#">Автостайлинг</a></p>
   <p><a href="#">Автостоянки</a></p>
   <p><a href="#">Автошколы</a></p>
  <a href="#">Ссылка »</a>
 </figcaption>
</div>
<div><figure>
 <img src="http://rybalc1n.bget.ru/images/logos_menu/perevozki.png">
 <figcaption>
  <h2>ПЕРЕВОЗКИ</h2>
   <p><a href="#">Пасажирские</a></p>
   <p><a href="#">Грузовые</a></p>
   <a href="#">Ссылка »</a>
 </figcaption>
</div>

Код CSS:
Код:
figure {
width: 200px;
height: 200px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: left;
box-shadow: 1px 1px 3px #ccc;
border: 4px solid #fff;
cursor: default;
font:normal 11px/15px Helvetica, Arial, sans-serif;
}

figure figcaption,
figure figcaption img{
width: 200px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #eee;

-moz-transform:    translateX(-350px);
-o-transform:      translateX(-350px);
-webkit-transform: translateX(-350px);
transform:         translateX(-350px);
 
visibility:hidden; 

-webkit-transition: all 0.4s ease-out;
   -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
     -o-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
}

figure img {
display: block;
position: relative;
   
-webkit-transition: all 0.4s ease-out;
   -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
     -o-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
}

figure h2 {
text-transform: uppercase;
color: #333;
position: relative;
font-size: 25px;
letter-spacing: 1px;
margin: 20px 0 0 20px;
}

figure p {
font-size: 18px;
line-height: 17px;
position: relative;
color: #333;
margin: 10px 0 10px 20px;
width:310px;
   
-webkit-transition: all 0.4 ease-out;
   -moz-transition: all 0.4 ease-out;
    -ms-transition: all 0.4 ease-out;
     -o-transition: all 0.4 ease-out;
        transition: all 0.4 ease-out;
}

figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 0 10px 20px;
}

figure a:hover {
color: #E88F00;   
border-bottom: 1px dotted #9F1D35;
}

figure:hover figcaption,
figure:hover figcaption img{
-moz-transform:    translateX(0);
-o-transform:      translateX(0);
-webkit-transform: translateX(0);
transform:         translateX(0);
visibility:visible;
}

figure:hover img {
-moz-transform:    translateX(350px);
-o-transform:      translateX(350px);
-webkit-transform: translateX(350px);
transform:         translateX(350px);
}

figure:hover p{
opacity: 1;
}   
Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #1 : 19.02.2015, 18:36:32 »

Добавь
Код
figure p {
display: inline-block;
 
Почитай http://htmlbook.ru/content/blochnye-elementy
Записан
rubinded
Осваиваюсь на форуме
***

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

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



« Ответ #2 : 19.02.2015, 20:05:13 »

К сожалению не помогло... Я думаю тут нужно в HTML что-то править.
Записан
umbabaraumba
Практически профи
*******

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

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

если помог можете поставить +


« Ответ #3 : 19.02.2015, 20:21:26 »

У вас верстка Неправильная.
Сначала идет figure в котором одна картинка, а потом div внутри которого опять figure с другой картинкой
Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #4 : 19.02.2015, 20:21:40 »

Забыть о табличной верстке! (убрал)
Код
figure {
display: inline-block;
   float: left;}
 
http://bit.ly/1G85mx5
Записан
rubinded
Осваиваюсь на форуме
***

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

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



« Ответ #5 : 19.02.2015, 22:16:58 »

Спасибо Вам ОГРОМНОЕ, ShfVD! Проблема полностью решена! очень Вам благодарен, что нашли время! С меня "+".  Cheesy
Записан
rubinded
Осваиваюсь на форуме
***

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

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



« Ответ #6 : 22.10.2015, 20:56:12 »

Подскажите пожалуйста, можно ли сделать так, чтоб анимация происходила не при наведении мышки, а при клике? Очень нужно...
Записан
umbabaraumba
Практически профи
*******

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

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

если помог можете поставить +


« Ответ #7 : 22.10.2015, 21:03:05 »

Подскажите пожалуйста, можно ли сделать так, чтоб анимация происходила не при наведении мышки, а при клике? Очень нужно...
На jQuery можно так сделать, тут есть примеры
Записан
ShfVD
Живу я здесь
******

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

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



« Ответ #8 : 22.10.2015, 21:29:55 »

К сожалению не нашел у себя того примера, навскидку - попробовать :hover заменить на Псевдокласс :active
(http://htmlbook.ru/css/active)
Записан
rubinded
Осваиваюсь на форуме
***

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

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



« Ответ #9 : 22.01.2016, 14:21:44 »

Здравствуйте. Подскажите пожалуйста, как сделать так чтоб блоки выравнивались на странице по центру так как это сделано в этом шаблоне: http://www.rudebox.org.ua/demo/as-create-adaptive-template-site-css3/  На своем сайте я не могу так сделать: http://rybalc5n.bget.ru/index.php/ru/ Дело в том, что мои блоки выравниваются ВЛЕВО, а нужно ПО ЦЕНТРУ и в зависимости от разрешения экрана должны "спрыгивать" вниз. Очень нужно. Помогите мне пожалуйста.
Записан
rubinded
Осваиваюсь на форуме
***

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

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



« Ответ #10 : 11.03.2016, 16:53:34 »

Нашел решение  Cheesy Эффективнее всего это реализовать через сетку Bootstrap. Кому нужна более подробная консультация пишите, с радостью помогу.
Записан
Страниц: [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