|
Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Выпадающее меню в 2 столбца с бекграундом и своими маркерами списка |
|
Выпадающее меню в 2 столбца с бекграундом и своими маркерами списка
|
Старожил Сообщения: 282 |
Профиль | Сайт | Отправить PM | Цитировать
Всем приветы!
Не могу сообразить от слова "совсем" как быть в такой ситуации. Надо выпадающее меню такого типа 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; Может кто подскажет, как быть? |
|
------- Отправлено: 15:49, 10-08-2019 |
Новый участник Сообщения: 21
|
Профиль | Отправить PM | Цитировать Недостаточно информации.
Ошибка может быть где угодно. Загрузите код в песочницу, или дайте ссылку на вашу верстку. |
Отправлено: 17:45, 10-08-2019 | #2 |
Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети. Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля. |
Deadooshka Сообщения: 2482
|
Профиль | Отправить PM | Цитировать например http://www.behemothdan.com/2011/05/f...-in-wordpress/ .
как я понял, фишка в том, что ширина элементов меню плюс маргины должна быть в 2 раза (число колонок) меньше фиксированной ширины меню. display:block там портит всё. |
Отправлено: 18:44, 10-08-2019 | #3 |
Старожил Сообщения: 282
|
Профиль | Сайт | Отправить PM | Цитировать Цитата 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> @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 поэтому я хочу сделать выпадающее меню. если будет пример такой менюшки (чтобы в списке были свои маркеры и в два столбца) то попробую поменять у себя "мешающие" стили. |
|
------- Отправлено: 19:04, 10-08-2019 | #4 |
Deadooshka Сообщения: 2482
|
Профиль | Отправить PM | Цитировать koresaram, есть же сервисы типа https://jsfiddle.net/ где можно показать как оно работает. С приведённым отрывком html мало кто чего поймёт
|
|
Отправлено: 21:20, 10-08-2019 | #5 |
Старожил Сообщения: 282
|
Профиль | Сайт | Отправить PM | Цитировать добавил в этот сервис
https://jsfiddle.net/g7jtsu8o/1/ |
------- Отправлено: 22:44, 10-08-2019 | #6 |
Новый участник Сообщения: 21
|
Профиль | Отправить PM | Цитировать Цитата koresaram:
Для начала вам нужно разобраться с принципами блочной верстки. Таблицами никто уже не верстает. Выпадающее подменю - это не отдельная колонка, а блок который должен позиционироваться над основной версткой. Ну и без js здесь, скорее всего не обойтись. Нужно будет отслеживать события мыши (mouseover и mouseout) на пунктах основного меню, и в зависимости от этого показывать соответствующее подменю. |
|
Отправлено: 19:45, 12-08-2019 | #7 |
Старожил Сообщения: 282
|
Профиль | Сайт | Отправить PM | Цитировать путь к решению найден. Вкратце - обернуть выпадающие менюшки в 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> 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;} |
------- Отправлено: 20:09, 12-08-2019 | #8 |
Участник сейчас на форуме | Участник вне форума | Автор темы | Сообщение прикреплено |
| |||||
Название темы | Автор | Информация о форуме | Ответов | Последнее сообщение | |
Интерфейс - Пропало выпадающее меню при поиске | Brb | Microsoft Windows 10 | 1 | 14-06-2019 19:31 | |
Выпадающее меню в DLE | oIo_DeN_oIo | Вебмастеру | 0 | 03-11-2011 19:21 | |
Интерфейс - Windows 7 выпадающее меню? | karatv | Microsoft Windows 7 | 0 | 01-11-2009 12:55 | |
Вертикальное выпадающее меню | Olga_Erm | Вебмастеру | 3 | 21-02-2008 18:47 | |
Выпадающее меню | Surround | Вебмастеру | 3 | 19-01-2004 19:52 |
|