Фиксированный размер пунктов меню в Modx

В последнее время все чаще встает необходимость в момент верстки задавать фиксированную ширину для пунктов меню. Почему в последнее время спросите вы? Не так давно начал осваивать адаптивную верстку, одна из концепций которой позволяет (а иногда вынуждает) задавать ширину в процентном соотношении. Плюсы подобного подхода в том, что при любом разрешении экрана мы получим именно тот размер, который нами был запланирован. Больше никаких непонятных переносов при изменении размера экрана.

Итак, если мы хотим, чтобы наше меню выглядело как на макете, и при этом у нас было адаптивное меню, с процентной шириной каждого элемента, то мною на практике используется следующий прием. В Modx у нас есть редко задействуемое поле Link Attributes, которое мною используется под эти цели. Для каждого пункта меню задаем id, в котором будет четко указана ширина пункта.

Сначала, пропишем HTML код меню:

<ul id="menu">
	<li id="m1"><a href="#">1</li>
	<li id="m2"><a href="#">2</li>
	<li id="m3"><a href="#">3</li>
	<li id="m4"><a href="#">4</li>
	<li id="m5"><a href="#">5</li>
	<li id="m6"><a href="#">6</li>
</ul>

, далее стилизуем меню и стилизуем каждый из пунктов:

ul#menu {position:relative;width:100%;list-style:none;}
ul#menu li {position:relative;white-space:nowrap;}
ul#menu a {display:block;font:bold 0.8333333333333333em/1em Verdana, Geneva, sans-serif;color:#000;text-align:center;text-decoration:underline;}

, после чего пропишем id для каждого из пунктов:

#m1 {width:15.45893719806763%;}
#m2 {width:23.67149758454106%;}
#m3 {width:11.83574879227053%;}
#m4 {width:11.11111111111111%;}
#m5 {width:17.39130434782609%;}
#m6 {width:20.53140096618357%;}

Теперь осталось добавить id в поле Link Attributes каждого из отображаемых в меню документов и воспользоваться вывод WayFinder, который сформирует меню в том виде, как мы хотим.

Вызовем WayFinder:

[[Wayfinder? &startId=`0` &level=`2` &outerTpl=`tmOut` &rowTpl=`tmRow` &firstClass=`` &lastClass=``]]

Добавим чанк обертку для меню (tmOut):

<ul id="menu">
	[+wf.wrapper+]
</ul>

, пропишем чанк для вывода пунктов меню (tmRow), не забыв вывести Link Attributes:

	<li [+wf.attributes+]><a href="[+wf.link+]"[+wf.classes+]> [+wf.linktext+]</a></li>

Таким образом мы получили полноценное меню, где каждый пункт будет иметь в стилях прописанную ширину. Единственный момент, за которым стоит следить, чтобы поле Link Attributes не попадало в другие выводы сниппет WayFinder, чтобы заданные стили не влияли на другие меню, например, на карту сайта.