Когда-то устанавливал на локальный хостинг CMS Joomla. Я в ней проработал недолго по разным обстоятельствам. Забросил. Прошло некоторое время, как я начал создавать свой очередной интернет проект. Меню я хотел сделать там всплывающим – само меню располагается горизонтально, а все подпункты каждого из пунктов меню должны высвечиваться при наведении курсора мыши (для наглядности пример здесь). Я решил разобраться в этом, «разложив» компоненты html «джумлы». Нашёл в CSS идентификаторы всплывающего меню, скопировал их, перенёс в новый документ и начал экспериментировать.
Прежде всего необходимо сделать «скелет» меню в html-документе
<ul id="menu">
<li><a href="link_1.htm">Пункт 1</a></li>
<li><a href="link_2.htm">Пункт 2
<ul>
<li><a href="link_2_1.htm">Пункт 2.1
<li><a href="link_2_2.htm">Пункт 2.2
<li><a href="link_2_3.htm">Пункт 2.3
</ul>
</li>
<li><a href="link_3.htm>Пункт 3
<ul>
<li><a href="link_3_1.htm">Пункт 3.1
<li><a href="link_3_2.htm">Пункт 3.2
<li><a href="link_3_3.htm">Пункт 3.3
<li><a href="link_3_4.htm">пункт 3.4
</ul>
</li>
<li><a href="link_4.htm>Пункт 4
<ul>
<li><a href="link_4_1.htm">Пункт 4.1
<li><a href="link_4_2.htm">Пункт 4.2
</ul>
</li>
</ul>
Далее в CSS-файле необходимо будет записать следующее
#menu
{
padding: 0;
margin: 0;
font-size: 14px;
font-family: Arial;
font-weight : bolder;
}
Данная запись задаёт параметры отображения информации внутри контейнеров, принадлежащих тегу основного списка с идентификатором «menu». В данном примере заданы отступы самого меню от краёв страницы, и задаются параметры текстового содержимого всего меню. После переходим к параметрам ячеек основных пунктов меню.
#menu li
{
width: 150px;
height: 35px;
list-style: none;
float: left;
padding: 0;
margin: 0;
text-align: center;
background: #CFCECE;
position: relative;
padding-top: 10px;
border-left: 1px solid #8F8E8E;
border-right: 1px solid #8F8E8E;
border-top: 1px solid #8F8E8E;
}
Данная запись задаёт размеры ячеек основных пунктов меню, их расположение относительно друг друга, положение содержимого ячеек и границы самих ячеек.
#menu li ul
{
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
position: absolute;
left: 0;
top: 45px;
}
Задание этой записи необходимо для того, чтобы пункты меню второго уровня не отображались до тех пор, пока не будет наведён курсор мыши на соответствующий пункт меню первого уровня. Здесь указывается ширина ячеек, позиции в расположении. Параметры left и top задают отступ блоков меню второго уровня слева и сверху соответственно.
#menu li ul li
{
width: 150px;
height: 35px;
float: none;
margin: 0;
text-align: center;
background: #A3A3A3;
}
Данная запись отвечает за пункты меню второго уровня. В данном случае заданы размеры ячеек, параметр float:none указывает на то, что пункты меню из выпадающего списка будут расположены один под другим, а background задаёт цвет фона пунктов меню второго уровня. Далее переходим к декору ссылок.
#menu li a
{
width: 150px;
height: 20px;
display: block;
color: #000;
text-decoration: none;
}
#menu li a:hover
{
width: 150px;
height: 20px;
display: block;
color: #fff;
text-decoration: none;
}
Данные примеры указывают параметры текстовых ссылок – первый случай указывает на отображение ссылок, второй на то, как измениться ссылка, если навести на неё курсор мыши.
#menu li:hover ul, #menu li.dont_look ul
{
display: block;
}
Данная запись предназначается для того, чтобы отображать выпадающий список меню при наведении курсора мыши на пункты меню первого уровня.
#menu li:hover, #menu li.dont_look
{
background: #7AA484;
border-left : 1px solid #00FF3C;
border-right : 1px solid #00FF3C;
}
Результатом данной записи является то, что когда наводится курсор мыши на пункт меню первого уровня (например на Пункт 2), то он подсвечивается указанным цветом в параметре background, а границы пунктов меню второго уровня (например Пункт 2.1), при наведении на них курсора мыши подсвечиваются, благодаря параметрам border. В моём случае я сделал, чтобы подсвечивались левая и правая границы ячеек, на которые наводится курсор мыши. Подобная запись border-left : 1px solid #00FF3C; говорит о том, что левая граница ячейки будет иметь размер в 1 пиксель, будет представлена сплошной тонкой линией (solid) с указанным цветом.
В целом, можно менять различные параметры стилей в зависимости от того, какой результат хотите получить. Однако, сам «скелет» и в html-документе и в файле css, должен соответствовать вышеприведённому.
Комментариев нет:
Отправить комментарий