Kraken: Drop Jumbo with Astro Navbar. Conversion to ProcessWire

[Christophe]

Hello,

I would like to use the Jumbo version of Drop (Simple, mobile-friendly dropdown menus).

With the Navbar version of Astro (A collection of five mobile-first navigation patterns, with an optional expand-and-collapse menu on small screens).

https://cferdinandi.github.io/kraken/odds-and-ends.html

The Drop demo also uses Astro.

Here is the static code that I currently have for the project I want it for:

<nav class="nav-wrap-navbar nav-collapse">                
    <a class="nav-toggle-navbar" data-nav-toggle="#nav-menu" href="#">Menu</a>
    <div class="nav-menu-navbar" id="nav-menu">
    
        <ul class="nav-navbar">
        
            <li class="dropdown-jumbo" data-dropdown>
                <a href="FALLBACK-URL.com">
                    Link
                    <span class="dropdown-show">+</span>
                    <span class="dropdown-hide">-</span>
                </a>
                <div class="dropdown-menu-jumbo" data-dropdown-menu>
                    <div class="container">
                        <div class="grid-three-fourths float-center">                                    
                            <ul>
                                <li><a href="#">Sub-link</a></li>                                    
                            </ul>  
                        </div>                                  
                    </div>
                </div>
            </li>
                 
        </ul>
        
    </div>
</nav>

The first href="#" has to stay as it is.

href="FALLBACK-URL.com" is here in case javascript is disabled. I can see later what I will put (first child, sitemap, etc.).

<div class="container"><div class="grid-three-fourths float-center"> is specific to this project.

<span class="dropdown-show">+</span><span class="dropdown-hide">-</span> logically only has to appear when there is at least one child.

I've started testing things with a menu (with a function) I have for one website, but as you can see the sub-link structure is quite different from the link structure.

The homepage link should stay a simple link with no drop-down.

I need help from the masters .

Thanks in advance.

Have a nice week!

NB: can someone change from Processwire to ProcessWire in the title of the topic please...

[Macrura]

there are some examples of custom functions to generate specific menus; maybe this could provide some ideas: https://processwire.com/talk/topic/9033-mega-menu/?p=87201

[Christophe]

Thank you. I'll try to understand the logic behind the code.

I'm really new to PHP.

Edit: I'm working on it, but the navigation structure and logic is different from the examples so I'm having a hard time figuring out how to adapt it...

And I'm not sure I really understand what the examples code is doing.

[Macrura]

Can you post your page tree structure, and then how you want that to translate into the menu, this way a function can be written to get the menu to output according to that structure, but with the required markup.

[Christophe]

Hello,

For the moment, I only have something like the following in place:

Homepage     Location 1     Location 2     Location 3     Other link(s)

• Homepage: one single link.
• Location 1: several pages on different levels, but normally only one sub-level in this menu (with a contact link, among other links).
  For the other levels there will certainly be another menu on the side.
• Location 2: one sub-level only also. There will probably be no more than 3 or 4 pages for this location (including a contact page).
• Location 3: the same as above but normally with only 2 pages (including a contact page).
• Other link(s): if there are no children/is no sub-link,

<span class="dropdown-show">+</span>
<span class="dropdown-hide">-</span>

and

<div class="dropdown-menu-jumbo" data-dropdown-menu>
 <div class="container">
  <div class="grid-three-fourths float-center">                                    
   <ul>
    <li><a href="#">Sub-link</a></li>                                    
   </ul>  
  </div>                                  
 </div>
</div>

should not be rendered.

Not sure how much of the (only) html code can not be included in the function.

NB: it could take a lot of time before I can receive/get some (good) content for/from each location: images, texts...

[Christophe]

Hello again,

I'd also like to understand what the code is doing .

[Macrura]

i think the referenced functions are simply conditional and foreach statements that are crafted to get a needed output.

If you are doing a mega menu, you just need to analyze the structure/pattern and try and see if there is some way to foreach through your page tree or menu tree and get the output you want.

[Christophe]

I've decided to restart almost from scratch, and without a function for this time.

So, for the moment, there is:

• this in the head:

<link rel="stylesheet" href="<?php echo $config->urls->templates?>dist/css/main.min.css" />
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>dist/css/drop-jumbo.min.css" />
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>dist/css/astro-navbar.min.css" />
    <link rel="stylesheet" href="<?php echo $config->urls->templates?>styles/my-custom-css.css" />    
    
</head>

• this at the end of the body:

<script src="<?php echo $config->urls->templates?>dist/js/drop.min.js"></script>
<script src="<?php echo $config->urls->templates?>dist/js/astro.min.js"></script>
<script src="<?php echo $config->urls->templates?>dist/js/classList.min.js"></script>
<script>
    drop.init();
    astro.init();
</script>
<!-- feature detection <script src="dist/js/detects.min.js"></script> -->
    
</body>

• and this in the header:

<div class="clearfix">
            <div class='topnav'>
                <nav class="nav-wrap-navbar nav-collapse">                
                    <a class="nav-toggle-navbar" data-nav-toggle="#nav-menu" href="#">Menu</a>
                    <div class="nav-menu-navbar" id="nav-menu">
                        <ul class="nav-navbar">                            
                            <?php
                                if($homepage) {
                                    echo "<li class='current'><a href='{$config->urls->root}'>{$homepage->title}</a></li>";
                                }
                                else {
                                    echo "<li><a href='{$config->urls->root}'>{$homepage->title}</a></li>";
                                }                                                                                                                
                                foreach($homepage->children as $page) {
                                    $subchildren = $page->children;
                                    if(count($subchildren)) {                                        
                                        echo "<li class='dropdown-jumbo' data-dropdown><a href='{$subchildren->first()->url}'>{$page->title}<span class='dropdown-show'>+</span><span class='dropdown-hide'>-</span></a><div class='dropdown-menu-jumbo' data-dropdown-menu><div class='container'><div class='grid-three-fourths float-center'><ul>";
                                        foreach($page->children as $subchildren) {
                                            echo "<li><a href='{$subchildren->url}'>{$subchildren->title}</a></li>";
                                        }
                                        echo "</ul></div></div></div></li>";
                                    }                                    
                                    else {                                        
                                        if($page->id == $page->rootParent->id) {
                                            echo "<li class='current'>";
                                        }
                                        else {
                                            echo "<li>";
                                        }
                                        echo "<a href='{$page->url}'>{$page->title}</a></li>";                                        
                                    }                                                                
                                }                                
                            ?>
                                
                        </ul>
                    </div>
                </nav>
            </div>
        </div>  

I've tried a lot of variations everywhere.

The fact is that I've also tried at the same time to add a class current to the homepage link and the other first level links that don't have children (I'm not sure yet if I should have one also on those with children and what to do with the children as they normally have an active class applied to them with javascript).

For the moment I can't manage to have the current class only applied to a first level link that is not the homepage. When one is "current" the homepage is also "current".

But my real "issue" currently (what I have to resolve first) is the fact that I've replaced (but not only) something like
<div class="grid-half"> Content </div>
with
<ul><li><a>Text</ul></li></a>

in the orginal code, and perhaps because of this when I want to click on a sub-link in the drop-down it doesn't load the page (but the url is fine).

So, I'm finally going to have to choose a username (not so easy) and create a GitHub account in order to post to the issues section of the Drop GitHub repository.

NB: to choose $homepage->children as $page is perhaps not the best choice in this case (I've tried with something else at some point but it wouldn't work). It could be part of some code I've borrowed, I don't remember exactly.

PS: I could provide a link to the online development website to see the link "issue" in action...

The problem could come from an active class being applied to a second-level anchor(?).

[Christophe]

The main "issue" is fixed.

Now I would need to have the code in the header "transformed" in order to have first-level links (whether they have children or not, and including the homepage) in another color when their related page is the current one.

And also, for a first-level link that has children, the current sub-link/child would also be in another color.

Thank you for some help!

[Christophe]

<div class="clearfix">
            <div class='topnav'>
                <nav class="nav-wrap-navbar nav-collapse">                
                    <a class="nav-toggle-navbar" data-nav-toggle="#nav-menu" href="#">Menu</a>
                    <div class="nav-menu-navbar" id="nav-menu">
                        <ul class="nav-navbar">                            
                            <?php
                                if($homepage->id == $page->rootParent->id) {
                                    echo "<li class='current'><a href='{$config->urls->root}'>{$homepage->title}</a></li>";
                                }
                                else {
                                    echo "<li><a href='{$config->urls->root}'>{$homepage->title}</a></li>";
                                }                                                                                                                
                                foreach($homepage->children as $h_child) {
                                    $subchildren = $h_child->children;
                                    if(count($subchildren)) {                                        
                                        echo "<li class='dropdown-jumbo' data-dropdown><a href='{$subchildren->first()->url}'>{$h_child->title}<span class='dropdown-show'>+</span><span class='dropdown-hide'>-</span></a><div class='dropdown-menu-jumbo' data-dropdown-menu><div class='container'><div class='grid-three-fourths float-center'><ul>";
                                        foreach($h_child->children as $subchildren) {
                                            if($subchildren->id == $page->id) {
                                                echo "<li class='current'><a href='{$subchildren->url}'>{$subchildren->title}</a></li>";
                                            }
                                            else {
                                                echo "<li><a href='{$subchildren->url}'>{$subchildren->title}</a></li>";
                                            }
                                        }
                                        echo "</ul></div></div></div></li>";
                                    }                                    
                                    else {                                        
                                        if($h_child->id == $page->id) {
                                            echo "<li class='current'>";
                                        }
                                        else {
                                            echo "<li>";
                                        }
                                        echo "<a href='{$h_child->url}'>{$h_child->title}</a></li>";                                        
                                    }                                                                                     
                                }                                
                            ?>
                                
                        </ul>
                    </div>
                </nav>
            </div>
        </div>          

I will be editing this.

I still need help from php experts.

Now, only remains to have a current sub(-)child/link (and its direct parent also) in another color thanks to a current class(es).

Now, only remains to have the parent of the current sub(-)child/link in another color thanks to a current class.

  

NB: at the end, the code will certainly be duplicating things. It is already...

[Christophe]

Started transforming the code to be able to add a current class to the parent of the current sub(-)child/link:

<div class="clearfix">
            <div class='topnav'>
                <nav class="nav-wrap-navbar nav-collapse">                
                    <a class="nav-toggle-navbar" data-nav-toggle="#nav-menu" href="#">Menu</a>
                    <div class="nav-menu-navbar" id="nav-menu">
	                    <ul class="nav-navbar">	                        
	                        <?php
	                            if($homepage->id == $page->rootParent->id) {
	                                echo "<li class='current'><a href='{$config->urls->root}'>{$homepage->title}</a></li>";
	                            }
	                            else {
	                                echo "<li><a href='{$config->urls->root}'>{$homepage->title}</a></li>";
	                            }                        	                        	                            	                        
			                    foreach($homepage->children as $h_child) {
				                    $subchildren = $h_child->children;				                           
				                    if(count($subchildren)) {	
				                        if($subchildren->id == $page->id) {
				                            $class = 'current ';    				                    
				                        }
				                        else {
				                            $class = '';
				                        }				                    			                    			                        
					                    echo "<li class='{$class}dropdown-jumbo' data-dropdown><a href='{$subchildren->first()->url}'>{$h_child->title}<span class='dropdown-show'>+</span><span class='dropdown-hide'>-</span></a><div class='dropdown-menu-jumbo' data-dropdown-menu><div class='container'><div class='grid-three-fourths float-center'><ul>";
					                    foreach($h_child->children as $subchildren) {
					                        if($subchildren->id == $page->id) {
                                                echo "<li class='current'><a href='{$subchildren->url}'>{$subchildren->title}</a></li>";
                                            }
                                            else {
                                                echo "<li><a href='{$subchildren->url}'>{$subchildren->title}</a></li>";
                                            }
					                    }
					                    echo "</ul></div></div></div></li>";
				                    }			                        
			                        else {                                        
                                        if($h_child->id == $page->id) {
                                            echo "<li class='current'>";
                                        }
                                        else {
                                            echo "<li>";
                                        }
                                        echo "<a href='{$h_child->url}'>{$h_child->title}</a></li>";                                        
                                    }                     	                            		                        
	                            }			                    
	                        ?>
	                            
                        </ul>
                    </div>
                </nav>
            </div>
        </div>             

For the moment no result.

The else part works (tested by replacing the empty string with something else).

I feel it's normal that it shouldn't work as it is, but I don't know enough to resolve the problem easily (or at all) for the moment.

Perhaps it's just an order and/or a "nested" problem.

Edit: replacing $page->id with certain other things in the first if($subchildren->id == $page->id) I can have a current class added... but on all parents having children.

Perhaps using &&?

I've tried again several variations.

Is it possible, or not, to have the current class added to the direct parent of a sub-child if the latter is the current one (with a current class itself)?

I've looked a bit in the cheatsheet in case but for the moment...

I've just tried with if($subchildren->id == $page->id && $subchildren->parent->id == $page->parent->id), but no...

Any "idea"/help?