Multi-level navigation and easy menu definition

[mvlcek]

The I18N plugin (http://get-simple.info/extend/plugin/i18n/69/) offers an easy-to-use multi-level navigation and a much improved admin interface for defining the hierarchical structure of a site (and the menu navigation).

Features

Nearly any kind of navigation should be realizable with this plugin, e.g.:

• Hierarchical menu in the side bar - only the current page and its parents are expanded
  
• Hierarchical menu in the side bar - all pages are expanded
  
• Top menu bar and remaining levels in the side bar
  
• Top menu bar with pull down menus, pulldown menus and further level also in side bar
  

Improved admin interface:

• Select the parent page from a "hierarchical" list
  
• Select the position in the menu in a list with all sibling pages (instead of having a cryptical priority select)
  
• Allow more than one level and prevent loops in hierarchy
  
• New in version 1.0: Rearrange your pages with drag and drop in the new Navigation Structure view
  
• New in version 1.0: Compatible with GetSimple 3.0
  
• New in version 1.1: Change menu texts (all languages) in navigation structure view
  
• New in version 1.2: Supports external links
  
• New in version 1.3: Option to only show menu items existing in the current language
  
• New in version 1.4: Additional css classes for menu items with children
  

Interesting topics:

• Multiple pages combined, Menu item links to anchor within page
  

For more information and examples see http://mvlcek.bplaced.net.

Example for a top menu and a side bar navigation implemented with I18N (the styling must be specified via CSS):



The improved admin interface:

[yojoe]

Judging by screenies it looks interesting.
Would you be so kind to post the html structure of dynamically created menu lists ?
Assuming you developed this plugin to extensively use lists

edit: forgot to add the reason of the question.
It's because I'm curious if this menu plugin + css is based on divs or html5 <nav> ?
But looking at your website I get an overall view

[mvlcek]

@yojoe: the plugin uses <ul>/<li> with classes "current"/"currentpath" for the currently active menu item resp. its parents. However, you get the menu structure with return_i18n_menu_data(...) and can create your own version with <nav>.

[tonyflanigan]

Hi mvlcek

I'm lost. Your plug-in is just what I'm looking for, for the top menu drop-down ability, but for some reason I just cannot get it to work.

I've spent the best part of 3 days on this, and if I had any hair, I would pull pull it out. Would it be possible to go through the process, step by step, once the plug-in is added to the plug in folder, as I am sure I am missing or totally overlooking something.

Looking forward to your response.

Thanks.

[tonyflanigan]

Hi mvlcek

I'm not lost, just stupid. I had everything in place except for my <ul></ul>...

Thanks for a great plug in!

[mvlcek]

I'm lost. Your plug-in is just what I'm looking for, for the top menu drop-down ability, but for some reason I just cannot get it to work.

First I want to state that the plugin's functionality is to create the HTML code for the navigation menu, i.e. nested lists. How these nested lists are displayed (e.g. as drop-down menu) is not part of the plugin but is done using CSS. Nevertheless, here a step-for-step guide:

• Download the I18N plugin from http://get-simple.info/extend/plugin/i18n/69/
  
• Unpack it into your get-simple plugins folder
  
• Start the get-simple administration (there should be a new item I18N under "pages")
  
• Create or edit some pages' "page options" and give at least some pages a parent, which itself has no parent - these are the pages which will display in the drop-down part of the menu
  
• Go to "Theme" - "Edit Theme" - your default template is displayed
  
• Enter the following code in your template somewhere in the top part of your body:
  

Code:

<div class="sitemenu"><ul><?php get_i18n_navigation(return_page_slug(), 0, 1, true); ?></ul></div>

• View a page of your web site - you should see the menu as a list with sub lists for each drop down menu
  
• To get it displayed as drop-down lists, you have to add some css styles in "Theme" - "Edit Theme" - select your theme's CSS file - "Edit". The following styles are those of my demo site http://mvlcek.bplaced.net/multi-level-na...down-left/ (you should definitely improve them - don't change the lines marked with !!!):
  

Code:

.sitemenu {
  position: relative; /* !!! */
  height: 1.4em; /* make sure whole menu texts are shown */
  background-color: #ECECEC;
}
.sitemenu ul {
  position: absolute; /* !!! */
  list-style: none; /* no bullet points */
}
.sitemenu li {
  float: left; /* !!! */
  padding: 2px 10px;
  width: 8em; /* to make all items the same width */
}
.sitemenu li.current > a, .sitemenu li.currentpath > a {
  font-weight: 800; /* make current page's items bold */
}
.sitemenu li > a {
  color: #666;
  text-decoration: none;
  border-bottom: none;
}
.sitemenu li:hover > a {
  color: #92BF92;
}
.sitemenu li ul {
  display: none; /* !!! sub  lists are not shown initially */
}
.sitemenu li:hover ul {
  display: block; /* !!! but displayed when the mouse is over the menu item */
}
.sitemenu li ul li {
  float: none; /* !!! make sure drop down menu items are below each other */
}
.sitemenu li:hover ul li {
  background-color: #ECECEC;
  border: none 0;
}

• View a page of your web site again - you might have to press F5 (Refresh) or even clear your browser's cache - then you should see a working drop down menu (at least in Firefox, not sure about IE).
  

I hope this helps.

[tonyflanigan]

Yes, Thank You.

My theme has all the styling in it, but because I missed starting <?php get_i18n_navigation(return_page_slug(), 0, 1, true); ?> with <ul> and ending with </ul> it wouldn't work.

I must tell you that I felt a proper fool when I found the problem.

[Oleg06]

why after adding a plugin GSgallery 2.0 had such a line

Code:

Notice: A session had already been started - ignoring session_start() in /home/cp068800/public_html/neowebtime.ru/01/plugins/i18n.php on line 106

http://neowebtime.ru/01/
and for some reason, after deleting the page, the link in the menu does not disappear

[mvlcek]

why after adding a plugin GSgallery 2.0 had such a line

Code:

Notice: A session had already been started - ignoring session_start() in /home/cp068800/public_html/neowebtime.ru/01/plugins/i18n.php on line 106

The I18N plugin starts a session, as the user language is stored there. I suppose that GSgallery also uses the session.

and for some reason, after deleting the page, the link in the menu does not disappear

Currently GetSimple has no trigger on page delete, so the navigation cache is not deleted. Workaround: after deleting a page save any other page (even with no changes) and the navigation will be deleted and reconstructed.

[Oleg06]

Yes, I understand

[juliancc]

In GSgallery I'm checking to see if the session has been started before I start the session. It would be great if plugin developers that are using the session, will do this as well with a simple

Code:

if (!isset($_SESSION))
{
    session_start();
}

This will ensure this warning notice is never thrown.

[mvlcek]

If updated the I18N plugin to ignore the warning:

Code:

@session_start();

[juliancc]

If updated the I18N plugin to ignore the warning:

Code:

@session_start();

or that.. haha
Suppressing always works.

[Oleg06]

Thanks, it works

[yojoe]

Wanted to mention a compatibility bug with GS 3.0B.
Container with variable "MENU_TEXT" isn't replaced (hidden/deleted/emptied) by the jscript

Code:

$('#post-menu').closest('div').find('span').empty().html(<?php echo json_encode($i18n['MENU_TEXT']); ?>);

in editextras.php file (line 90).
Instead it's called twice, thus it leads to render a bit messed site options.

Deleting above line, and messing with edit.php does the thing, but it's a dirty solution.


edit: seems it's not that simple, and I don't know how to fix it, to menu order as it is supposed.

[mvlcek]

Wanted to mention a compatibility bug with GS 3.0B.
Container with variable "MENU_TEXT" isn't replaced (hidden/deleted/emptied) by the jscript

A new version 1.0 is available (http://get-simple.info/extend/plugin/i18n/69/):

• Compatible with GetSimple 3.0
  
• New navigation structure view, where you rearrange the pages with drag and drop
  

[Angryboy]

Works just fine and is intuitive as always.

One minor problem is its visual interference with the CustomFields plugin:



Just a case of separating that out a little better.

[mvlcek]

Works just fine and is intuitive as always.

One minor problem is its visual interference with the CustomFields plugin

That's a problem of the CustomFields plugin, which uses table rows to display the fields, but there is no table anymore in 3.0b ;-).

[Angryboy]

Oh, I forgot to mention: this was in the 3.0 BETA :S

[polyfragmented]

The drag-and-drop feature for pages improves things loads. Thanks for that!

[mvlcek]

Version 1.1: you can now also change the menu texts in the navigation structure view.

[mvlcek]

Version 1.2: Supports external links, see here.

[Connie]

Martin,

I am not sure if it was asked before, but I couldn't find an answer ...

I am using the variant: Top + Left, but I would like to print out the name of the parent-element of the left menu

for example:

level 1: my holidays
level 2: Spain + Greece + China

So

when "my holidays" is currentpath, I want to show that as <h3>my holidays</h3> ontop of the level2-menu at the left,

how to do that=

[mvlcek]

when "my holidays" is currentpath, I want to show that as <h3>my holidays</h3> ontop of the level2-menu at the left

You can use the breadcrumb functionality for this - you want to output the first level (index 0):

Code:

<h3><?php $bc = return_i18n_breadcrumbs(return_page_slug()); echo $bc[0]['menu']; ?></h3>

Alternatively you can use echo $bc[0]['title'], if the menu label is different and you rather want to output the title.

[Connie]

<h3><?php $bc = return_i18n_breadcrumbs(return_page_slug()); echo $bc[0]['menu']; ?></h3>

Martin,

I modified this to

Code:

<h3><?php
    if (isset($pages[$slug]['children'])) {
    $bc = return_i18n_breadcrumbs(return_page_slug()); echo $bc[0]['menu']; echo ':';} ?></h3>

so there is output only when there are subpages, but now it is not showing anything...