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

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

ОБСУЖДЕНИЕ

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

Многоуровневое горизонтальное меню на css3
Просмотров: 2222  Скачан: 333 раз  Комментариев в теме: 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" />
Материалы по теме:

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

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

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

Горизонтальное многоуровневое фиксированного меню в темном стиле...

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

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

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

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

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимис...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

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

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся мен...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......
Интересные публикации:

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фоном

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

Скрипт комментариев на PHPСкрипт комментариев на PHP

Скрипт комментариев написанный на php и работает в связке с MYSQL....

Сборка кнопок #2 на css3Сборка кнопок #2 на css3

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......
  • Текущий 1.78/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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