Forum

Thread tagged as: Question, Problem, Meta

Foundation 5 Navigation Dropdown Menu

Like foundation 5 for a number of treasons and modifying the template for Perch. As a relative newbie getting on great and the pageDepth explanation by Drew and the outline code by James Higginbotham helped get to a working navigation but...

To use the foundation menu each dropdown parent <a> is given an id="hover?" to identify parent and data block to display on hover.

Having got this far not sure if can create an incrementing id="variable" for each <a> with subitems or if even possible.

Or, if there is a simpler or easier option! Code so far as below. Maybe complicating this and hopefully, someone can suggest how or what better to use:-

<?php perch_pages_navigation(array(
        'levels'    => 2,
        'template'  => array('f-nav.html', 'f-nav-d.html'),
        ));
?>

f-nav.html
<perch:before>
   <ul role="navigation" <perch:if id="pageDepth" match="eq" value="1">class="button-group"</perch:if>
    <perch:if id="pageDepth" match="eq" value="2">class="dropdown"</perch:if>>
</perch:before>
    <li 
        <perch:if exists="current_page">class="active selected"</perch:if>
        <perch:if exists="subitems"> class="has-dropdown"</perch:if>
        <perch:if exists="ancestor_page"> class="ancestor"</perch:if>>
        <perch:if exists="subitems">
            <a data-dropdown="hover1" data-options="is_hover:true; hover_timeout:500" class="button" href="<perch:pages id="pagePath" />" >
        <perch:else />
            <a class="button" href="<perch:pages id="pagePath" />" >         
        </perch:if>          
        <perch:pages id="pageNavText" /></a>
        <perch:pages id="subitems" encode="false" />
    </li>
<perch:after>
    </ul>
</perch:after>

f-nav-d.html
<perch:before>
    <ul id="hover1" class="f-dropdown mega" data-dropdown-content>
</perch:before>
    <li>
        <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>
        <perch:pages id="subitems" encode="false" />
    </li>
<perch:after>
</ul>
</perch:after>
Rob Willox

Rob Willox 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

You can't use perch:content tags in this context.

id="hover<perch:pages id="perch_item_index" />">
Rob Willox

Rob Willox 0 points

6 years ago

Thought had maybe found a possible answer with

id="hover<perch:content id="perch_item_index" />">

but nothing is appended in the output.

If can get working, can it be used with other elements eg

<a data-dropdown="hover<perch:content id="perch_item_index" />">
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Again, you can't use perch:content tags in this context. Use perch:pages tags.
Rob Willox

Rob Willox 0 points

6 years ago

Thanks for that Drew; will try again as suggested.
Rob Willox

Rob Willox 0 points

6 years ago

That makes the difference, thanks but an anomaly, although incrementing at the top level (hover2, hover3) each sublevel <ul> is numbering the same (hover1). Html output:-

<ul role="navigation" class="button-group">

  <li ><a class="button" href="/" >Home</a></li>

  <li class="has-dropdown">

  <a data-dropdown="hover2" data-options="is_hover:true; hover_timeout:500" class="button" 

href="/about-us/" >
  About us</a>

    <ul id="hover1" class="f-dropdown mega" data-dropdown-content>

    <li><a href="/about-us/history.php">History</a></li>
    <li><a href="/about-us/more-history.php">More History</a></li>
    </ul>
  </li>

  <li class="has-dropdown">

  <a data-dropdown="hover3" data-options="is_hover:true; hover_timeout:500" class="button" 

href="/electrical-services/" >Services</a>

    <ul id="hover1" class="f-dropdown mega" data-dropdown-content>

    <li><a href="/domestic-electrical-services.php">Domestic Electrical Services</a>
    </li>
    </ul>
  </li>
</ul>

Reading the docs, if I understand, is that the numbering is reset each subitems group so showing as hover1 each time.

So, that is not going to work even if they were numbered sequentially.

Is there a way to repeat the top level incremented id for its subitems as that looks like what is needed for the dropdown to work?

Maybe complicating things too much as there might be a simpler way to implement dropdown menus.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Do the numbers need to be sequential, or just unique?
Rob Willox

Rob Willox 0 points

6 years ago

Think they only need to be unique and the parent id matches the subitems to identify the relevant dropdown for each top level item.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

You could try using id="_id"
Rob Willox

Rob Willox 0 points

6 years ago

Have tried substituting it for perch_item_index in a number of combinations but don't seem to be getting anywhere. Doesn't output any value.

Not sure exactly how it should be used to pass on a value. Is it used in conjunction with perch_item_index to generate unique values?
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

It should be a unique ID for each item.
Rob Willox

Rob Willox 0 points

6 years ago

Sorry, must be a friday thing, but just not getting it! Can't see how it is passed to its child <ul> to match up the subitems with their parent dropdown.

In the hard-coded version each data-dropdown has a unique id with the same id for its submenu <ul> but can't see how this can be accomplished when dynamically generated with perch_pages_navigation.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Does anything displayed with <perch:showall /> look useful?
Rob Willox

Rob Willox 0 points

6 years ago

When added to the right hand navigation it shows listing:-

About Access Electrical

History
ID  Value
perch_page_path /about/index.php
pageID  11
pageParentID    7
pagePath    /about/history.php
pageTitle   History
pageNavText History
pageNew 0
pageOrder   1
pageDepth   2
pageSortPath    /about-us/history
pageTreePosition    000-002-001
pageSubpageRoles    
pageSubpagePath /about
pageHidden  0
pageNavOnly 0
pageAccessTags  
pageCreatorID   1
pageModified    2015-03-20 17:36:57
pageAttributes  
pageAttributeTemplate   default.html
pageTemplate    
templateID  0
pageSubpageTemplates    
pageCollections 
subitems    
perch_item_first    true
perch_item_zero_index   0
perch_item_index    1
perch_item_rev_index    2
perch_item_rev_zero_index   1
perch_item_odd  
perch_item_count    2
More History
ID  Value
perch_page_path /about/index.php
pageID  12
pageParentID    7
pagePath    /about/more-history.php
pageTitle   More History
pageNavText More History
pageNew 0
pageOrder   2
pageDepth   2
pageSortPath    /about-us/more-history
pageTreePosition    000-002-002
pageSubpageRoles    
pageSubpagePath /about
pageHidden  0
pageNavOnly 0
pageAccessTags  
pageCreatorID   1
pageModified    2015-03-20 13:05:59
pageAttributes  
pageAttributeTemplate   default.html
pageTemplate    
templateID  0
pageSubpageTemplates    
pageCollections 
subitems    
perch_item_last true
perch_item_zero_index   1
perch_item_index    2
perch_item_rev_index    1
perch_item_rev_zero_index   0
perch_item_odd  odd
perch_item_count    2

and looks like there is an incremented item count for the 2 menu items.

Not sure how to add to the perch_pages_navigation block.
Rob Willox

Rob Willox 0 points

6 years ago

Wasn't thinking about last comment! Have added to template files for top navigation and this is what it output;-

Perch_All Output

Looks like top level menu items are incrementing ok but subitems all show as 1.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Which ID are you using? I'm not sure what I'm looking at.
Rob Willox

Rob Willox 0 points

6 years ago

Not sure what you mean by 'which ID are you using'. All did was add perch:showall to menu template and refreshed page to get listing. Looking at the source can see top level menu items are numbered hover1 to hover3 as expected but in each case where there is a dropdown each are being numbered hover1. Can't see how to re-use top level menu item id for its corresponding submenu.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Ok. I'm really not sure how to help as I don't understand the problem.

Can you distill it to a simpler example?
Rob Willox

Rob Willox 0 points

6 years ago

The best example is the static html hover menu code:-

<ul class="button-group" role="navigation">
    <li><a href="#" class="button">Home</a></li>
    <li><a href="#" class="button">About Us</a></li>
    <li><a href="#" data-dropdown="hover1" data-options="is_hover:true; hover_timeout:500" class="button">Services</a></li>
      <ul id="hover1" class="f-dropdown mega" data-dropdown-content>
        <li><a href="#">This is a link</a></li>
        <li><a href="#">This is another</a></li>
        <li><a href="#">Yet another</a></li>
      </ul>
<li><a href="#" data-dropdown="hover2" data-options="is_hover:true; hover_timeout:500" class="button">Domestic</a></li>
      <ul id="hover2" class="mega f-dropdown" data-dropdown-content>
        <li><a href="#">This is a link</a></li>
        <li><a href="#">This is another</a></li>
        <li><a href="#">Yet another</a></li>
      </ul>
  <li><a href="#" class="button">Commercial</a></li>
  <li><a href="#" data-dropdown="hover3" data-options="is_hover:true; hover_timeout:500" class="button">Contact Us</a></li>
</ul>

Each menu with a dropdown has an <a> [data-dropdown="same-id"] and each block of dropdown items has a corresponding <ul> [id="same-id"] matching its parent item.

Hope that helps.

Maybe I'm over-complicating things trying this menu option and going to try something simpler in the meantime.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Use:

<a data-dropdown="hover<perch:pages id="pageID" />">

and:

<ul id="hover<perch:pages id="pageParentID" />">
Rob Willox

Rob Willox 0 points

6 years ago

That works perfectly, thanks Drew. Looking at the output from showall can see now these id's but as new to Perch didn't realise how they could be used but learning every day!

Thanks again for your help and patience.