-
Вебмастеру
(
http://forum.oszone.net/forumdisplay.php?f=22)
Выпадающее меню в 2 столбца с бекграундом и своими маркерами списка
Всем приветы!
Не могу сообразить от слова "совсем" как быть в такой ситуации. Надо выпадающее меню такого типа
https://clip2net.com/s/431oMO9
погуглил варианты - везде просто списком с разбивкой выпадающего блока на 50% по ширине. Но, при попытке прицепить к пунктам меню свой стиль (для каждого li)
Код:
li.licross {
list-style: none; /* Убираем исходные маркеры */
background: url(img/plus.png) no-repeat 0 4px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
все сводится в один столбец и часть пунктов куда-то пропадает, хотя z-index нигде в css не указан, попытка сделать 2 класса для ul первая колонка и вторая колонка с margin тоже что-то не удались.
Может кто подскажет, как быть? |
Недостаточно информации.
Ошибка может быть где угодно.
Загрузите код в песочницу, или дайте ссылку на вашу верстку.
|
Цитата:
Цитата ProCoder
Загрузите код в песочницу, или дайте ссылку на вашу верстку. »
|
верстка полностью инвалидная ) ресурс сугубо локальный, валидация, соответственно, вообще пофигу
поэтому сейчас это реализовано как обычная таблица. с тремя колонками.
https://clip2net.com/s/431u1U7
Код:
<td valign="top" width="12%" bgcolor="#f7f3de">
<ul class="ulmainmenu">
<li class="ligreenbook"><a href="journalkassovihoper.html">Журнал кассовых операций</a></li>
<li class="licross"><a href="prochieviplaty.html">Прочие выплаты</a></li>
<li class="liredgrafik"><a href="dsmove.html">Движения денежных средств</a></li>
<li class="liwhitegrafik"><a href="kartarazmena.html">Открыть карту размена</a></li>
<li class="lipoisk"><a href="poiskkarty.html">Поиск по ФИО и номеру карты</a></li>
<li class="liprintcheck"><a href="printvozvrat.html">Печать бланк возврата</a></li>
</ul>
</td>
<td valign="top" width="12%" bgcolor="#f7f3de">
<ul class="ulmainmenu">
<li class="lishema"><a href="inkassaciya.html">Инкассация</a></li>
<li class="licross"><a href="prochiepolucheniya.html">Прочие получения</a></li>
<li class="licross"><a href="seif.html">Ввести остатки по кассам</a></li>
<li class="liredgrafik"><a href="poiskchekov.html">Поиск чеков</a></li>
<li class="lishema"><a href="pechatshkkonver.html">Печать штрихкодов на конверты</a></li>
</ul>
</td>
полный css выглядит так
Код:
@charset "windows-1251";
/* CSS Document */
body {
background: #fffbef;
}
h1 {
font-family: Arial;
font-size: 18px;
color: #b58200;
}
h2 {
font-family: Arial;
font-size: 16px;
color: #b58200;
}
p {
font-family: Arial;
font-size: 14px;
color: #000000;
}
img {
border: 1px double #00734a;
}
#leftmenutop {
font-size: 11px;
font-family: Arial;
font-weight: bold;
}
#leftmenutop p {
font-size: 11px;
font-family: Arial;
font-weight: bold;
}
#leftmenubottom {
font-size: 11px;
font-family: Arial;
font-weight:normal;
}
#leftmenubottom p{
font-size: 11px;
font-family: Arial;
font-weight:normal;
}
#leftmenuother {
font-size: 11px;
font-family: Arial;
font-weight:bold;
color: #b58200;
}
#leftmenuother p{
font-size: 11px;
font-family: Arial;
font-weight:bold;
color: #b58200;
}
a {text-decoration: none; color: #10247b;}
a:hover {text-decoration: underline; color: #10247b;}
a.atext {text-decoration: underline;
color: #10247b;
font-weight:bold;
}
.knopki {
border: 2px double #c0c0c0;
background: #f7f3de;
padding: 2px;
border-radius: 5px;
font-size: 12px;
font-family: Arial;
font-weight:normal;
height: 35px;
}
li {
font-size: 14px;
font-family: Arial;
font-weight:normal;
}
td.tdmain {
padding-left: 20px;
valign: top;
}
.knopki a:hover {text-decoration: underline; color: #10247b;}
li.licross {
list-style: none; /* Убираем исходные маркеры */
background: url(img/plus.png) no-repeat 0 4px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.liredgrafik {
list-style: none; /* Убираем исходные маркеры */
background: url(img/redgrafik.png) no-repeat 0 4px; /*Параметры фона */
padding-left: 24px; /*Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.liwhitegrafik {
list-style: none; /* Убираем исходные маркеры */
background: url(img/whitegrafik.png) no-repeat 0 4px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.ligreenbook {
list-style: none; /* Убираем исходные маркеры */
background: url(img/greenbook.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.lipoisk {
list-style: none; /* Убираем исходные маркеры */
background: url(img/poisk.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.liprintcheck {
list-style: none; /* Убираем исходные маркеры */
background: url(img/printcheck.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.liprinter {
list-style: none; /* Убираем исходные маркеры */
background: url(img/printer.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.lishema {
list-style: none; /* Убираем исходные маркеры */
background: url(img/shema.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.lisheet {
list-style: none; /* Убираем исходные маркеры */
background: url(img/sheet.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
li.liclosesheet {
list-style: none; /* Убираем исходные маркеры */
background: url(img/closesheet.png) no-repeat 0 6px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
ul.ulmainmenu {
padding: 0; /* Убираем поля */
margin-left: 15px; /* Отступ слева */
}
br {
line-height: 10px;
}
"Проблема" в том, что в правом столбце бывают "широкие" рисунки, которые сдвигают два левых столбца с меню
https://clip2net.com/s/431u9bU
поэтому я хочу сделать выпадающее меню.
если будет пример такой менюшки (чтобы в списке были свои маркеры и в два столбца) то попробую поменять у себя "мешающие" стили. |
koresaram, есть же сервисы типа https://jsfiddle.net/ где можно показать как оно работает. С приведённым отрывком html мало кто чего поймёт
|
Цитата:
Цитата koresaram
верстка полностью инвалидная ) »
|
В этом то и проблема...
Для начала вам нужно разобраться с принципами блочной верстки. Таблицами никто уже не верстает.
Выпадающее подменю - это не отдельная колонка, а блок который должен позиционироваться над основной версткой.
Ну и без js здесь, скорее всего не обойтись. Нужно будет отслеживать события мыши (mouseover и mouseout) на пунктах основного меню, и в зависимости от этого показывать соответствующее подменю. |
путь к решению найден. Вкратце - обернуть выпадающие менюшки в div и использовать для этого div display:flex;
фрагмент html
Код:
<td width="13%" bgcolor="f7efd6" valign="top">
<ul class="menu">
<li class="p_menu"><a href="#">Главная </a>
<div class="zornet_ru">
<ul class="ulmainmenu">
<li class="licross"><a href="#">Сайт ZORNET.RU</a></li>
<li><a href="#">Скрипты сайта</a></li>
<li><a href="#">Шаблоны сайта</a></li>
<li class="ligreenbook"><a href="#">Дизайн портала как-то в мае причалил</a></li>
<li class="liredgrafik"><a href="#">Скрипты и шаблоны</a></li>
<li class="ligreenbook"><a href="#">Все для сайта uCoz</a></li>
</ul>
<ul class="ulmainmenu">
<li><a href="#">Сайт ZORNET.RU</a></li>
<li class="licross"><a href="#">Скрипты сайта</a></li>
<li class="liredgrafik"><a href="#">Шаблоны сайта</a></li>
<li><a href="#">Дизайн портала</a></li>
<li class="ligreenbook"><a href="#">Скрипты и шаблоны</a></li>
<li><a href="#">Дизайн портала как-то в мае причалил</a></li>
</ul>
</div>
</li>
<li class="p_menu"><a href="#">Поиск</a>
<ul class="v_menu">
<li class="liredgrafik"><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li class="liredgrafik"><a href="#">подменю</a></li>
</ul>
</li>
<li><a href="#">Регестрация</a></li>
<li class="p_menu"><a href="#">Карта сайта</a>
<ul class="v_menu">
<li class="liredgrafik"><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
</ul>
</li>
<li><a href="#">О сайте</a></li>
</ul>
</td>
фрагменты css для вывода
Код:
li.licross {
list-style: none; /* Убираем исходные маркеры */
background: url(img/plus.png) no-repeat 0 4px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
ul.menu {
list-style: none;
}
ul.ulmainmenu {
padding: 0; /* Убираем поля */
margin-left: 15px; /* Отступ слева */
}
br {
line-height: 10px;
}
.menu a{
background:#f7f3de;
color: #000;
padding: 5px;
display: block;
border-bottom: 1px solid #f7efd6;
transition: 0.5s all;
}
.sidebar{
width: 200px;
margin: 20px;
}
.menu a:hover{
background: #f7efd6;
padding: 10px 0 10px 20px;
}
.menu li:first-child a, .menu li .zornet_ru li:first-child a{
border-radius: 3px 3px 0 0;
}
.menu li:last-child a, .menu li .zornet_ru li:last-child a{
border-radius: 0 0 3px 3px;
border-bottom: 0;
}
.menu li .zornet_ru li a{
border-radius: 0;
}
.p_menu{position: relative;}
.v_menu{
position: absolute;
width: 100%;
left: 100%;
top: -9999px;
opacity: 0;
border-left: 10px solid transparent;
transition: 0.5s opacity;
}
.p_menu:hover .v_menu{
opacity: 1;
top: 0;
}
.zornet_ru{
position: absolute;
width: 400%;
left: 100%;
top: -9999px;
opacity: 0;
border-left: 10px solid transparent;
transition: 0.5s opacity;
}
.p_menu:hover .zornet_ru{
opacity: 1;
top: 0;
background:#f7f3de;
}
.zornet_ru{display:flex;}
|
Время: 05:36.
© OSzone.net 2001-
