красивое горизонтальное меню с раскрывающимся списком html

Тут мы оживляем, анимируем наше меню:

ul.sdt_menu li div.sdt_box a:first-child{ margin-top:15px;}ul.sdt_menu li div.sdt_box a:hover{ color:#fff;}Со стилями завершили, теперь javascript.

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 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 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.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 и ссылок в сером прямоугольнике будут такими:

Для объемных названии придется адптировать эти параметры. Убедитесь, что новые параметры, также хорошо вписываются и в javascript анимацию.Далее определим стиль для серого прямоугольника скользящего вниз. Начальные значения будут равны 0, и для анимации просто будем их увеличивать:

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

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;}Заголовок и описание будет иметь такой стиль:

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.Изображение оформлено так:

ul.sdt_menu li{ float:left; width:170px; height:85px; position:relative; cursor:pointer;}Оформление главных элементов меню имеющих и заголовок и описание будет выглядеть следующим образом:

ul.sdt_menu a{ text-decoration:none; outline:none;} Наш список пунктов меню будет выровнен по левому краю с относительным позиционированием, поскольку мы хотим использовать абсолютное позиционирование для элементов внутри.

ul.sdt_menu{ margin:0; padding:0; list-style: none; font-family:"Myriad Pro", "Trebuchet MS", sans-serif; font-size:14px; width:1020px;} По умолчанию мы удалим любое оформление текста ссылок в нашем меню:

Начнем с неупорядоченного списка

Если подменю нет, то DIV можно просто не использовать. Изображения первоначально показываться не будут, так как мы установим значения его ширины и высоты на 0 в CSS.

Мы будем использовать неупорядоченный список, где каждый пункт меню будет содержать в себе главную ссылку и DIV контейнер с подпунктами этого меню.             <ul id="sdt_menu" class="sdt_menu">                <li>                    <a href="#">                        <img src="images/1.jpg" alt=""/>                        <span class="sdt_active"></span>                        <span class="sdt_wrap">                            <span class="sdt_link">Портфолио</span>                            <span class="sdt_descr">Мои работы</span>                        </span>                    </a>                    <div class="sdt_box">                            <a href="#">Вебсайты</a>                            <a href="#">Иллюстрации</a>                            <a href="#">Фотография</a>                    </div>                </li>                ...                ...            </ul>

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

Меню ввиде слайдов с выпадающим списком

Загрузка. Пожалуйста, подождите...

Меню ввиде слайдов с выпадающим списком » Скрипты для сайтов