Перейти к содержимому


Фотография
- - - - -

Верстка адаптивного меню ZOO Category


Сообщений в теме: 4

#1 raddar

raddar

Отправлено 02 April 2018 - 08:47

НЕ специалист, но попробовал, естественно не замутилось.

 

Применительно к каталогу сайта надо замутить адаптивное меню ZOO Category в левом столбике http://u67814.netangels.ru/

 

Стырил код, адаптировал под себя, удалось лишь получить некое подобие, вот код

@media screen and (max-width: 800px) {
	.zoo-category-warp6 {
        position: relative;
		min-height: 40px;
	}	

  .zoo-category-warp6 ul {
		width: 180px;
		padding: 5px 0;
    position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #FAFAFA;
		border-radius: 0px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
  

  
	.zoo-category-warp6 li {
		display: none; /* скрыть все <li> пункты */
		margin: 0;
	}
	.zoo-category-warp6 .level1 {
		display: block; /* показывать только текущие активные <li> пункты */
	}
  
  ul.zoo-category-warp6.menu.menu-sidebar li.level1 {
		display: block; /* показывать только текущие активные <li> пункты */
	}
  
	.zoo-category-warp6 a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}
	.zoo-category-warp6 .level1 a {
		background: none;
		color: #666;
	}
 
	/* при наведении на пункты меню */
	.zoo-category-warp6 ul:hover {
		background-image: none;
	}
	.zoo-category-warp6 ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.zoo-category-warp6 ul:hover .current {
		background: url(images/icon-check.png) no-repeat 10px 7px;
	}
 
	/* адаптивное меню справа */
	.zoo-category-warp6.right ul {
		left: auto;
		right: 0;
	}
 
	/* адаптивное меню по центру */
	.zoo-category-warp6.center ul {
		left: 50%;
		;
	}
 
}

Проблема еще в том что одна ветка подержит подменю, подскажите решение плиз или как лучше сделать?!

 

 


  • 0

#2 LeMax

LeMax

Отправлено 02 April 2018 - 10:50

При беглом осмотре пока заметил одну ошибку:

@media screen and (max-width: 800px)
.zoo-category-warp6 li {
    display: none;
    margin: 0;
}

Вы сами скрываете вывод этих уровней при экране менее 800 пикселей.

Именно поэтому они пропадают на мобильных и планшетных экранах.

А далее - нужно просто хорошо посидеть со стилями и упаковать все как нужно.

Если проблема в чем-то другом, то тогда нужны скрины и пояснение: как есть сейчас и как хотелось бы :)


  • 0

#3 raddar

raddar

Отправлено 02 April 2018 - 12:59

Вы сами скрываете вывод этих уровней при экране менее 800 пикселей.

Они не исчезают даже есди этот участок убрать ..

 

меню надо такое же как например здесь.. http://screenshot.su...4c058acc35b.jpg

 

https://www.jessnail...nogtevoi-servisвот..незатейливо ..


  • 0

#4 LeMax

LeMax

Отправлено 02 April 2018 - 13:01

Если кратко - то Вам проще то же самое сделать через стандартное меню (в шаблоне, где такое уже предусмотрено)


  • 0

#5 raddar

raddar

Отправлено 02 April 2018 - 13:43

Если кратко - то Вам проще то же самое сделать через стандартное меню (в шаблоне, где такое уже предусмотрено)

нужен именно этот шаблон..

пока все попытки тщетны((


  • 0




Click to return to top of page in style!