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

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

ОБСУЖДЕНИЕ

Многоуровневое меню на css3

Многоуровневое горизонтальное меню на css3
Просмотров: 1928  Скачан: 292 раз  Комментариев в теме: 0

Отличное горизонтальное многоуровневое на css3, подойдет к любому стилю сайта, в меню нет ничего лишнего, все просто и оригинально.

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

 

HTML

<ul id="menu">
    <li><a href="#">Главная</a></li>
    <li>
        <a href="">Категории</a>
        <ul>
            <li>
                <a href="">CSS</a>
                <ul>
                    <li><a href="">Item 11</a></li>
                    <li><a href="">Item 12</a></li>
                    <li><a href="">Item 13</a></li>
                    <li><a href="">Item 14</a></li>
                </ul>
            </li>
            <li>
                <a href="">Graphic design</a>
                <ul>
                    <li><a href="">Item 21</a></li>
                    <li><a href="">Item 22</a></li>
                    <li><a href="">Item 23</a></li>
                    <li><a href="">Item 24</a></li>
                </ul>
            </li>
            <li>
                <a href="">Development tools</a>
                <ul>
                    <li><a href="">Item 31</a></li>
                    <li><a href="">Item 32</a></li>
                    <li><a href="">Item 33</a></li>
                    <li><a href="">Item 34</a></li>
                </ul>
            </li>
            <li>
                <a href="">Web design</a>
                <ul>
                    <li><a href="">Item 41</a></li>
                    <li><a href="">Item 42</a></li>
                    <li><a href="">Item 43</a></li>
                    <li><a href="">Item 44</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="">Work</a>
        <ul>
            <li>
                <a href="">Work 1</a>
                <ul>
                    <li>
                        <a href="">Work 11</a>
                        <ul>
                            <li><a href="">Work 111</a></li>
                            <li><a href="">Work 112</a></li>
                            <li><a href="">Work 113</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Work 12</a>
                        <ul>
                            <li><a href="">Work 121</a></li>
                            <li><a href="">Work 122</a></li>
                            <li><a href="">Work 123</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Work 13</a>
                        <ul>
                            <li><a href="">Work 131</a></li>
                            <li><a href="">Work 132</a></li>
                            <li><a href="">Work 133</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">Work 2</a>
                <ul>
                    <li>
                        <a href="">Work 21</a>
                        <ul>
                            <li><a href="">Work 211</a></li>
                            <li><a href="">Work 212</a></li>
                            <li><a href="">Work 213</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Work 22</a>
                        <ul>
                            <li><a href="">Work 221</a></li>
                            <li><a href="">Work 222</a></li>
                            <li><a href="">Work 223</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Work 23</a>
                        <ul>
                            <li><a href="">Work 231</a></li>
                            <li><a href="">Work 232</a></li>
                            <li><a href="">Work 233</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">Work 3</a>
                <ul>
                    <li>
                        <a href="">Work 31</a>
                        <ul>
                            <li><a href="">Work 311</a></li>
                            <li><a href="">Work 312</a></li>
                            <li><a href="">Work 313</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Work 32</a>
                        <ul>
                            <li><a href="">Work 321</a></li>
                            <li><a href="">Work 322</a></li>
                            <li><a href="">Work 323</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Work 33</a>
                        <ul>
                            <li><a href="">Work 331</a></li>
                            <li><a href="">Work 332</a></li>
                            <li>
                                <a href="">Work 444</a>
                                <ul>
                                    <li><a href="">Work 431</a></li>
                                    <li><a href="">Work 432</a></li>
                                    <li><a href="">Work 433</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="">О сайте</a></li>
    <li><a href="">Контакты</a></li>
    <li><a href="">Новости</a></li>
</ul>

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

 

CSS

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

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slic...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

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

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

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню н...

Горизонтальное меню на css3 с замечательным эффектом....

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu...

Стильное горизонтальное меню с выдвижными иконками

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

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

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

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

Круговой слайдерКруговой слайдер css3

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

Full Page Image GalleryFull Page Image Gallery

Красивая галерея для вашего сайта на css и JQuery, если вам нужна красивая галерея и вам хочется, что-то необычное......

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css3

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню на cs...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...
  • Текущий 1.78/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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