Вертикальное многоцветное меню с подменю на CSS3

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Вертикальное меню с подменю на CSS3. Встроена возможность смены цвета body меню. Не используются фоновые изображения.

Распакуйте архив с материалом в «текущую папку» на компьютере. В папке menu-color находится папка css и документ demo.html. Откройте последний в своём браузере и проверьте функциональность меню.

Примечание: всё будет корректно работать только в случае нахождения названной папки и файла demo.html в одной директории!

Установка меню на сайт

1. Содержимое папки css необходимо закачать в одноименную папку вашего сайта. Соблюдайте осторожность при закачке, обращайте внимание на отсутствие идентичных файлов!

2. На странице своего сайта, где будет расположено меню, в разделе head укажите пути к файлам стилей меню:

<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">

Если у Вас возникает вопрос по поводу строки подключения стилей:

<link rel="stylesheet" type="text/css" href="css/style.css">

Она служит для создания стилей демонстрационного файла и её нужно исключить.

3. А участок кода из файла demo.html необходимо поместить в раздел body вашего сайта в месте расположения меню:

<div class="container">

            <span id="clr1"></span>
            <span id="clr2"></span>
            <span id="clr3"></span>
            <span id="clr4"></span>
            <span id="clr5"></span>
            <span id="clr6"></span>

            <div class="colorScheme">
                <a href="#clr1" class="clr1"></a>
                <a href="#clr2" class="clr2"></a>
                <a href="#clr3" class="clr3"></a>
                <a href="#clr4" class="clr4"></a>
                <a href="#clr5" class="clr5"></a>
                <a href="#clr6" class="clr6"></a>
            </div>

            <ul id="nav">
                <li><a href="/">Главная</a></li>
                <li><a href="#">Меню 1</a>
                    <ul class="subs">
                        <li><a href="#">Подпункт 1</a></li>
                        <li><a href="#">Подпункт 2</a></li>
                        <li><a href="#">Подпункт 3</a></li>
                        <li><a href="#">Подпункт 4</a></li>
                        <li><a href="#">Подпункт 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Меню 2</a>
                    <ul class="subs">
                        <li><a href="#">Подпункт 2-1</a></li>
                        <li><a href="#">Подпункт 2-2</a></li>
                        <li><a href="#">Подпункт 2-3</a></li>
                        <li><a href="#">Подпункт 2-4</a></li>
                        <li><a href="#">Подпункт 2-5</a></li>
                        <li><a href="#">Подпункт 2-6</a></li>
                        <li><a href="#">Подпункт 2-7</a></li>
                        <li><a href="#">Подпункт 2-8</a></li>
                    </ul>
                </li>
                <li><a href="#">Меню 3</a>
                    <ul class="subs">
                        <li><a href="#">Подпункт 3-1</a></li>
                        <li><a href="#">Подпункт 3-2</a></li>
                        <li><a href="#">Подпункт 3-3</a></li>
                        <li><a href="#">Подпункт 3-4</a></li>
                        <li><a href="#">Подпункт 3-5</a></li>
                    </ul>
                </li>
                <li><a href="#">Меню 4</a></li>
                <li><a href="#">Меню 5</a></li>
                <li><a href="#">Меню 6</a></li>
                <li><a href="#">Меню 7</a></li>
            </ul>

        </div>

После вставки кода пропишите URL и свои названия ссылок. Вот и всё! Пока! Удачи! L.M.