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

rubinded

Захожу иногда
54
0 / 0

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

« : 19.02.2015, 17: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

Давно я тут
871
65 / 0

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

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

Добавь

Код: css

figure p {
display: inline-block;

Почитай http://htmlbook.ru/content/blochnye-elementy

Записан

rubinded

Захожу иногда
54
0 / 0

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

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

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

Записан

umbabaraumba

Живу я здесь
2415
153 / 1
если помог можете поставить +

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

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

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

Записан

Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

ShfVD

Давно я тут
871
65 / 0

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

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

Забыть о табличной верстке! (убрал)

Код: css

figure {
display: inline-block;
    float: left;}

http://bit.ly/1G85mx5

Записан

rubinded

Захожу иногда
54
0 / 0

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

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

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

Записан

rubinded

Захожу иногда
54
0 / 0

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

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

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

Записан

umbabaraumba

Живу я здесь
2415
153 / 1
если помог можете поставить +

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

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

Цитата: rubinded от 22.10.2015, 19:56:12

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

На jQuery можно так сделать, тут есть примеры

Записан

Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

ShfVD

Давно я тут
871
65 / 0

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

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

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

Записан

rubinded

Захожу иногда
54
0 / 0

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

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

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

Записан

rubinded

Захожу иногда
54
0 / 0

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

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

Нашел решение

Эффективнее всего это реализовать через сетку Bootstrap. Кому нужна более подробная консультация пишите, с радостью помогу.

Записан

[Решено] title материалов и категорий без пунктов меню Автор pharaoh	Ответов: 269 Просмотров: 69672	03.02.2022, 02:45:26 от globus812
Как добавить описание к пункту меню в Joomla 2.5? (Как у материалов)? Автор nia	Ответов: 7 Просмотров: 6610	29.03.2021, 12:10:26 от sivers
В моб версии не откриваються норм меню Автор umsbeauty	Ответов: 0 Просмотров: 1730	11.01.2021, 17:55:15 от umsbeauty
Убрать название пункта меню из URL материала Автор fortuner	Ответов: 15 Просмотров: 9537	31.10.2020, 00:46:04 от spas
Проблемка с правым меню Автор V_V	Ответов: 3 Просмотров: 1909	03.12.2019, 06:24:56 от Vovolsort

Меню с картинками на чистом CSS в строчку - Joomla 2.5: Настройка и оптимизация

Новости Joomla

🏆 Открыто голосование за Joomla в премии CMS Critic People’s Choice Awards 2025

👩‍💻 Релиз JoomGallery 4.3.0 - компонент галереи изображений для Joomla.

👩‍💻 Вместе мы развиваем Joomla: станьте Joomfluencer!

rubinded

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

ShfVD

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

rubinded

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

umbabaraumba

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

ShfVD

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

rubinded

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

rubinded

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

umbabaraumba

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

ShfVD

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

rubinded

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

rubinded

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

Похожие темы