Menu / Navigation toggle and show children on mouseover

[Bacelo]

Hello ProcessWire community,

I'm brand new to this great CMS and used to work before with Joomla.
I'm trying to understand more and more how ProcessWire works as I actually realize an project with it.

I'm not an developer an my skills are yet restricted - I'm still learning .

So far I'm doing fine until I sumbled over the navigation... I searcherd and read a lot here in the forum but I guess it would be great if someone could give an idea, the right path or a solution for what I need to realize:

- Home (only an menu-icon)
-> on click the next children show (got that done with a little jquery)
    - Child 1
        - Sub-Child 1
        - Sub-Child 2
        - Sub-Child 3
    - Child 2
    - Child 3
    ...
    -> Now, on mouseover of an child, I need the Sub-Children to show up -> toggle - Child 1 will swap to Sub-Child 1, Sub-Child 2, Sub-Child 3) but the main link remains still to parent (Child 1).

Any help or ideas are very appreciated.

Regards,
Bacelo

[onjegolders]

Hi Bacelo,

Welcome to the community and don't be worried about your current lack of skills. We all have to start somewhere. You're in a good place.

That said, it seems what you are asking is more of a CSS/JS question than anything to do with PW.

To start with I think you need to determine your structure in HTML. 

Eg:

Link

-Sublink

--Subsublink

--Subsublink

Link

Link

Link

-Sublink

Then figure out how to output that in PW. This part is relatively easy. It will be a combination of loops, referencing a links children.

Eg:

$link_pages = $pages->get("/")->children(); // These are your top level pages

foreach ($link_pages as $lp) {

echo "<li>" . $lp->title;

if (count($lp->children()) { // does this page have children?

echo "<ul>";

foreach ($lp->children() as $lpc) {

echo "<li>" . $lpc->title . "</li>";

}

echo "</ul>";

}

echo "</li>";

}

This is only intended as pseudo-code. Let us know if you get the basic idea.

[Bacelo]

Hi onjegolders,

many thanks for your warm welcome and your help! Really very nice from you as I had no idea how to start...

That's what I was guessing to have it realized with JS & CSS. I changed your code a bit and it works great so far :

$link_pages = $pages->get("/")->children(); // These are your top level pages

foreach ($link_pages as $lp) {
if ($lp->name != 'ueber' && $lp->name != 'info' && $lp->name != 'pdf') {
echo "<li class='{$lp}'>" . $lp->title . "</li>";
}
if (count($lp->children())) { // does this page have children?

echo "<ul id='sub'>";

foreach ($lp->children() as $lpc) {

echo "<li class='{$lpc}'>" . $lpc->title . "</li>";

}

echo "</ul>";

}

}

 
The CSS looks like:

ul #sub {
	display: none;
}
#sub li {
	display: inline;
	padding: 0 5px;
}

So, I can now toggle via CSS the state of the parent and the child.

Now I need to control that via JS - I tried the following code:

$(".1086").hover(
   function() {
      $(this).css("display","none");
   },
   function() {
      $('#sub').css("display","inline");
   }
);

How do I control the list class? I Have no clue how to enter the relevant PW-code in the JS ... 

.1086 is the list class of a parent link (for test) - it should be the class of the parent link ($lp).

I works with the manual entered list class (.1086), but it is not changing the state back on mouse out ...

Regards,
Bacelo

[onjegolders]

Could you make a link on jsfiddle or codepen? Then I'll gladly take a look.

[Bacelo]

Thanks onjegolders, here it is: http://jsfiddle.net/HENPz/

[adrian]

A couple of thoughts.

As far as a know, and from a little testing in your fiddle, class names can't start with a number. You need a letter or a dash/underscore.

Also, the idea of having a different class for each item doesn't seem particularly useful in this situation, but maybe you are using the class as an identifier in some way, rather than as a way to style the menu item?

[Bacelo]

Hi Adrian,

thanks for your thoughts.

Just checked on http://www.w3.org/TR/CSS21/syndata.html#characters and you are absolutely right. Thank you for that.

I wanted to use the ID number for the class to clearly control that (identifier). But I'll add a character etc. now in front.

Regards,

Bacelo

[diogo]

You have some problems with your html, you should clean all the useless classes and ids. the #sub id is even repeated, and ids should be unique in a page.

Is this what you want to do? http://jsfiddle.net/dXxtD/1/

I kept the html as clean as it could be, but you don't have to go to that extreme

[Bacelo]

Hi Diogo,

this is almost exactly the way I need to have it. I got it realized yesterday evening but not as nice as your code is!

Also many thanks to you and your help!

The only correction I will need to do is is hide the first layer on mouse-over (f.e. Child 1) and only show the sub-childs instead.

I'll post my solution here as soon as have this done.

Regards,

Bacelo

Edit - my code from yesterday evening:

$(".lp_1086").hover(
   function() {
      $(this).css("display","none");
	  $('#sub').css("display","inline");
   }
);
$('#sub').mouseleave(
   function() {
      $(this).css("display","none");
	  $('.lp_1086').css("display","block");
   }
);

[Bacelo]

I almost got it ... that's about how it should work - I still have an issue with the mouseleave / mouseout state. Still trying to egt that solved

http://jsfiddle.net/dXxtD/5/

[Bacelo]

Finally I got it done...

Many thanks to all of you for your help!!!

Here is the final code:

http://jsfiddle.net/dXxtD/6/

I'm more than happy

[diogo]

Might work, but your markup is not correct, since you have something outside the <li> tag in a <ul>. 

<ul>
    <li>
        <a></a>
    </li>
    <ul>
        ...
    </ul>
    ...
</ul>

not good.

My code with a very small change: http://jsfiddle.net/dXxtD/9/

[Bacelo]

Many thanks Diogo - this works like a charm!

[Bacelo]

Hello ,

may I also ask another question as I'm still working on this navigation?

Is it possible to show the children of a certain child (as f.e. children of all childs)?

Let's say:

- Child 1 (with pages)

  - Category 1 (Children 1 (of Child4))

  - Category 2 (Children 2 (of Child4))

  - Category 3 (Children 3 (of Child4))

- Child 2 (with pages)

  - Category 1 (Children 1 (of Child4))

  - Category 2 (Children 2 (of Child4))

  - Category 3 (Children 3 (of Child4))

- Child 3(with pages)

  - Category 1 (Children 1 (of Child4))

  - Category 2 (Children 2 (of Child4))

  - Category 3 (Children 3 (of Child4))

- Child 4 (hidden as used as categories option only - no pages in this area)

  - Children 1 (Category 1)

  - Children 2 (Category 2)

  - Children 3 (Category 3)

Background info for this

I'm using a field called "category" of type page.

I set up the page category as child with 3 children.

In the relevant child-template I have this field "category" included so I'm able to assign every new page to category.

This works fine so far, as I was able to select / filter every child page by adding the categories in the url (f.e. /child-1/category-2).
But I have no idea how to echo the children (Categories) of child 4 in the template to have this as navigation

Any help is appreciated.

(Please be lenient - I'm reading a lot in the PW docu and the forum and try do get it done and understand.)

Regards,
Bacelo

EDIT:

Would that be the right way? If so, how do I remove the /CHILD 4/ in the url to only get /category

    <ul><?php
    $categories = $pages->find("template=category");
    foreach($categories as $category) {
    echo "<li>" .
    "<a href='{$category->url}'>{$category->title}</a>" .
    "</li>";
    }
    ?></ul>