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

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

<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
modx.pro
1 512
0

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

Максим Кузнецов
20 ноября 2015, 12:25
+2
Вас интересует 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
    0
    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
    0
    В общем разобрался, получилось так:
    [[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
      0
      Еще один рабочий вариант для ищущих

      <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