Категория: CSS для MyPage

Выпадающий блок в шапке

Итак, выпадающий при наведении блок в шапке вашего блога. 

Имитирует некоторое подобие выпадающей менюшки(стандартной), но с возможностью настроить и выпадаение, и содержание)

 

#shower {z-index: 20; width: 100%; position: relative;}
#shower #hidden { margin-top: -1000px; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
#shower:hover #hidden {margin-top: 0;}
#hidden {position: absolute; left:0; right:0; border: 1px dashed #fff;width:100%; height: 100px; -moz-border-radius: 2px !important; border-radius: 2px !important; -webkit-border-radius: 2px !important; background: url('http://f.mypage.ru/106d904810d24677fc13d4f8dc0114d9_ d703b5efa9398afd63eeaf090a24980b.png');}
.wrap .right { z-index: 0 !important;}
#header {overflow: visible !important;}

Для того чтобы этот код работал нужно создать свободный блок в шапке и внутрь него через html форму что-то вроде этого:

<div id=«shower»>
    <div id=«show_activ»><img title=«Немного доп информации» alt=«При наведении много информации» src=«imgin.ru/images/8122015aa6b5626d0636c4ab48069453.gif» /></div>
    <div id=«hidden»>Скрытый текст</div>
</div>

Свободный блок должен быть на самом верху, хотя принципиальной разницы нет...)

Обсудить у себя 8
Комментарии (50)

привет) а где можно посмотреть пример?)

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

хитрО))

ну можно вставить «картинку» с текстом наведи на меня)))

круто)))

все дело в шляпе)

надо подумать, как в своем блоге использовать)) спасибо)))

не за что)

а скорость появления можно сделать медленней?

-moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;

скорость в секундах на полное выполнение указано тут)

спасибо, теперь будем думать куда бы это примастырить))

КРУТО!

Что такое?

Я вам в личке написала) И еще таааак обидно, что я вчера весь день и сегодня полдня просидела  и промучалась с кодами и наконец сама сделала нечто подобное, а сегодня уже коды дали. Вот так всегда)

Ну, уважаемая, Джули, проблема в том, что я не 24/7 за компом в свободном плавании...) Как нашел время сделал

Я понимаю, понимаю. Жаль что именно этот код вы сделали для всех — это удручает меня больше всего. Теперь нужно думать, что бы такое еще сделать)

Что самое интересное.  Проторчав дофига часов я собирала свой уже нынешний код из разных кусков, и-таки вышло. А сейчас смотрю на этот готовый — и как его я бы адаптировала бы в случае чего под нужный блок — ума не приложу...

а его адаптировать не надо, надо просто вставить и забить содержимое скрываемого блока своей инфой)

Всего лишь? Хм… Попробую однажды на черновике))

Пробуй)0

у меня вообще не получается это сделать!!

это почему?

не знаю))

Согласен у меня тоже пока не получается. ))

посмотрите это

попробовал! Заинтересовало! Спс.

Можно спросить, как Вы сделали рамку вокруг постов и комментариев, какой код ипользовали? Уж больно красиво *-*

Можно, но вы понимаете, что таким образом украдете «изюминку» у моего блога?)

Красть я не собиралась.Это чистое любопытство человека, который любит рассматривать непонятную вещь (в данном случае код) и разбираться, как она устроена)

Код абсолютно стандартный — фоновые изображения у блока, плюс игра отступов. ну и правильно подобрать сами блоки, которые под это дело подходят

Комментарий был удален

Куда дальше?)

Комментарий был удален

Спасибо)Кажется, поняла)

)))) ну вот видите как все просто оказывается)

Не много не ясно про html не получается! Расписались бы подробнее! ))
И желательно последовательно на скринах показали бы что куда вставлять!)) 

Пытаешься повторить?

ДА!

Все легко и непринужденно)

Свобоодный блок ->html/редактор *в режим html* там вставляешь указанный код и сохраняешь)

Я всё делал так и у меня показывается только код а не его действие так сказать!
Как предложение тоесть а не то что надо! 

Значит что-то сделал не так… например вставил код в визивиг-редактор, а не в html

Возмо…           но...
Нет исключенно вставил в html редактор! css код тоже был вставлен куда нужно(в редактор css)! 

привет) а виджет «поиск» можно как то переместить по блогу?)

смотри в личку

Спасибо Денис) хоть бы написал как поживаешь, чем занимаешься))

да все ничего, балкон делаю, пол положил сегодня, почти)))осталось немного)

молодец, хорошо когда руки из нужного места растут)

а у меня всё пока работа, до конца августа, в сентябре отдохну.

Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети:

Каин
Каин
Был на сайте никогда
Родился: 9 Июля
admin@unohog.ru
Читателей: 187 Опыт: 0 Карма: 1
Я в клубах
I am Sherlocked Пользователь клуба
Уно Хогвартс Администратор клуба
CSS | Design Пользователь клуба
Web-Grower Модератор клуба
Sherlove Пользователь клуба
Проект "Together" Пользователь клуба
Новичкам MyPage.Ru Модератор клуба
Поддержка кнопки Пользователь клуба
Служба помощи MyPage.Ru Пользователь клуба
Много ARTа не бывает Модератор клуба
Ἔρως - Ἀφροδίτη Пользователь клуба
все 35 Мои друзья