CODEWITHSUNDEEP
navigationmodxwayfinder
Daria
Daria

Reputation: 1

Menu with div inside on ModX

I tried to make a menu with 'div' inside like here — http://www.stylight.com/ using Wayfinder, but didn't find a way. Were should I look or what should I use to make it happen?

I try to achieve this HTML output:

<div class="navbar-collapse collapse" id="navigation">

		    <ul class="nav navbar-nav navbar-left">
			<li class="dropdown yamm-fw">
			    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Men<b class="caret"></b></a>
			    <ul class="dropdown-menu">

				<li>
				    <div class="yamm-content">
					<div class="row">
					    <div class="col-sm-3">
						<img src="img/men.jpg" class="img-responsive hidden-xs" alt="">
					    </div>
					    <div class="col-sm-3">
						<h3>Clothing</h3>
						<ul>
						    <li><a href="category.html">T-shirts</a></li>
						    <li><a href="category.html">Shirts</a></li>
						    <li><a href="category.html">Pants</a></li>
						    <li><a href="category.html">Accessories</a></li>
						</ul>
					    </div>
					    <div class="col-sm-3">
						<h3>Clothing</h3>
						<ul>
						    <li><a href="category.html">T-shirts</a></li>
						    <li><a href="category.html">Shirts</a></li>
						    <li><a href="category.html">Pants</a></li>
						    <li><a href="category.html">Accessories</a></li>
						</ul>
					    </div>
					    <div class="col-sm-3">
						<h3>Shoes</h3>
						<ul>
						    <li><a href="category.html">Trainers</a></li>
						    <li><a href="category.html">Sandals</a></li>
						    <li><a href="category.html">Hiking shoes</a></li>
						    <li><a href="category.html">Casual</a></li>
						</ul>
					    </div>
					</div>
				    </div>
				    <div class="footer clearfix hidden-xs">
					<h4 class="pull-right">Men</h4>
					<div class="buttons pull-left">
					    <a href="#" class="btn btn-default"><i class="fa fa-tags"></i> Sales</a>
					    <a href="#" class="btn btn-default"><i class="fa fa-star-o"></i> Favourites</a>
					    <a href="#" class="btn btn-default"><i class="fa fa-globe"></i> Brands</a>
					</div>
				    </div>

				</li>
			    </ul>
			</li>
			
			<li class="dropdown yamm-fw open">
			    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Women <b class="caret"></b></a>
			    <ul class="dropdown-menu" style="display: block;">

				<li>
				    <div class="yamm-content">
					<div class="row">
					    <div class="col-sm-3">
						<img src="img/women.jpg" class="img-responsive hidden-xs" alt="">
					    </div>
					    <div class="col-sm-3">
						<h3>Clothing</h3>
						<ul>
						    <li><a href="category.html">T-shirts</a></li>
						    <li><a href="category.html">Shirts</a></li>
						    <li><a href="category.html">Pants</a></li>
						    <li><a href="category.html">Accessories</a></li>
						</ul>
					    </div>
					    <div class="col-sm-3">
						<h3>Clothing</h3>
						<ul>
						    <li><a href="category.html">T-shirts</a></li>
						    <li><a href="category.html">Shirts</a></li>
						    <li><a href="category.html">Pants</a></li>
						    <li><a href="category.html">Accessories</a></li>
						</ul>
					    </div>
					    <div class="col-sm-3">
						<h3>Shoes</h3>
						<ul>
						    <li><a href="category.html">Trainers</a></li>
						    <li><a href="category.html">Sandals</a></li>
						    <li><a href="category.html">Hiking shoes</a></li>
						    <li><a href="category.html">Casual</a></li>
						</ul>
					    </div>
					</div>
				    </div>
				    <div class="footer clearfix hidden-xs">
					<h4 class="pull-right">Women</h4>
					<div class="buttons pull-left">
					    <a href="#" class="btn btn-default"><i class="fa fa-tags"></i> Sales</a>
					    <a href="#" class="btn btn-default"><i class="fa fa-star-o"></i> Favourites</a>
					    <a href="#" class="btn btn-default"><i class="fa fa-globe"></i> Brands</a>
					</div>
				    </div>

				</li>
			    </ul>
			</li>			
		</div>

Upvotes: 0

Views: 206

Answers (2)

Wayne Roddy
Wayne Roddy

Reputation: 19

i have a cloud theme site i can give you access to our walk you through it but essentially its 2 [[getResources]] calls

<li class="top-menu-item">
<a href="[[~[[+id]]]]" title="[[+pagetitle]]">[[+menutitle:default=`[[+pagetitle]]`]]</a>

      [[getResources? 
      &parents=`[[+id]]`
      &tpl=`nav-li-row-child-header_[[++theme]]` 
      &sortby=`menuindex` 
      &sortdir=`ASC` 
      &limit=`0` 
      &depth=`0`
      &toPlaceholder=`children`
      ]]
  [[+children:notempty=`<i class="fa fa-chevron-down js-mobile-drop"></i> <div class="child-sections"><div class="row-content">[[+children]]</div></div>`]]

http://modx-beetle.clients.modxcloud.com/

Upvotes: 0

LIannotti
LIannotti

Reputation: 382

It would have been helpful if you posted your code, or at least the HTML output you are hoping to achieve. Here is a link to some Wayfinder introductory examples.

Wayfinder outputs lists and list items. You will use chunk templates to control the output, add classes, add additional HTML tags, etc.

Upvotes: 0

Related Questions