rusalka_tany
Житель
- Автор темы
- #1
Добрый день.
Появилась потребность переделать горизонтальное меню, чтоб магазин был одной закладкой, но раскрывал категории и подкатегории 2 и 3 уровнем соответственно.
Почти получилось, но выглядит каряво.
Желаемый результат - выпадание 3 уровня четко справа и первая подкатегория на одной горизонтальной линии с родителем, как тут:
[HIDE]В header.php
в stylesheet.css
[/HIDE]
Буду рада любой помощи!
Появилась потребность переделать горизонтальное меню, чтоб магазин был одной закладкой, но раскрывал категории и подкатегории 2 и 3 уровнем соответственно.
Почти получилось, но выглядит каряво.
Желаемый результат - выпадание 3 уровня четко справа и первая подкатегория на одной горизонтальной линии с родителем, как тут:
[HIDE]В header.php
Код:
<li><a href="">Каталог товаров</a>
<div><ul><?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php if ($category['children']) { ?>
<div><?php for ($i = 0; $i < count($category['children']);) { ?>
<ul><?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?> <?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li><?php } ?></ul></div></li>
Код:
/* Menu
------------------------------------------------------------*/
#menu {
height: 37px;
margin-bottom: 10px;
border-top: 1px solid #5D8EC4;
border-bottom: 1px solid #5D8EC4;
background: #69A0DD;
background: -moz-linear-gradient(top, #69A0DD 50%, #6495CC 100%);
background: -webkit-gradient(linear, center top, center bottom, color-stop(50%, #69A0DD), color-stop(100%, #6495CC));
-webkit-box-shadow: 0 8px 10px -8px #33506F,
inset 0 2px 0 -1px #78ADE8;
-moz-box-shadow: 0 8px 10px -8px #33506F,
inset 0 2px 0 -1px #78ADE8;
box-shadow: 0 8px 10px -8px #33506F,
inset 0 2px 0 -1px #78ADE8;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 6px 5px 0 0;
border-right: 1px solid #5D8EC4;
-webkit-box-shadow: 2px 0 0 -1px #78ADE8;
-moz-box-shadow: 2px 0 0 -1px #78ADE8;
box-shadow: 2px 0 0 -1px #78ADE8;
-webkit-transition: background .2s;
-moz-transition: background .2s;
transition: background .2s;
}
#menu > ul > li:hover {
background: #78ABE4;
-webkit-box-shadow: 0 0 0 0 #78ADE8;
-moz-box-shadow: 0 0 0 0 #78ADE8;
box-shadow: 0 0 0 0 #78ADE8;
}
#menu > ul > li > a {
font-size: 10px;
font-weight: bold;
color: #fff;
line-height: 14px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
margin-bottom: 5px;
z-index: 6;
position: relative;
-webkit-text-shadow: 0 1px 1px #3D5F83;
-moz-text-shadow: 0 1px 1px #3D5F83;
text-shadow: 0 1px 1px #3D5F83;
}
#menu > ul > li:hover > a {
}
#menu > ul > li > div {
display: none;
background: #78ABE4;
position: absolute;
z-index: 5;
border-left: 1px solid #5D8EC4;
border-right: 1px solid #5D8EC4;
border-bottom: 1px solid #5D8EC4;
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
font-size: 10px;
font-weight: bold;
color: #fff;
display: block;
white-space: nowrap;
min-width: 120px;
-webkit-text-shadow: 0 1px 1px #3D5F83;
-moz-text-shadow: 0 1px 1px #3D5F83;
text-shadow: 0 1px 0 #5D8EC4;
-webkit-transition: background .1s;
-moz-transition: background .1s;
transition: background .1s;
}
#menu > ul > li ul > li > a:hover {
background: #5D8EC4;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}
#menu > ul > li > div > ul > li > div {
display: none;
background: #78ABE4;
position: relative;
z-index: 5;
border-left: 1px solid #5D8EC4;
border-right: 1px solid #5D8EC4;
border-bottom: 1px solid #5D8EC4;
}
#menu > ul > li > div > ul > li:hover > div {
position: absolute;
display: table-cell;
left: 100px;
}Буду рада любой помощи!
![[Вик Орлов] Хардселл PRO 3 уровня (2021)](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=)
