#1 2016-03-04 19:53:39

Dp.hermes
Member
From: Paris - France
Registered: 2013-07-05
Posts: 47

[SOLVED] Multilevel navigation and different classes - nav helper

Hello there !

I'm on my way to finish a website with Ionize but I have a little problem.
The navigation I developed is a bit more complex than usual.

So, in fact my nav doesn't appear the way I want.

I managed to do almost everything I wanted with the navigation_helper.php.
Unfortunately, I can't get through 2 things...
1- What I'd need is a different class for every <ul> level. It's OK for the two firsts but I don't understand how to change the class of the third level ul (<ul class="uk-nav-sub">) so it would be different of the first one. My "uk-nav-sub" class goes in the previous<li>...
2- Add 3 (weird) <div> in front of one of <ul> but ONLY one.. (But for now Anywhere I put the <div></div> it doesn't work or puts it everywhere.)

My html looks like that :

<ul class="uk-navbar-nav uk-hidden-small">
     <li><a href="#">MENU 1</a>
     <li class="uk-parent" data-uk-dropdown><a href="#">MENU 2 WITH SUB</a>
          <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-1">
               <div class="uk-grid uk-dropdown-grid">
                    <div class="uk-width-1-1">
                         <ul class="uk-nav uk-nav-navbar">
                              <li><a href="#">SUB MENU 1</a></li>
                              <li class="uk-parent"><a href="#">SUB MENU 2</a>
                                   <ul class="uk-nav-sub">
                                        <li><a href="#">SUB SUB MENU 1</a></li>
                                        <li><a href="#">SUB SUB MENU 2</a></li>
                                   </ul>
                              </li>
                         </ul>
                    </div>
               </div>
          </div>
     </li>
</ul>

My navigation_helper.php code :

if( ! function_exists('get_tree_navigation'))
{
	function get_tree_navigation($items, $id = NULL, $class = NULL, $first_class = NULL, $last_class = NULL, $dropdown_ul_class = NULL)
	{
		// HTML Attributes
		$id = ( ! is_null($id) ) ? ' id="' . $id . '" ' : '';
		$class = ( ! is_null($class) ) ? ' class="' . $class . '" ' : '';
		$dropdown_ul_class = ( ! is_null($dropdown_ul_class) ) ? $dropdown_ul_class : $class;
				
		$tree = '<ul' . $id . $dropdown_ul_class .'>';
		
		foreach($items as $key => $page)
		{
			if ($key !== 'articles')
			{
				$class = array();
				
				$dropdown_ul_class = (!empty($page['children'])) ? ' class="uk-nav uk-nav-navbar"' : '';
				$dropdown_a_class = (!empty($page['children'])) ? 'class="dropdown-toggle"' : '';
				$dropdown_data_attr = (!empty($page['children'])) ? ' data-uk-dropdown' : '';
		
				if (( ! empty($page['active_class']))) $class[] = $page['active_class'];
				if ($key == 0 && ! is_null($first_class)) $class[] = $first_class;
				if ($key == (count($items) - 1) && ! is_null($last_class)) $class[] = $last_class;
				if (!empty($page['children'])) $class[] = 'uk-parent';
                if (!empty($page['children']) && $page['id_parent'] != 0) $class[] = 'KJSDHFGSKJDFHGK';
				if ($page['home'] == 1) $class[] = 'home';
                $icon = (!empty($page['ion_class'])) ? '<i class="icon-fixed-width icon-'.$page['ion_class'].'"></i> ' : '';
				// trace($page);
				// $class = ( ! empty($class)) ? ' ' . implode(' ', $class) . '' : '';
				$class = ( ! empty($class)) ? ' class="'.implode(' ', $class).'"' : '';

				$title = ($page['nav_title'] != '') ? $page['nav_title'] : $page['title'];
				
				$tree .= '<li ' . $class . '>';
				$tree .= '<a href="' . ((!empty($page['children'])) ? '#' : $page['absolute_url']) . '">' . $icon . $title . ((!empty($page['children']) && $page['id_parent'] == 0) ? ' <b class="caret"></b>' : '') . '</a>';
		
				if (!empty($page['children']))
					 $tree .= get_tree_navigation($page['children'], NULL, $class, NULL, NULL, $dropdown_ul_class);


				
	
				if (!empty($page['articles']))
				{
					
					$tree .= '<ul' . $id . $class . '>';
					
					foreach($page['articles'] as $article)
					{
						$class = array();
						if (( ! empty($article['active_class']))) $class[] = $article['active_class'];
						if ($key == 0 && ! is_null($first_class)) $class[] = $first_class;
						if ($key == (count($page['articles']) - 1) && ! is_null($last_class)) $class[] = $last_class;
						
						$class = ( ! empty($class)) ? ' class="'.implode(' ', $class).'"' : '';

						$tree .= '<li'.$class.'><a'.$class.' href="' . $article['url'] . '">'.$article['title']. '</a></li>';
					}
					$tree .= '</ul>';
				}
				
				
				$tree .= '</li>';
			}
		}

		if ( ! empty($items['articles']))
		{
			foreach($items['articles'] as $article)
			{
				$class = array();
				if (( ! empty($article['active_class']))) $class[] = $article['active_class'];
				if ($key == 0 && ! is_null($first_class)) $class[] = $first_class;
				if ($key == (count($items['articles']) - 1) && ! is_null($last_class)) $class[] = $last_class;
						
				$class = ( ! empty($class)) ? ' class="'.implode(' ', $class).'"' : '';

				$tree .= '<li'.$class.'><a'.$class.' href="' . $article['url'] . '">'.$article['title']. '</a></li>';
			}
		}
		
		$tree .= '</ul>';

		return $tree;
	}
}

I'd be glad if someone could help me with that because i've been trying for hours!! And I'm not kidding : hours! Ah ah.

Thank you

Last edited by Dp.hermes (2016-03-11 20:41:29)

Offline

#2 2016-03-07 15:52:50

otemu
Member
Registered: 2014-03-07
Posts: 183

Re: [SOLVED] Multilevel navigation and different classes - nav helper

Hey Dp.hermes,

Paste exactly how you want the HTML to look like and I try see if I can do it for you.

Thanks

Offline

#3 2016-03-08 11:53:52

Dp.hermes
Member
From: Paris - France
Registered: 2013-07-05
Posts: 47

Re: [SOLVED] Multilevel navigation and different classes - nav helper

Hello Otemu,

Thanks for your reply.
I hope very much you'll be able to help me on that. smile

Here the Html I want in the end :

 <ul class="uk-navbar-nav uk-hidden-small">
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>

      <!-- Multilevel -->
      <li class="uk-parent" data-uk-dropdown><a href="#">Portfolio</a>
        <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-1">
          <div class="uk-grid uk-dropdown-grid">
            <div class="uk-width-1-1">
              <ul class="uk-nav uk-nav-navbar">
                <li><a href="?page=module-layouts">SubMenu 1</a></li>
                <li class="uk-parent"><a href="#">SubMenu 2</a>
                  <ul class="uk-nav-sub">
                    <li><a href="#">SUB-SubMenu 1</a></li>
                    <li><a href="#">SUB-SubMenu 2</a></li>
                    <li><a href="#">SUB-SubMenu 3</a></li>
                    <li><a href="#">SUB-SebMenu 4</a></li>
                    <li><a href="#">SUB-SubMenu 5</a></li>
                  </ul>
                </li>
                <li><a href="#">SubMenu 3</a></li>
                <li><a href="#">SubMenu 4</a></li>
              </ul>
            </div>
          </div>
        </div>
      </li>

      <!-- Multilevel  -->
      <li class="uk-parent" data-uk-dropdown><a href="#">Pricing</a>
        <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-1">
          <div class="uk-grid uk-dropdown-grid">
            <div class="uk-width-1-1">
              <ul class="uk-nav uk-nav-navbar">
                <li><a href="#">France</a></li>
                <li><a href="#">Russia</a></li>
              </ul>
            </div>
          </div>
        </div>
      </li>

      <li><a href="#">Blog</a></li>

      <li><a href="#">Contact</a></li>
    </ul>

Offline

#4 2016-03-08 15:03:16

otemu
Member
Registered: 2014-03-07
Posts: 183

Re: [SOLVED] Multilevel navigation and different classes - nav helper

Hi,

Are you using some framework or js script to handle the dropdown as the div's are not coming from your helper?

      
  <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-1">
          <div class="uk-grid uk-dropdown-grid">
            <div class="uk-width-1-1">

Try this code, this generates how you want it minus the "div's":

if( ! function_exists('get_tree_navigation'))
{
	function get_tree_navigation($items, $id = NULL, $class = NULL, $first_class = NULL, $last_class = NULL, $dropdown = false, $count = 0)
	{
		// HTML Clssses
		$ulClass = "uk-nav uk-nav-navbar";
		$liClass = "uk-parent";
		$subUlClass = "uk-nav-sub";
		$count++;

		// HTML Attributes
		$id = ( ! is_null($id) ) ? ' id="' . $id . '" ' : '';

		//check to see if we need to add <ul> class to drop down
		if(!$dropdown){
			$class = ( ! is_null($class) ) ? ' class="' . $class . '" ' : '';
			$count = 0;
		}

		if($dropdown && $count == 1){
			$ulClassUpdate = substr_replace($class, ' '.$ulClass, -1, 0);
			$class = ( ! is_null($class) ) ? ' class="' . $ulClassUpdate . '" ' : ' class="' . $ulClass . '" ';
		}

		if($dropdown && $count > 1){
			$ulClassUpdate = substr_replace($class, ' '.$subUlClass, -1, 0);
			$class = ( ! is_null($class) ) ? ' class="' . $ulClassUpdate . '" ' : ' class="' . $subUlClass . '" ';
		}

		$tree = '<ul' . $id . $class . '>';

		foreach($items as $key => $page)
		{
			if ($key !== 'articles')
			{
				$class = array();
				if (( ! empty($page['active_class']))) $class[] = $page['active_class'];
				if ($key == 0 && ! is_null($first_class)) $class[] = $first_class;
				if ($key == (count($items) - 1) && ! is_null($last_class)) $class[] = $last_class;
				
				$class = ( ! empty($class)) ? ' class="'.implode(' ', $class).'"' : '';

				$title = ($page['nav_title'] != '') ? $page['nav_title'] : $page['title'];
				
				if (!empty($page['children'])){
					//add class to <li> if has children
					$class ? $liClassUpdate = substr_replace($class, ' '.$liClass, -1, 0).' data-uk-dropdown' : $liClassUpdate = ' class="' . $liClass . '" data-uk-dropdown ';
					$tree .= '<li'.$liClassUpdate.'><a'.$class.' href="' . (($page['has_url'] != 0) ? $page['absolute_url'] : '#') . '">'.$title. '</a>';
				}
				else{
					$tree .= '<li'.$class.'><a'.$class.' href="' . (($page['has_url'] != 0) ? $page['absolute_url'] : '#') . '">'.$title. '</a>';
				}
		
				if (!empty($page['children']))
					//add dropdown class to ul if children
					 $tree .= get_tree_navigation($page['children'], $id = NULL, $class = NULL, $first_class = NULL, $last_class = NULL, $dropdown = true, $count);
				
	
				if (!empty($page['articles']))
				{
					$tree .= '<ul' . $id . $class . '>';
					
					foreach($page['articles'] as $article)
					{
						$class = array();
						if (( ! empty($article['active_class']))) $class[] = $article['active_class'];
						if ($key == 0 && ! is_null($first_class)) $class[] = $first_class;
						if ($key == (count($page['articles']) - 1) && ! is_null($last_class)) $class[] = $last_class;
						
						$class = ( ! empty($class)) ? ' class="'.implode(' ', $class).'"' : '';

						$tree .= '<li'.$class.'><a'.$class.' href="' . $article['url'] . '">'.$article['title']. '</a></li>';
					}
					$tree .= '</ul>';
				}
				
				
				$tree .= '</li>';
			}
		}

		if ( ! empty($items['articles']))
		{
			foreach($items['articles'] as $article)
			{
				$class = array();
				if (( ! empty($article['active_class']))) $class[] = $article['active_class'];
				if ($key == 0 && ! is_null($first_class)) $class[] = $first_class;
				if ($key == (count($items['articles']) - 1) && ! is_null($last_class)) $class[] = $last_class;
						
				$class = ( ! empty($class)) ? ' class="'.implode(' ', $class).'"' : '';

				$tree .= '<li'.$class.'><a'.$class.' href="' . $article['url'] . '">'.$article['title']. '</a></li>';
			}
		}
		
		$tree .= '</ul>';

		return $tree;
	}
}

This renders like this:

 <ul class="uk-navbar-nav uk-hidden-small">
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>

      <!-- Multilevel -->
      <li class="uk-parent" data-uk-dropdown><a href="#">Portfolio</a>
              <ul class="uk-nav uk-nav-navbar">
                <li><a href="?page=module-layouts">SubMenu 1</a></li>
                <li class="uk-parent"><a href="#">SubMenu 2</a>
                  <ul class="uk-nav-sub">
                    <li><a href="#">SUB-SubMenu 1</a></li>
                    <li><a href="#">SUB-SubMenu 2</a></li>
                    <li><a href="#">SUB-SubMenu 3</a></li>
                    <li><a href="#">SUB-SebMenu 4</a></li>
                    <li><a href="#">SUB-SubMenu 5</a></li>
                  </ul>
                </li>
                <li><a href="#">SubMenu 3</a></li>
                <li><a href="#">SubMenu 4</a></li>
              </ul>
      </li>

      <!-- Multilevel  -->
      <li class="uk-parent" data-uk-dropdown><a href="#">Pricing</a>
              <ul class="uk-nav uk-nav-navbar">
                <li><a href="#">France</a></li>
                <li><a href="#">Russia</a></li>
              </ul>
      </li>

      <li><a href="#">Blog</a></li>

      <li><a href="#">Contact</a></li>
    </ul>

Happy re-factoring smile

Let me know if you need any more help!!

Offline

#5 2016-03-08 18:42:35

Dp.hermes
Member
From: Paris - France
Registered: 2013-07-05
Posts: 47

Re: [SOLVED] Multilevel navigation and different classes - nav helper

Hi there !

Thanks a lot for you help.
I got the multilevel working with the different classes for each level of <ul> as well this morning (Fench time).
Anyway, your code is way cleaner, so I'll take yours. ^^Thank you.

As for the <div> blocks I definitely can't manage to implant it successfully... Nor with the helper, nor with a js. Maybe i just suck at coding, who knows, but it doesn't work... Grrrr...
Then I tried to simply give my <div> classes to the under <ul>. It kinda works in fact, that's cool ! But some other stuff in the website are getting crazy because of that. S**t.. Still not the good solution...

I'll try to figure out how to get what I want... But if you have an idea, i'd be happy to hear it.

Thanks again !

///////////////
PS : FOR THOSE WHO ARE READING THIS TOPIC :
IF YOU SIMPLY WANT A WAY TO HAVE A MULTILEVEL CSS NAVIGATION (with different class on each level) :
Our friend's solution works perfectly ! No need to read further, just take his code, it's juicy perfection !

Offline

#6 2016-03-08 19:59:13

otemu
Member
Registered: 2014-03-07
Posts: 183

Re: [SOLVED] Multilevel navigation and different classes - nav helper

Hi,

Oh sorry I misunderstood, sometimes when using frameworks e.g Bootstrap your have a piece of rendered html and then the framework will modify and add stuff to the code like "divs", elements, classes etc because of the JS included.  The div stuff I actually didn't think you needed it rendered.

Well if you want the div's rendered you can do this:

if( ! function_exists('get_tree_navigation'))
{
	function get_tree_navigation($items, $id = NULL, $class = NULL, $first_class = NULL, $last_class = NULL, $dropdown = false, $count = 0)
	{
		// HTML Clssses
		$ulClass = "uk-nav uk-nav-navbar";
		$liClass = "uk-parent";
		$subUlClass = "uk-nav-sub";
		$divStuff = '';
		$count++;

		// HTML Attributes
		$id = ( ! is_null($id) ) ? ' id="' . $id . '" ' : '';

		//check to see if we need to add <ul> class to drop down
		if(!$dropdown){
			$class = ( ! is_null($class) ) ? ' class="' . $class . '" ' : '';
			$count = 0;
		}

		if($dropdown && $count == 1){
			$divStuff = '<div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-1"><div class="uk-grid uk-dropdown-grid"><div class="uk-width-1-1">';
			$ulClassUpdate = substr_replace($class, ' '.$ulClass, -1, 0);
			$class = ( ! is_null($class) ) ? ' class="' . $ulClassUpdate . '" ' : ' class="' . $ulClass . '" ';
		}

		if($dropdown && $count > 1){
			$ulClassUpdate = substr_replace($class, ' '.$subUlClass, -1, 0);
			$class = ( ! is_null($class) ) ? ' class="' . $ulClassUpdate . '" ' : ' class="' . $subUlClass . '" ';
		}

		$tree = $divStuff.'<ul' . $id . $class . '>';

		foreach($items as $key => $page)
		{
			if ($key !== 'articles')
			{
				$class = array();
				if (( ! empty($page['active_class']))) $class[] = $page['active_class'];
				if ($key == 0 && ! is_null($first_class)) $class[] = $first_class;
				if ($key == (count($items) - 1) && ! is_null($last_class)) $class[] = $last_class;
				
				$class = ( ! empty($class)) ? ' class="'.implode(' ', $class).'"' : '';

				$title = ($page['nav_title'] != '') ? $page['nav_title'] : $page['title'];
				
				if (!empty($page['children'])){
					//add class to <li> if has children
					$class ? $liClassUpdate = substr_replace($class, ' '.$liClass, -1, 0).' data-uk-dropdown' : $liClassUpdate = ' class="' . $liClass . '" data-uk-dropdown ';
					$tree .= '<li'.$liClassUpdate.'><a'.$class.' href="' . (($page['has_url'] != 0) ? $page['absolute_url'] : '#') . '">'.$title. '</a>';
				}
				else{
					$tree .= '<li'.$class.'><a'.$class.' href="' . (($page['has_url'] != 0) ? $page['absolute_url'] : '#') . '">'.$title. '</a>';
				}
		
				if (!empty($page['children']))
					//add dropdown class to ul if children
					 $tree .= get_tree_navigation($page['children'], $id = NULL, $class = NULL, $first_class = NULL, $last_class = NULL, $dropdown = true, $count);
				
	
				if (!empty($page['articles']))
				{
					$tree .= '<ul' . $id . $class . '>';
					
					foreach($page['articles'] as $article)
					{
						$class = array();
						if (( ! empty($article['active_class']))) $class[] = $article['active_class'];
						if ($key == 0 && ! is_null($first_class)) $class[] = $first_class;
						if ($key == (count($page['articles']) - 1) && ! is_null($last_class)) $class[] = $last_class;
						
						$class = ( ! empty($class)) ? ' class="'.implode(' ', $class).'"' : '';

						$tree .= '<li'.$class.'><a'.$class.' href="' . $article['url'] . '">'.$article['title']. '</a></li>';
					}
					$tree .= '</ul>';
				}
				
				
				$tree .= '</li>';
			}
		}

		if ( ! empty($items['articles']))
		{
			foreach($items['articles'] as $article)
			{
				$class = array();
				if (( ! empty($article['active_class']))) $class[] = $article['active_class'];
				if ($key == 0 && ! is_null($first_class)) $class[] = $first_class;
				if ($key == (count($items['articles']) - 1) && ! is_null($last_class)) $class[] = $last_class;
						
				$class = ( ! empty($class)) ? ' class="'.implode(' ', $class).'"' : '';

				$tree .= '<li'.$class.'><a'.$class.' href="' . $article['url'] . '">'.$article['title']. '</a></li>';
			}
		}

		$count == 1? $close ="</div></div></div>" :	$close = '';			
		$tree .= '</ul>'.$close;

		return $tree;
	}
}

Am sure the code can be much cleaner but hope it helps smile

Last edited by otemu (2016-03-08 20:31:52)

Offline

#7 2016-03-11 20:40:52

Dp.hermes
Member
From: Paris - France
Registered: 2013-07-05
Posts: 47

Re: [SOLVED] Multilevel navigation and different classes - nav helper

Hey there!
It works perfectly. You're a genius. And I definitely suck at coding. Haha

Anyway : thanks a lot !!!

Last edited by Dp.hermes (2016-03-11 20:41:52)

Offline

What's Ionize ?

Ionize is an Open Source Content Management System created by webdesigners for webdesigners.

Created and maintained by Partikule and Toopixel, Ionize wants to be the easiest and most powerful CMS.

Can I help ?

Because talent is nothing without involvement, we are looking for motivated coders and webdesigners to join the project team.

Resources

Website : ionizecms.com
Documentation : doc.ionizecms.com

Development : Ionize on GitHub
Translations : Ionize Translations