qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Многоуровневое фиксированное меню

Многоуровневое фиксированное меню на css
Просмотров: 3252  Скачан: 357 раз  Комментариев в теме: 0

Горизонтальное, многоуровневое, фиксированного меню, созданное полностью на css. Дизайн меню в темном стиле, меню фиксируется в верхней части страницы, имеется строка поиска. Данный подход довольно популярен, многие видели на различных ресурсах, что-то подобное.

Шаг 1 - создание разметки

 

HTML

<div id="menu_div">
    <div id="navigation">
        <div id="menu">
            <ul id="nav">
                <li><a href="#">Home</a>
                    <ul>
                        <li><a href="#">Lorem ipsum</a></li>
                        <li><a href="#">Aenean massa</a></li>
                        <li><a href="#">Nullam dictum felis</a></li>
                        <li><a href="#">Aenean leo ligula</a></li>
                        <li><a href="#">Curabitur ullamcorper</a></li>
                        <li><a href="#">Item - Level 2</a>
                            <ul>
                                <li><a href="#">Sub item 1</a></li>
                                <li><a href="#">Sub item 2</a></li>
                                <li><a href="#">Item - Level 3</a>
                                    <ul>
                                        <li><a href="#">Sub sub item 1</a></li>
                                        <li><a href="#">Sub sub item 2</a></li>
                                        <li><a href="#">Item - Level 4</a>
                                            <ul>
                                                <li><a href="#">Sub sub sub item 1</a></li>
                                                <li><a href="#">Sub sub sub item 2</a></li>
                                                <li><a href="#">Sub sub sub item 3</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul> 
                </li>
                <li><a href="#">Portfolio</a>
                    <ul>
                        <li><a href="#">Maecenas tempus</a></li>
                        <li><a href="#">Vestibulum ante ipsum</a></li>
                        <li><a href="#">Praesent adipiscing</a></li>
                        <li><a href="#">Curabitur ligula</a></li>
                        <li><a href="#">Vestibulum</a></li>
                    </ul>
                </li>
                <li><a href="#">Blog</a>
                    <ul>
                        <li><a href="#">Fusce id purus</a></li>
                        <li><a href="#">Aenean viverra</a></li>
                        <li><a href="#">Phasellus magna</a></li>
                        <li><a href="#">Morbi ac felis</a></li>
                    </ul>
                </li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            <form class="searchform" action="#"> 
                <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
            </form>
        </div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
Материалы по теме:

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с ...

Красивое горизонтальное меню, используется изображения и анимация текста....

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню ...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на c...

Меню с выпадающими пунктами на css

Горизонтальное меню на cssГоризонтальное меню на css

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......
Интересные публикации:

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi-Item...

Стильный мульти слайдер с красивым эффектом, отлично подойдёт для интернет магазина, несомненно идея при создании этого слайдера, была взята в Aplle.....

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

KroftKroft

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

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Room 09 v1.4.0Room 09 v1.4.0

Room 09 - это довольно популярная тема для создания интернет магазинов, которая пользуется большим спросом среди разработчиков на WordPress....

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat Forms ...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить