Оформление меню

Здравствуйте, не могу разобраться с выводом двухуровневого меню на сайте, одноуровневое получилось сделать, не могу понять как оформить вложенные пункты

<nav>
		<ul class="nav">
			<li><a href="">Главная</a></li>

			<li><a class="mark">Услуги</a> <em class="triangle"></em>
			  	<ul class="sub-nav">
					<li><a href="">Пункт 1 подменю</a></li>
					<li><a href="">Пункт 2 подменю</a></li>
					<li><a href="">Пункт 3 подменю</a></li>
				</ul>
			</li>

			<li><a href="">О нас</a></li>
         		<li><a href="">Наши специалисты</a></li>
          		<li><a href="">Фото</a></li>
		</ul>
</nav>

Помогите

Александр

20 ноября 2015, 09:20

2 124

Комментарии: 4

Максим Кузнецов

20 ноября 2015, 12:25

Вас интересует css-составляющая или то, как правильно настроить сниппет?

Если сниппет — то pdoMenu (документация) с параметром &level=`2`, указанием нужных родителей и оформлением шаблонов для внешнего и внутреннего уровня.

Если css — то у вложенного меню установить:

nav > ul > li {position: relative;}
nav > ul > li ul {display: none; position: absolute; top: 100%; left: 0;}

и для наведенного состояния:

nav > ul > li:hover ul {display: block;}

— как-то так. Ну и стилизовать по вкусу.

Александр

20 ноября 2015, 12:37

css имеется, не могу организовать правильный вывод пунктов,

/* menu */
.mark {font-weight: 400;}
.nav {list-style: none;}
.nav li {
	float: left;
	position: relative;
	background-color: #8DC900;
	font-size:16px}
.nav > li:first-of-type {border-radius: 5px 0 0 5px;}
.nav > li:last-of-type {border-radius: 0 5px 5px 0;}
.nav li a {
	display: block;
	text-decoration: none;
	color: #fff;
	padding-top: 8px;
	padding-right: 7px;
	padding-left: 7px;
	padding-bottom: 8px;
	border-radius: 5px;
}
.sub-nav {
	position: absolute;
	border-top: 15px solid transparent;
	left: -9999px;
	list-style:none;
	padding:0;}
.nav li:hover .sub-nav {
	left: 0;
	z-index: 999;}
.triangle {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #34495e;
	position: absolute;
	margin-top: 5px;
	left: -9999px;}
.nav li:hover .triangle {left: 15px;}
.sub-nav li {white-space: nowrap;}
.sub-nav > li:first-of-type {border-radius: 5px 5px 0 0;}
.sub-nav > li:last-of-type {border-radius: 0 0 5px 5px;}
.nav > li:hover > a {
	background: #ff9600;
	transition: background ease .5s;
} 
.sub-nav a {
	font-size: 90%;
	margin: 3px;
	transition: background ease .3s;}
.sub-nav a:hover {
	background: #ff9600;}

Александр

21 ноября 2015, 17:49

В общем разобрался, получилось так:

[[pdoMenu?
    &parents=`0`
    &level=`2`
    &displayStart=`1`
    &outerClass=`nav`
    &hereClass=`navactive`
    &tpl=`@INLINE <li><a [[+classes]] href="[[+link]]" [[+attributes]]>[[+menutitle]]</a></li>`
    &tplInner=`@INLINE [[+wrapper]]`
    &tplParentRow=`@INLINE <li><a [[+classes]] href="[[+link]]" class="mark">[[+menutitle]]</a> <em class="triangle"></em> <ul class="sub-nav">[[+wrapper]]</ul></li>`
]]

Николай

18 декабря 2016, 22:07

Еще один рабочий вариант для ищущих

<ul class="nav navbar-nav">
             
[[pdoMenu?
&startId=`7`
&level=`2`
&tplParentRow =`@INLINE
<li class="[[+classnames]] dropdown">
<a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">[[+menutitle]]</a>
<ul class="dropdown-menu">[[+wrapper]]</ul>
</li>`
&tplOuter=`@INLINE [[+wrapper]]`
]]

</ul><!-- /.nav navbar-nav -->

<ul class="nav navbar-nav">
              <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Computers</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Computer Cases & Accessories</a></li>
                            <li><a href="#">CPUs, Processors</a></li>
                            <li><a href="#">Fans, Heatsinks & Cooling</a></li>
                            <li><a href="#">Graphics, Video Cards</a></li>
                            <li><a href="#">Interface, Add-On Cards</a></li>
                            <li><a href="#">Laptop Replacement Parts</a></li>
                            <li><a href="#">Memory (RAM)</a></li>
                            <li><a href="#">Motherboards</a></li>
                            <li><a href="#">Motherboard & CPU Combos</a></li>
                        </ul>
                    </li>
</ul><!-- /.nav navbar-nav -->

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Оформление меню

Комментарии: 4

Здесь упомянуты