Опубликовано: 24.01.2018
6. Сейчас колдуем с CSS так, чтоб было похоже на данный макет.
Поехали:
Я заключил меню в блочный элемент levoe-menu:
Таким макаром, Joomla генерирует последующий код:
Применим к этому меню последующие css правила:
.levoe-menu { position: absolute; float: left; border: 0px dashed; width: 255px; margin-top: 0px; text-align: left; line-height: 1.5; /* Увеличиваем расстояние меж строчками меню */ font-family: verdana; font-size: 16px; } .menuleft li { list-style-type: none; /* Убираем маркеры перечня */ } .menuleft li a /* Стиль родительского меню */ { color: #000; display: block; background-image: url(../images/strelka-right.png); /* подкладываем фон со стрелкой на право */ background-repeat: no-repeat; background-position: left; padding-left: 15px; /* делаем отступ слева */ position: relative; left: -10px; /* делаем смещение на лево для места для стрелки */ text-decoration: none; } ul li.active.parent a /* Стиль активного родительского меню */ { color: #0063FF; background-image: url(../images/strelka-down.png); /* подкладываем фон со стрелкой вниз */ background-repeat: no-repeat; background-position: left; } #left ul li a /* Стиль подменю */ { background-image: url(../images/none); /* Убираем стрелки */ color: #0099FF; position: relative; left: -45px; /* Двигаем подменю на лево на необходимое расстояние */ } #left ul /* Делаем отступ подменю снизу */ { padding-bottom: 20px; }
В конечном итоге получаем требуемый вариант. На момент написания статьи рабочий вариант находился по адресу: http://td-e.ru/chimiya.html Можно, естественно, еще выделить активное подменю, но в ТЗ этого не было, так что опустим ;)
Copyleft © 2017 . www.flashphone.ru