ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Блоки с выскальзывающим описанием (CSS3)

Сообщений 1 страница 10 из 20

1

Блоки с выскальзывающим описанием (CSS3)

Автор: mintemero

ДЕМО
[html]
    <style>
    .fmenu a {
    overflow: hidden;
    text-decoration: none !important;
    display: block;
    width: 250px;
    height: 60px;
    margin: 0 20px 20px 0;
    background: rgba(219, 226, 232, 0.5);
    border: 1px solid #ccc;}
    .fmenu h5 {
        margin: 0;
    color: #222;
    text-align: center;
    height: 60px;
    font: italic 18px/60px Georgia, Serif;
    opacity: 1;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;}
    .fmenu a:hover h5 {
    margin-top: -60px;
    opacity: 0;
    }
    .fmenu div {
    background: #000 17px 17px no-repeat;                     
    height: 60px;
    position: relative;
    color: white;
    font: 12px/15px Georgia, Serif;
    padding: 5px;
    opacity: 0;                           
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;}

    .fmenu a:hover div {
    opacity: 1}
    </style>
    <div class="fmenu">

    <a href="ссылка">
        <h5>название</h5>
        <div>описание</div>
    </a>

    <a href="#">
        <h5>название</h5>
        <div>описание</div>
    </a>

    <a href="#">
        <h5>название</h5>
        <div>описание</div>
    </a>
    </div>[/html]

Туда где хотите видеть блоки:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное- единичный блок. Его копируем столько раз, сколько хотим блоков.

В html-верх:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

серым - подсказки, что к чему.

+1

2

демо не работает ._.

Подпись автора

http://s7.uploads.ru/CwN0E.jpg

0

3

Skywarp написал(а):

демо не работает ._.

Загрузила демо на jsfiddle

http://jsfiddle.net/mintemero/JNArv/embedded/result/

Подпись автора

http://s3.uploads.ru/r9Miq.gif

0

4

Ребят, что-то я туплю, как сделать так чтобы меню (блоки) расположились в одну линию для экономии места?

0

5

Ну что, есть кто?

0

6

C3La-NS
Замените эту строку

.fmenu a {                                                          /* Стиль блоков */
overflow: hidden;   /* Скрываем прокрутку */
text-decoration: none !important;
display: block;

на такую    display: inline- block;

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

7

Так-то круто,но вот смотрите,при изменении размера блока [я сделал примерно такого размера как здесь кнопка ответить] надпись название съезжает и при наведении на кнопку курсором,она вылетает [надпись] сверху-вниз на большой скорости.
Надпись-же описание стоит на месте правильно.

Что-то наверно с тегами:
<h5>название</h5>
<div>описание</div>

0

8

kleo333
ссылку на форум с проблемой

Подпись автора

http://s3.uploads.ru/r9Miq.gif

0

9

а как можно сделать так, чтобы высота блока автоматически выстраивалась под описание?
чтобы не было пустого места, или, напротив, не отрезало половину текста?

0

10

Asari
к сожалению, не получится, т. к. работа как раз завязана на высоте блока. Делайте лучше "с запасом".

Подпись автора

http://s3.uploads.ru/r9Miq.gif

0