07.04.2012, 10:15 | |||||
Выпадающая информацияДанное решение подойдёт для тех, кто хочет сэкономить место на своём сайте, к примеру разместить в нём статистику сайта, информеры, кнопку rss подписки и т.д Данное решение не содержит каких либо скриптов, оно полностью реализовано на основе html-css из-за чего будет полезна сайтам, которые стараются как можно меньше использовать скриптов и других библиотек jQuery. Установка: HTML: Code <div class="menu_n"> <a href="#" class="drop">Меню</a> <div class="dd_menu"> <span class="dd_ugol1"></span> <div class="dd_menu_os"> Доброе дело совершается с усилием, но когда усилие повторено несколько раз, то же дело становится привычкой. </div> </div> </div> - в основном идея заключается в том, что в главный контейнер div, мы поместим ссылку, при нажатии на которую появиться второй контейнер div, в который мы разместим тег span, отвечающий за изображения уголка и ещё один контейнер div, в котором будет находиться ваша информация, изначально в данном решении были использованы списки ul li, но я решил отказаться от них в пользу тега div, тем самым избежать определённых проблем с отображением второстепенных списков. А теперь давайте пропишем основные css стили, самое главное на что стоит обратить внимания, так это на класс .dd_ugol1, где прописаны значения отвечающие за появление изображения уголка и класс .menu_n:hover .dd_menu который отвечает за отступ между названием ссылки и уголком. CSS: Code /* Выпадающее меню ------------------------------------------*/ .menu_n { float:left; display:block; position:relative; padding: 4px 8px; background:#afd5eb; border:1px solid #84ABC2; } .menu_n .drop{ font: 11px Verdana,Arial,Helvetica, sans-serif; font-weight: bold; color:#226891; text-shadow:1px 1px 1px #fff; outline:0; } .menu_n:hover .drop{ color:#2784b4; } .dd_ugol1, .dd_menu { width:240px; } .dd_menu { float:left; position:absolute; margin:0px auto; background:#4c4c4c; padding:5px; left:-999em; z-index:998; border:1px solid #111; -moz-border-radius:5px 5px 5px ; -webkit-border-radius:5px 5px 5px ; border-radius:5px 5px 5px ; box-shadow: 0px 0px 5px #111; } .menu_n:hover .dd_menu{ left:auto; right:0px; bottom:30px; } .dd_ugol1 { height:25px; float:left; position:absolute; bottom: -25px; right: 10px; background:url(fon_ugol_1.png) no-repeat; background-position: right top; } .dd_menu_os { overflow:hidden; width:218px; background:#eee; border: 1px solid #353535; margin:0; padding:10px; } Картинку из архива заливаете в файловый менеджер. Материал взят с сайта infoscript.ru
Теги: Скачать Выпадающая информация
| |||||
Категория: Скрипты uCoz | Просмотров: 1489 | Добавил: SoRRos | Рейтинг: 5.0/2 | | |||||
Теги: |
Всего комментариев: 2 | |
|
Кроме того, материал перепечатывали с сайта на сайт, ставили... файл можно найти на Вэбочке (название tables_tablichki_dli_foruma.js).