Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Выпадающее меню в 2 столбца с бекграундом и своими маркерами списка

Ответить
Настройки темы
Выпадающее меню в 2 столбца с бекграундом и своими маркерами списка

Старожил


Сообщения: 282
Благодарности: 1

Профиль | Сайт | Отправить PM | Цитировать


Изменения
Автор: koresaram
Дата: 10-08-2019
Описание: скриншот
Всем приветы!

Не могу сообразить от слова "совсем" как быть в такой ситуации. Надо выпадающее меню такого типа
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 тоже что-то не удались.

Может кто подскажет, как быть?

-------
настоящему корейцу завсегда везде ништяк!


Отправлено: 15:49, 10-08-2019

 

Новый участник


Сообщения: 4
Благодарности: 0

Профиль | Отправить PM | Цитировать


Недостаточно информации.
Ошибка может быть где угодно.
Загрузите код в песочницу, или дайте ссылку на вашу верстку.

Отправлено: 17:45, 10-08-2019 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.


Deadooshka


Сообщения: 2251
Благодарности: 577

Профиль | Отправить PM | Цитировать


например http://www.behemothdan.com/2011/05/f...-in-wordpress/ .
как я понял, фишка в том, что ширина элементов меню плюс маргины должна быть в 2 раза (число колонок) меньше фиксированной ширины меню. display:block там портит всё.

Отправлено: 18:44, 10-08-2019 | #3


Старожил


Сообщения: 282
Благодарности: 1

Профиль | Сайт | Отправить 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>
полный 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

поэтому я хочу сделать выпадающее меню.
если будет пример такой менюшки (чтобы в списке были свои маркеры и в два столбца) то попробую поменять у себя "мешающие" стили.

-------
настоящему корейцу завсегда везде ништяк!


Отправлено: 19:04, 10-08-2019 | #4


Deadooshka


Сообщения: 2251
Благодарности: 577

Профиль | Отправить PM | Цитировать


koresaram, есть же сервисы типа https://jsfiddle.net/ где можно показать как оно работает. С приведённым отрывком html мало кто чего поймёт
Это сообщение посчитали полезным следующие участники:

Отправлено: 21:20, 10-08-2019 | #5


Старожил


Сообщения: 282
Благодарности: 1

Профиль | Сайт | Отправить PM | Цитировать


добавил в этот сервис
https://jsfiddle.net/g7jtsu8o/1/

-------
настоящему корейцу завсегда везде ништяк!


Отправлено: 22:44, 10-08-2019 | #6


Новый участник


Сообщения: 4
Благодарности: 0

Профиль | Отправить PM | Цитировать


Цитата koresaram:
верстка полностью инвалидная ) »
В этом то и проблема...
Для начала вам нужно разобраться с принципами блочной верстки. Таблицами никто уже не верстает.
Выпадающее подменю - это не отдельная колонка, а блок который должен позиционироваться над основной версткой.
Ну и без js здесь, скорее всего не обойтись. Нужно будет отслеживать события мыши (mouseover и mouseout) на пунктах основного меню, и в зависимости от этого показывать соответствующее подменю.

Отправлено: 19:45, 12-08-2019 | #7


Старожил


Сообщения: 282
Благодарности: 1

Профиль | Сайт | Отправить 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>
фрагменты 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;}

-------
настоящему корейцу завсегда везде ништяк!


Отправлено: 20:09, 12-08-2019 | #8



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Выпадающее меню в 2 столбца с бекграундом и своими маркерами списка

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
Интерфейс - Пропало выпадающее меню при поиске 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




 
Переход