How can I create submenus in off canvas in Foundation 6?
I found this handy building block,
but it doesn't feature submenus in the LHS off-canvas menu.
I'd like a slide-in submenu like this one (this is Foundation 5).
I believe you're looking for Foundation 6's Drilldown menu. See link below and code snippet from page.
<ul class="vertical menu" data-drilldown>
<li>
Item 1
<ul class="vertical menu">
<li>Item 1A</li>
<!-- ... -->
</ul>
</li>
<li>Item 2</li>
</ul>
http://foundation.zurb.com/sites/docs/drilldown-menu.html
Related
i am using the Mittwald Typo3 Starterkit (Online-Demo). I figured out that this Starterkit uses the Typo3 fluid directory helper. How can one specify a specific CSS class for an active/selected page (I want to highlight the current page in the menu)?
Until now, I realised my Menus using Typo3 (HMENU/TMENU/ACT) but with this fluid directory helper I am completely stuck.
According to the Fluid Documentation there might be 2 ways:
classActive/classCurrent (string)
linkActive/linkCurrent (boolean)
The original code is:
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<li>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
My try which did not work (class "current" did not appear, if condition linkCurrent is not executed):
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<f:if condition="{linkCurrent}">
<li class="current">
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:if>
<f:else>
<li>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:else>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
Does anyone have an idea how this fluid directory helper works? Unfortunately, there are few examples around. Thank you a lot!
Note, the ce:menu.directory ViewHelper is not the same as the linked VHS Menu DirectoryViewHelper.
The ce: prefix is usually used by FluidStyledContent ViewHelpers, that also have menu viewhelpers.
If you want to know what properties each page row has available, you should use the f:debug ViewHelper to inspect the variable.
<f:debug>{page}</f:debug>
I have not tried that ViewHelper, ever, but it looks like it does not insert any information about, if it's the current page or if it's "active" (in rootline) like you're used to from HMENU content objects.
You might want to replace that ViewHelper with the VHS extensions menu ViewHelper.
You can use the following snippet to add a class to the active page,
I used an inline if to compare the data.pid with the page.data.uid here.
<!-- mainmenu begin -->
<ce:menu.directory pageUids="{0: '{mainMenuStartingPid}'}" as="pages" levelAs="level" maximumLevel="2">
<f:if condition="{pages}">
<ul id="{f:if(condition:'{mainMenuClass}',then:'c{mainMenuClass}',else:'mainmenu')}">
<f:for each="{pages}" as="page">
<!-- new inline if here -->
<li{f:if(condition: '{data.pid}=={page.data.uid}', then: ' class="current"', else: '')}>
<f:link.page pageUid="{page.uid}">
{page.title}
</f:link.page>
<!-- submenu deleted for better overview -->
</li>
</f:for>
</ul>
</f:if>
</ce:menu.directory>
<!-- mainmenu close -->
I've used the Wayfinder menu building extra with MODx Evo and am now attempting to use it with MODx Revo for a new site. It's working well apart from I can't yet see a way to have the 3rd level different to the 2nd level . See the way Wayfinder is currently outputting the menu (simplified here for clarity):
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown">
<a class="dropdown-toggle notransition" href="index.php?id=200">
Help
<i class="icon-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right " style="display: none;">
<li>
<a href="index.php?id=31">
FAQs
</a>
</li>
<li class="dropdown-submenu pull-left">
<a href="index.php?id=54">
Policies
</a>
<ul class="dropdown-menu pull-right" style="display: none;">
<li>
<a href="index.php?id=490">
Privacy Policy
</a>
</li>
<li>
<a href="index.php?id=489">
Terms and Conditions
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I need the 'Policies' sub-menu, with 'Privacy Policy' etc, to pull to the left, not to the right - defined in Wayfinder InnerTpl:
<ul class="dropdown-menu pull-right" style="display: none;">[[+wf.wrapper]]</ul>
So, is it possible with Wayfinder to have a 3rd level different to the 2nd level ???
I've browsed the docs and forums for days to no avail and hope that the amazing SO community has some insights. Thanks in advance!
I think you are going to have to do this with CSS, you can add the &levelClass to your wayfinder call [docs say " CSS class denoting every output row level. The level number will be added to the specified class (level1, level2, level3 etc if you specified 'level').]
that way when you can write some css for your third level items when you see something like:
<li class="dropdown-submenu pull-left level2">
your css could go something like:
li.dropdown-submenu.pull-left.level2 > ul {
/* css for pulling it right */
}
unfortunately the &levelClass does not do anything if you add [[+wf.classnames]] to the UL tag in the outer wrapper so you have to come at it sideways.
OR
your inner wrappers could be written to use a snippet to decide what classes to add:
<ul class="dropdown-menu [[!pullLeftOrRight? &id=`[[+wf.docid]]`]]">
[[+wf.wrapper]]
</ul>
Then in your snippet use the docid to determine where in the menu tree that subnav is.
[hopefully docid is available in the outerTpl - I'm not sure]
UPDATE
After reading your comments & the docs again, I think I have an idea that might work - check out the &categoryFoldersTpl attribute, setup your tpl for that with your pull right classes & for your 3rd level drop downs, set the rel="category" on only the third level resources as suggested in the docs. [which doesn't help anyone who wants different submenus for different levels, but may get you out of your bind]
I have probably a simple question for someone with bootstrap experience. On this page: http://limitedwave.com/watsonmetals/site/, in the first section just under the nav bar I have 4 'zones'. One house a logo, directly under it some text in a box, to the right of both a large navigation grid, and under that an 'extra row' below the grid only.
I'm not laying this out properly on the bootstrap grid and I'd like to. I have the content in divs that are more or less stacked and floated with css and heavy margin manipulation to make it look as it does. Am i wrong in assuming bootstrap can layout these divs more like a table via its grid? Perhaps this might also help with the fact that as soon as I resize my browser to the next smaller size from full width mac pro size, the logo and text shift right.
<section id="intro" data-speed="2" data-type="background">
<div class="container">
<div class="row-fluid">
<div id="welcome-screen" class="span16 text-left">
<div id="lrail">
<div id="logocontainer">
<img id="logo" src="img/logo-watson.png" alt="Watson Metals, LLC." width="130" />
</div>
<div id="welcome-box" class="span3 text-right">
Watson Metals manufactures quality metal building panels, for roof, siding, accessories for all building applications. We offer a pole barn package, steel siding or metal roofing for your personal specifications and needs.<br><br>
With an array of metal panel profiles such as Tuff-Rib, R-Panel, and our standing seam profile, we can provide material for almost any application. Our standing seam profile is available in either 12” or 16” widths and can be conveniently produced on your jobsite using our portable roll-former.
</div>
</div>
<div class="span12 text-center">
<div id="main-interface-container">
<ul id="interface-list">
<li><a class="link1" href="link1.php">Roofing Panels</a></li>
<li><a class="link2" href="link2.php">Post Frame Buildings</a></li>
<li><a class="link3" href="link3.php">Other Products</a></li>
<li><a class="link4" href="link4.php">Custom Trim</a></li>
<li><a class="link5" href="link5.php">Warranties and Information</a></li>
<li><a class="link6" href="link6.php">Frequently Asked Questions</a></li>
<li><a class="link7" href="link7.php">Energy Star</a></li>
<li><a class="link8" href="link8.php">About Our Company</a></li>
<li><a class="link9" href="link9.php">Contact Us</a></li>
<li><img id="home-locations" src="img/watson-locations.png" alt="Locations" /></li>
</ul>
</div>
</div>
<div class="span8 text-center"><span class="copyright">Copyright © 2013 Watson Metals LLC., All Rights Reserved.</span></div>
</div>
</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</section>
http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
Bootstrap's documentation is pretty solid.
The standard container->row->span# should work just fine for that grid. It should also take care of the responsiveUi issues you were having with the smaller screen.
I've been searching high and low for the past couple of days for the file(s) in Orchard where I can customize the markup used for the navigation
Traversing the tree in the Designer Tool and looking at the template and HTML views doesn't help much seeing as the MenuItemLink renders the <li> in the HTML view but nothing renders it in the template view. So I am quite stumped.
The original markup is like so (Taken from the Designer Tools Zone [Navigation]):
<div class="zone zone-navigation">
<article class="widget-navigation widget-menu-widget widget">
<nav>
<ul class="menu menu-main-menu">
<li class="first">
Work
</li>
</ul>
</nav>
</article>
</div>
What I need is to customize the classes on the <ul> and <li> elements, really.
If possible I'd love to be able to customize it all so I didn't need the <div class="zone zone-navigation"> for example.
But is this even possible?
<li> element is rendered by MenuItem shape (Core\Shapes\MenuItem.cshtml)
<nav> and top <ul> elements are rendered by Menu shape
(Core\Shapes\Menu.cshtml)
<a> element is rendered by MenuItemLink shape (Core\Shapes\MenuItemLink.cshtml)
If you want to override the defaults, simply put appropriate Menu.cshtml, MenuItem.cshtml or MenuItemLink.cshtml files in your theme (or better - copy the default one(s) and alter). Those will be used then instead of the default ones I wrote about above.
What is the best way to implement this layout with jQuery Mobile (menu-grid, 6 buttons in this example)?
I've tried the jQuery Mobile grid but I had many problems such as making it full width and full height, and changing the color to whatever I want.
You can create that in your own styling for that page. Float the icons and give them a 50% width (or less if you are using borders with box-model)
Since you dont have much going on which necessary requires body here, I feel going the way of header navigation might be the easiest. Just put the following code right after the header for your page. For eg:
<div data-role='header' data-position='inline' role='banner' data-theme='f' >
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1>
<div data-role="navbar" data-theme='c'>
<ul>
<li><a href="" >
Camera
</a></li>
<li><a href="" >
Wave
</a></li>
<li><a href="" >
Lock
</a></li>
<li><a href="" >
Pencil
</a></li>
<li><a href="" >
Star
</a></li>
<li><a href="" >
Friends
</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- header -->
Since you have six items here, jquery mobile will automagically align them in a 2x3 grid formation as displayed in your mockup (atleast will take care of the width). Other than this, your best bet for height might be doing some arithmetic in css. Eg: if header bar is 12px, then set each block's height:33%-4px;
For the color settings and such, jquery mobile theme roller works out way better than doing hand made css.
Use data grid "a"
Use the below one
<div data-role="navbar" data-grid="a">