Вертикальное раскрывающееся меню на XHTML и CSS

Данный пост является продолжением поста Вертикальное меню на XHTML и CSS.
Создадим раскрывающийся список. Для этого сначала изменим структуру xhtml файла. Создадим внутри элемента li еще один список ul (необходимо внимательно следить за вложенностью тегов).



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Вертикальное раскрывающееся меню на CSS</title>
        <link rel="stylesheet" type="text/css" href="vraskrmenu.css" />
    </head>
    <body>
    <div id="menu">
        <ul>
            <li><a href="#">Menu1</a>
                <uL>
                    <li><a href="#">Item11</a></li>
                    <li><a href="#">Item12</a></li>
                    <li><a href="#">Item13</a></li>
                </uL>
            </li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
            <li><a href="#">Menu4</a></li>
            <li><a href="#">Menu5</a></li>
        </ul>
    </div>    
    </body>
</html>



Файл стилей такой же, как и в предыдущем примере:

* {margin:0; padding:0;} /* обнуляем поля и отступы для всех элементов*/

#menu {
    margin-top: 20px; /* верхнее поле для div menu */
    margin-left: 30px; /* левое поле для div menu */
}

#menu ul {
    width: 5em;
    list-style-type: none; /* убираем маркеры из списка */
}

#menu li {
    text-align:center;
    border-bottom: 1px solid #0000FF; /* нижняя граница */
    border-left: 1px solid #0000FF; /* левая граница */
    border-right: 1px solid #0000FF; /* правая граница */
    background-color: #ADD8E6; /* цвет фона */
}

#menu li:first-child {
    border-top: 1px solid #0000FF; /* верхняя граница */
}

#menu a {
    text-decoration: none;
    padding: 0 17px;
}

#menu li:hover {
    background-color: #FFFF00; /* цвет фона */
}

#menu a:hover {
    color: red; /* цвет текста */
}


Результат:
Рисунок 1.
Расположим вложенный список ul li ul относительно родительского элемента ul li:



* {margin:0; padding:0;} /* обнуляем поля и отступы для всех элементов*/

#menu {
    margin-top: 20px; /* верхнее поле для div menu */
    margin-left: 30px; /* левое поле для div menu */
}

#menu ul {
    width: 5em;
    list-style-type: none; /* убираем маркеры из списка */
}

#menu li {
    text-align:center;
    border-bottom: 1px solid #0000FF; /* нижняя граница */
    border-left: 1px solid #0000FF; /* левая граница */
    border-right: 1px solid #0000FF; /* правая граница */
    background-color: #ADD8E6; /* цвет фона */
    <strong>position: relative;</strong>
}

#menu li:first-child {
    border-top: 1px solid #0000FF; /* верхняя граница */
}

#menu a {
    text-decoration: none;
    padding: 0 17px;
}

#menu li:hover {
    background-color: #FFFF00; /* цвет фона */
}

#menu a:hover {
    color: red; /* цвет текста */
}

/*=====================================================================*/
#menu ul li ul {
    position: absolute;
}
/*=====================================================================*/

Результат:
Рисунок 2.
Сместим вложенный список вправо


* {margin:0; padding:0;} /* обнуляем поля и отступы для всех элементов*/

#menu {
    margin-top: 20px; /* верхнее поле для div menu */
    margin-left: 30px; /* левое поле для div menu */
}

#menu ul {
    width: 5em;
    list-style-type: none; /* убираем маркеры из списка */
}

#menu li {
    text-align:center;
    border-bottom: 1px solid #0000FF; /* нижняя граница */
    border-left: 1px solid #0000FF; /* левая граница */
    border-right: 1px solid #0000FF; /* правая граница */
    background-color: #ADD8E6; /* цвет фона */
    position: relative;
}

#menu li:first-child {
    border-top: 1px solid #0000FF; /* верхняя граница */
}

#menu a {
    text-decoration: none;
    padding: 0 17px;
}

#menu li:hover {
    background-color: #FFFF00; /* цвет фона */
}

#menu a:hover {
    color: red; /* цвет текста */
}

#menu ul li ul {
    position: absolute;
    /*=====================================================================*/
    margin-left: 5em;
    /*=====================================================================*/
}

Результат:
Рисунок 3.
Уменьшим расстояние между списками


* {margin:0; padding:0;} /* обнуляем поля и отступы для всех элементов*/

#menu {
    margin-top: 20px; /* верхнее поле для div menu */
    margin-left: 30px; /* левое поле для div menu */
}

#menu ul {
    width: 5em;
    list-style-type: none; /* убираем маркеры из списка */
}

#menu li {
    text-align:center;
    border-bottom: 1px solid #0000FF; /* нижняя граница */
    border-left: 1px solid #0000FF; /* левая граница */
    border-right: 1px solid #0000FF; /* правая граница */
    background-color: #ADD8E6; /* цвет фона */
    position: relative;
}

#menu li:first-child {
    border-top: 1px solid #0000FF; /* верхняя граница */
}

#menu a {
    text-decoration: none;
    padding: 0 17px;
}

#menu li:hover {
    background-color: #FFFF00; /* цвет фона */
}

#menu a:hover {
    color: red; /* цвет текста */
}

#menu ul li ul {
    position: absolute;
    margin-left: 5em;
    /*=====================================================================*/
    left: -2px;
    /*=====================================================================*/
}

Результат:
Рисунок 4.
Вложенный список смещен вниз относительно родительского элемента li.
Это происходит из-за того, что список ul li ul унаследовал сдвиг родительского меню, необходимый для его расположения под горизонтальным меню.
Для выравнивания вложенного списка необходимо поднять его на 1 px вверх


* {margin:0; padding:0;} /* обнуляем поля и отступы для всех элементов*/

#menu {
    margin-top: 20px; /* верхнее поле для div menu */
    margin-left: 30px; /* левое поле для div menu */
}

#menu ul {
    width: 5em;
    list-style-type: none; /* убираем маркеры из списка */
}

#menu li {
    text-align:center;
    border-bottom: 1px solid #0000FF; /* нижняя граница */
    border-left: 1px solid #0000FF; /* левая граница */
    border-right: 1px solid #0000FF; /* правая граница */
    background-color: #ADD8E6; /* цвет фона */
    position: relative;
}

#menu li:first-child {
    border-top: 1px solid #0000FF; /* верхняя граница */
}

#menu a {
    text-decoration: none;
    padding: 0 17px;
}

#menu li:hover {
    background-color: #FFFF00; /* цвет фона */
}

#menu a:hover {
    color: red; /* цвет текста */
}

#menu ul li ul {
    position: absolute;
    margin-left: 5em;
    left: -2px;
    /*=====================================================================*/
    top: -1px;
    /*=====================================================================*/
}

Результат:
Рисунок 5.
Вложенный список должен быть по умолчанию скрыт и отображаться при наведении курсора на родительский пункт первого списка.
Это легко можно реализовать, используя свойство display


* {margin:0; padding:0;} /* обнуляем поля и отступы для всех элементов*/

#menu {
    margin-top: 20px; /* верхнее поле для div menu */
    margin-left: 30px; /* левое поле для div menu */
}

#menu ul {
    width: 5em;
    list-style-type: none; /* убираем маркеры из списка */
}

#menu li {
    text-align:center;
    border-bottom: 1px solid #0000FF; /* нижняя граница */
    border-left: 1px solid #0000FF; /* левая граница */
    border-right: 1px solid #0000FF; /* правая граница */
    background-color: #ADD8E6; /* цвет фона */
    position: relative;
}

#menu li:first-child {
    border-top: 1px solid #0000FF; /* верхняя граница */
}

#menu a {
    text-decoration: none;
    padding: 0 17px;
}

#menu li:hover {
    background-color: #FFFF00; /* цвет фона */
}

#menu a:hover {
    color: red; /* цвет текста */
}

#menu ul li ul {
    position: absolute;
    margin-left: 5em;
    left: -2px;
    top: -1px;
    /*=====================================================================*/
    display: none;
    /*=====================================================================*/
}

/*=====================================================================*/
#menu ul li:hover ul {
    display: block;
}
/*=====================================================================*/

Результат:
Рисунок 6.
Добавим еще один уровень в наше меню. Для этого сначала изменим xhtml файл:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Вертикальное меню на CSS</title>
        <link rel="stylesheet" type="text/css" href="vraskrmenu.css" />
    </head>
    <body>
    <div id="menu">
        <ul>
            <li><a href="#">Menu1</a>
                <uL>
                    <li><a href="#">Item11</a></li>
                    <li><a href="#">Item12</a></li>
                        <li><a href="#">Item13</a>
                            <ul>
                                <li><a href="#">Item131</a></li>
                                <li><a href="#">Item132</a></li>
                            </ul>
                        </li>                    
                </uL>
            </li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
            <li><a href="#">Menu4</a></li>
            <li><a href="#">Menu5</a></li>
        </ul>
    </div>    
    </body>
</html>

Скроем второй вложенный список и будем открывать его при наведении курсора мыши на родительский элемент li

* {margin:0; padding:0;} /* обнуляем поля и отступы для всех элементов*/

#menu {
    margin-top: 20px; /* верхнее поле для div menu */
    margin-left: 30px; /* левое поле для div menu */
}

#menu ul {
    width: 5em;
    list-style-type: none; /* убираем маркеры из списка */
}

#menu li {
    text-align:center;
    border-bottom: 1px solid #0000FF; /* нижняя граница */
    border-left: 1px solid #0000FF; /* левая граница */
    border-right: 1px solid #0000FF; /* правая граница */
    background-color: #ADD8E6; /* цвет фона */
    position: relative;
}

#menu li:first-child {
    border-top: 1px solid #0000FF; /* верхняя граница */
}

#menu a {
    text-decoration: none;
    padding: 0 17px;
}

#menu li:hover {
    background-color: #FFFF00; /* цвет фона */
}

#menu a:hover {
    color: red; /* цвет текста */
}

#menu ul li ul {
    position: absolute;
    margin-left: 5em;
    left: -2px;
    top: -1px;
    display: none;
}

#menu ul li:hover ul {
    display: block;
}

/*=====================================================================*/
#menu ul li ul li ul {
    visibility: hidden;
}

#menu ul li ul li:hover ul {
    visibility: visible;
}
/*=====================================================================*/

Результат:
Рисунок 7.
© itnovella.ru
  • avatar
  • 0

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.