Выезжающий блок css: css — Как сделать плавно выезжающий блок?

Создаем выезжающий блок меню с помощью jQuery и CSS3 — 9 Января 2014

Мы начнем с назначения стилей ненумерованному списку:

ul.sdt_menu{
 margin:0;
 padding:0;
 list-style: none;
 font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 font-size:14px;
 width:1020px;
}

Мы в целом хотим отменить оформление текста и подчеркивание, применяемые по умолчанию, для всех элементов ссылок в нашем меню:

ul.sdt_menu a{
 text-decoration:none;
 outline:none;
}

Наши элементы списка будут всплывать влево и будут иметь относительное позиционирование, так как мы хотим использовать абсолютное позиционирование для элементов внутри. Если мы не настроим так, то элементы с абсолютным позиционированием будут относительными для всей страницы:

ul.sdt_menu li{
 float:left;
 width:170px;
 height:85px;
 position:relative;
 cursor:pointer;
}

Стиль для главного элемента ссылки, в котором у нас есть два тега span для названия и описания, будет таким:

ul. sdt_menu li > a{
 position:absolute;
 top:0px;
 left:0px;
 width:170px;
 height:85px;
 z-index:12;
 background:transparent url(../images/overlay.png) no-repeat bottom right;
 -moz-box-shadow:0px 0px 2px #000;
 -webkit-box-shadow:0px 0px 2px #000;
 box-shadow:0px 0px 2px #000;
}

Обратите внимания на z-index: мы определим порядок наложения для всех важных элементов так, чтобы элементы справа оставались сверху.

Мы используем фоновое изображение, которое создает эффект стекла с полупрозрачным градиентом. Использование фонового узора, например, дерева, как в примере, создаст красивый эффект. Обязательно попробуйте разные текстуры, это выглядит изумительно!

Вы так же можете поиграть с тенями: меняя значения на 2px 2px 6px #000 inset, вы получите очень милый эффект.

Изображение будет иметь такие стили:

ul.sdt_menu li a img{
 border:none;
 position:absolute;
 width:0px;
 height:0px;
 bottom:0px;
 left:85px;
 z-index:100;
 -moz-box-shadow:0px 0px 4px #000;
 -webkit-box-shadow:0px 0px 4px #000;
 box-shadow:0px 0px 4px #000;
}

Мы хотим анимировать изображение, чтобы оно поднималось снизу, поэтому мы позиционируем его абсолютно, используя низ как точку отсчета. И добавим изящные тени со всех сторон. Первые два значения — нули, это распределит тени равномерно вокруг изображения. Мы также используем это в элементе ссылки. Эта равномерная тень может быть использована, когда Вы хотите создать эффект светящейся рамки. Преимущество в том, что теней как бы нет, их не нужно принимать в расчет для вычисления ширины и высоты элементов. Неудобство на данный момент в том, что CSS3 не поддерживается в браузере Internet Explorer.

Родительский объект для тегов span названия и описания будет иметь такой стиль: 

ul.sdt_menu li span.sdt_wrap{
 position:absolute;
 top:25px;
 left:0px;
 width:170px;
 height:60px;
 z-index:15;
}

После этого мы определим стиль для серого выезжающего блока. Мы установим значение его высоты в 0 и спозиционируем его таким образом, чтобы нам осталось только увеличить его высоту в анимации:

ul. sdt_menu li span.sdt_active{
 position:absolute;
 background:#111;
 top:85px;
 width:170px;
 height:0px;
 left:0px;
 z-index:14;
 -moz-box-shadow:0px 0px 4px #000 inset;
 -webkit-box-shadow:0px 0px 4px #000 inset;
 box-shadow:0px 0px 4px #000 inset;
}

Общие стили для тегов span и ссылок в блоках будут такими:

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}

Название и описание будут иметь такой стиль:

ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px;
font-size:10px;
letter-spacing:1px;
}

Блок подменю будет изначально спрятан под серым блоком. Затем мы анимируем его движение вправо или влево в зависимости от того, где мы находимся. Если мы, например, наведем указатель мыши на последний элемент, мы хотим анимировать движение блока этого подменю влево, в остальных случаях мы хотим анимировать его движение вправо.

ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}

У первой ссылки в подменю должен быть внешний верхний отступ:

ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}

И это все со стилями! Давайте добавим магию!

PHP в связке с jQuery

В заметке я поделюсь с вами несколькими решениями, которые помогут автоматизировать ваш сайт с помощью одновременного использования PHP и jQuery. В заметке представлены: формы регистрации/авторизации, автоматизированные jQuery галереи, ajax-чат, система комментирования, эффектная корзина заказов и многое другое. Скачивайте, экспериментируйте, наслаждайтесь результатом.

Внимание: все ссылки с демонстрацией скриптов откроются в новом окне, ссылки для скачивания исходников —  прямые.

1. Страница-заглушка «Сайт в разработке»

На странице реализована возможность отправить е-мейл адрес,  который записывается в базу данных и на который можно будет выслать уведомление об открытии сайта. Также страница украшена небольшим слайд-шоу, реализованном на базе jQuery плагина Nivo Slider v. 2.3.

Демо

Скачать

2. Отличный ajax-чат с применением jQuery и CSS3

Перед тем как начать общение посетитель должен ввести свой ник и e-mail. В правой колонке показано, сколько человек авторизованы в чате. Используемые технологии: PHP, MySQL, jQuery, CSS.

Демо

Скачать

3. Выезжающая PHP форма обратной связи

Подобное решение можно использовать для того, чтобы дать посетителю возможность быстро связаться с владельцем сайта с любой страницы.

Демо

Скачать

4. Реализация страницы «Предложить по проекту»

Посетители могут добавить новое предложение либо проголосовать за уже существующее. Отличное решение для тех, кто хочет узнать мнение своей аудитории о сайте. Также эту страницу можно использовать чтобы накопить новые идеи для дальнейшего развития вашего проекта. Используемые технологии: PHP, MySQL, jQuery, CSS

Демо

Скачать

5. Система Ajax комментирования

Простая система комментирования на Ajax с проверкой правильности ввода информации. Комментарии хранятся в базе данных. Реализовано с использованием: PHP, MySQL, CSS, jQuery.

Демо

Скачать

6. PHP форма входа с использованием jQuery и CSS3

Форма с проверкой правильности ввода информации.

Демо

Скачать

7. Счетчик количества скачиваний файла

При нажатии на кнопку «Download» или на ссылку для скачивания файла, счетчик автоматически увеличится на единицу. Используемые технологии: PHP, MySQL, CSS.

Демо

Скачать

8. Заметки на странице с использованием PHP

Использованные технологии: PHP, jQuery, CSS.

Демо

Скачать

9. PHP форма регистрации в стиле Facebook

Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.

Демо

Скачать

10. Простой Ajax сайт

При переходе по пунктам меню содержимое подгружается без перезагрузки страницы. Используемые технологии: PHP, jQuery, CSS.

Демо

Скачать

11. Автоматизированная jQuery галерея

PHP скрипт сканирует папку, в которую вы записываете изображения, и выводит их миниатюры на странице. При нажатии на изображение увеличение происходит с известным анимированным эффектом LightBox.  Очень удобно то, что вывод изображений осуществляется автоматически, вам достаточно лишь поместить необходимое фото в папку «gallery», в которой должны хранится изображения для галереи.

Демо

Скачать

12. Эффектная Ajax корзина заказов для интернет-магазина

При наведении курсора мыши на товар отображается его название, описание и цена.  Добавление товаров в корзину производится путем перетаскивания товара на корзину. В блоке с корзиной можно изменить количество выбранного товара. Там же отображается общая стоимость и кнопка «Заказать». Используемые технологии:  PHP, MySQL, jQuery, CSS.

Демо

Скачать

13. Контактная форма «Fancy AJAX Contact Form»

Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.

Демо

Скачать

14. Потрясающий слайдер

Слайдер генерируется автоматически. Данные с названием товара, описанием, ссылкой и адресом изображения берутся из файла slider.db.txt. Используемые технологии: CSS, PHP, jQuery.

Демо

Скачать

15. Система авторизации/регистрации на сайте

Выезжающий блок авторизации/регистрации на сайте. Используемые технологии: PHP, MySQL, jQuery, CSS.

Демо

Скачать

16. Удивительная автоматизированная CSS3 lightbox галерея

Скрипт сканирует папку с изображениями на вашем сервере и имеющиеся в ней фотографии отображает на странице в виде стопки фотографий. Фотографии можно перетаскивать по экрану с помощью мышки. При нажатии на изображение оно увеличивается с использованием плагина fancybox. Используемые технологии: CSS, PHP, jQuery.

Демо

Скачать

17. Необычное голосование с использованием jQuery

Очень интересное решение для реализации голосования на сайте. Перетаскивая вверх и вниз блоки, схватив мышкой за изображения, можно расположить их на странице в любой последовательности. Чем выше вы оставите блок, тем лучше его оценили и, соответственно, если блок разместить в самом низу, значит, он меньше всего вам понравился. После того, как вы расставите блоки в нужной последовательности, необходимо нажать на кнопку «Submit poll», чтобы голос был учтен. На странице с результатами отображаются результаты голосования и количество проголосовавших посетителей. Используемые технологии: CSS, PHP, MySQL, jQuery.

Демо

Скачать

html — Вертикальное всплывающее меню с чистым CSS

Задать вопрос

спросил 7 лет, 11 месяцев назад

Изменено 7 лет, 11 месяцев назад

Просмотрено 2к раз

Пожалуйста, проверьте приведенный ниже код. .

 

    <голова>
        <мета-кодировка="utf-8">
        
        
        <мета-имя="описание" содержание="">
        
  
        
        
        <стиль>
            HTML, тело {
                высота: 100%;
                маржа: 0;
                заполнение: 0;
            }
            .menuContainer {
                ширина: 100 пикселей;
                высота:100вх;
                фон:#ccc;
                z-индекс: 1;
            }
            .menuContainer ул {
                отступ: 20px 0 0 0;
                маржа: 0;
            }
            .menuContainer ul li {
                отступ: 10 пикселей;
                маржа: 0;
                стиль списка: нет;
                нижняя граница: сплошная 1px # 000;
                семейство шрифтов: 'Arial';
                размер шрифта: 16 пикселей;
                фон:#00ACD6;
                положение: родственник;
            }
            .
 
  menuContainer ul li:hover{
                фон:#00A65A;
                курсор:указатель;
            }
            .menuContainer ul li a{
                текстовое оформление: нет;
                цвет:#000;
            }
            .menuContainer ul li: наведите курсор на {
                текстовое оформление: нет;
                цвет:#fff;
            }
            .menuContainer ul li a:after{
                содержание:' •'
            }
            .menuContainer ул ли ул {
                положение: абсолютное;
                верх:-20px;
                слева:-100px;
                высота:100вх;
                ширина: 0 пикселей;
                z-индекс:-1;
                -webkit-transition: ширина 0,4с, слева 0,4с;
                -o-переход: ширина 0,4с, левая 0,4с;
                переход: ширина 0,4с, слева 0,4с;
            }
            .menuContainer ul li: hover ul {
                слева: 100 пикселей;
                ширина: 100 пикселей;
            }
        
  
    <тело>
        <дел>
            <ул>
                
Внешний интерфейс
                    <ул>
                        
HTML
                        
CSS
                        
JavaScript
                    
                
                
Бэкенд
                    <ул>
                        
PHP
                        
MYSQL
                        
ASP
                        
JSP