#1 2016-07-14 18:52:50

Deivid
Member
Registered: 2016-07-11
Posts: 37
Website

[solved] Hellp me with menu

Hey guys anyone have got any ideas how to make menu. I need to make menu like this :
    -if the sub menu is created then nere menu item  there would be + sign and when  or if u press it it would show drop down menu and then + sing  turns into -

This meniu is now :

  <div id="left-menu">
           	      	<div id="landing-menu">
                      <ion:tree_navigation menu="first_menu" active_class="active" tag="div" class="page_menu"/>
                  	</div>           
                  </div>

Last edited by Deivid (2016-08-01 11:22:38)

Offline

#2 2016-07-14 20:53:48

adaliszk
Ionize Friend
From: Germany
Registered: 2010-09-20
Posts: 397
Website

Re: [solved] Hellp me with menu

Add a tree navigation override into your theme (theme/helpers/navigation_helper.php)

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
 * Ionize, creative CMS
 * Navigation Helper
 *
 * @package		Ionize
 * @author		Ionize Dev Team
 * @license		http://doc.ionizecms.com/en/basic-infos/license-agreement
 * @link		http://ionizecms.com
 * @since		Version 0.9.0
 *
 */


// ------------------------------------------------------------------------


/**
 * Returns a HTML UL formatted menu
 * Used by <ion:navigation level="x" /> to print out one level menu navigation
 *
 * @param	Array		Array of pages
 *
 * @return	String		HTML UL formatted string
 *
 */
if( ! function_exists('get_navigation'))
{
	function get_navigation($items)
	{
		$nav = '';

		foreach($items as $key => $page)
		{
			$active = ( ! empty($page['active_class'])) ? ' class="'.$page['active_class'].'" ' : '';

			$title = ($page['nav_title'] != '') ? $page['nav_title'] : $page['title'];

			// Adds the suffix if defined in /application/config.php
			// if ( config_item('url_suffix') != '' ) $url .= config_item('url_suffix');

			$nav .= '<li' . $active . '><a ' . $active . 'href="' . (($page['has_url'] != 0) ? $page['absolute_url'] : '#') . '">'.$title. '</a></li>';
		}

		return $nav;
	}
}

/**
 * Returns a HTML UL formatted nested tree menu from a pages nested array
 * Used by <ion:tree_navigation /> to print out a nested navigation
 *
 * @param	Array		Array of pages
 * @param	Array		Array of container UL (first one) attributes. Can contains 'id' and 'class'
 *
 * @return	String		HTML UL formatted string
 *
 */
if( ! function_exists('get_tree_navigation'))
{
	function get_tree_navigation($items, $id = NULL, $class = NULL, $first_class = NULL, $last_class = NULL)
	{
		// HTML Attributes
		$id = ( ! is_null($id) ) ? ' id="' . $id . '" ' : '';
		$class = ( ! is_null($class) ) ? ' class="' . $class . '" ' : '';

		$tree = '<ul' . $id . $class . ( $id!=NULL ? ' data-accordion-menu' : '') .'>';

		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;

				$li_class = $class;
				if ( ! empty($page['children'])) {
					$li_class[] = 'has-dropdown';
					$li_class[] = 'not-click';
				}

				$class = ( ! empty($class)) ? ' class="'.implode(' ', $class).'"' : '';
				$li_class = ( ! empty($li_class)) ? ' class="'.implode(' ', $li_class).'"' : '';

				$title = ($page['nav_title'] != '') ? $page['nav_title'] : $page['title'];

				$tree .= '<li'.$li_class.'><a'.$class.' href="' . (($page['has_url'] != 0) ? $page['absolute_url'] : '#') . '">'.$title. '</a>';

				if (!empty($page['children']))
				{
				
					$tree .= get_tree_navigation($page['children'], NULL, 'menu vertical nested'.(!empty($page['active_class']) ? ' '.$page['active_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;
	}
}

if( ! function_exists('get_language_navigation'))
{
	/**
	 * Returns a HTML UL formatted nested tree menu from a pages nested array
	 * Used by <ion:languages /> to print out the languages menu
	 *
	 * @deprecated
	 *
	 * @param	Array		Array of pages
	 * @param	Array		Array of container UL (first one) attributes. Can contains 'id' and 'class'
	 *
	 * @return	String		HTML UL formatted string
	 *
	 */
	function get_language_navigation($items)
	{
		$nav = '';

		foreach($items as $lang)
		{
			$active = ( ! empty($lang['active_class'])) ? ' class="'.$lang['active_class'].'" ' : '';

			$nav .= '<li' . $active . '><a ' . $active . 'href="' . $lang['url'] . '">' . $lang['name']. '</a></li>';
		}

		return $nav;
	}
}


if( ! function_exists('get_next_prev_page'))
{
	/**
	 * Returns the previous / next page enclosed in the given tag
	 *
	 * @deprecated	Use the <ion:page:next /> and <ion:page:prev /> tags
	 *
	 * @param $page
	 * @param $prefix
	 *
	 * @return string
	 */
	function get_next_prev_page($page, $prefix)
	{
		$prefix = (lang($prefix) != '#'.$prefix ) ? lang($prefix) : $prefix;

		$title = ($page['nav_title'] != '') ? $page['nav_title'] : $page['title'];

		$link = $prefix. '<a href="' . $page['absolute_url'] . '">' . $title . '</a>';

		return $link;
	}
}


if( ! function_exists('get_next_prev_article'))
{
	/**
	 * Returns the previous / next article enclosed in the given tag
	 *
	 * @deprecated	Use the <ion:article:next /> and <ion:article:prev /> tags
	 *
	 */
	function get_next_prev_article($article, $prefix)
	{
		$prefix = (lang($prefix) != '#'.$prefix ) ? lang($prefix) : $prefix;

		$link = $prefix. '<a href="' . $article['absolute_url'] . '">' . $article['title']. '</a>';

		return $link;
	}
}


/* End of file navigation_helper.php */
/* Location: .application/helpers/navigation_helper.php */

Then your source code should be some like this:

<div class="page_menu">
<ul>
    <li> <a href="#">Item#1</a> </li>
    <li class="has-dropdown"> <a href="#">Item#2</a>
    <ul>
        <li> <a href="#">Item#3</a> </li>
        <li> <a href="#">Item#4</a> </li>
        <li> <a href="#">Item#5</a> </li>
    </ul>
    </li>
</ul>
</div>

Then the task is simple with CSS and a little javascript:

.page_menu ul, li { list-style: none; margin: 2px; padding: 5px; }
.page_menu > ul > li.has-dropdown a:before {
    content: "+";
}
.page_menu > ul > li.has-dropdown ul {
    display: none;
}
.page_menu > ul > li.has-dropdown.opened a:before {
    content: "-";
}
.page_menu > ul > li.has-dropdown.opened ul {
    display: block;
}
document.querySelectorAll('.page_menu .has-dropdown a').forEach(function( element )
{
    element.addEventListener('click', function()
    {
        this.parentElement.classList.toggle('opened');
    });
});

Webdeveloper, Programmer, Application developer, Ionize friend
@adaliszk

Offline

#3 2016-07-15 09:31:22

Deivid
Member
Registered: 2016-07-11
Posts: 37
Website

Re: [solved] Hellp me with menu

dont u mean that if i put on this then every time i need put some other  menu or sub menu i should go to source code and put it in there ?

<div class="page_menu">
<ul>
    <li> <a href="#">Item#1</a> </li>
    <li class="has-dropdown"> <a href="#">Item#2</a>
    <ul>
        <li> <a href="#">Item#3</a> </li>
        <li> <a href="#">Item#4</a> </li>
        <li> <a href="#">Item#5</a> </li>
    </ul>
    </li>
</ul>
</div>

because in :

  <div id="left-menu">
           	      	<div id="landing-menu">
                      <ion:tree_navigation menu="first_menu" active_class="active" tag="div" class="page_menu"/>
                  	</div>           
                  </div>

if u ad in  platform new folder it will automaticly apear new menu button

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