Menu Revamp, Coding, what has to be done ...

Refactoring Tikis menu system

We need to refactor the Tiki menu system for reasons:

more and different classes in Bootstrap menus

The new Bootstrap responsive menues are much more sophisticated with more than one menu-item-array and different levels
The actual men-item-array from tiki-admin_modules.php simply does not at all fit to the bootstrap.css and either not to the bootstrap.js.
We either need to develop a new kind of menu, or - what I preferred, if coders agreed - we extend the existing menus to the opportunities and requirements we see with Bootstrap.

need more flexibility

The actual Tiki menu system is easy to use, reliable and very good in what it can provide.
But in the end of the day it is not flexible enough, to provode us width certain new state of the art menu item effects:

Example: "Mega Menus" alike Amazon for several submenus or grafics or arbitrary text and in a menu item (nearly there with "use WikiSyntax in menus", but difficult to style and no translation of the whole menu if the preference is active).
=> Can the Bootstrap menu provide this?

only two levels in Bootstrap menus (the dark side)

Marc Laporte mentioned, that the Bootstrap Navigation only knows two menu levels, whilst Tikis menu system knows at least five levels -> https://github.com/twbs/bootstrap/issues/424

superfish

Do we need "superfish" for wikistructure-menus?
LPH said in the dev-list -1 to keep superfish.
There is no point to lose wikistructure menu or not to have a multilevel standard menu ... so is the Bootstrap menu a feasable replacement, or a good but limited supplement to Tikis existing abilities?

So what to do?

• check vertical menu in bootstrap
  Any joy with vertical menus in Tiki based on Bootstrap up to now?
  no point not to have vertical menus anymore.
• just add bs-nav-menu as option?
  add a new bootstrap menu, but keep classic css menu as option besides wikistructure menu and
  that means to keep superfish, what has a -1 by LPH by this time
• extend the code of the bootstraps menu to our needs?
  would that be any possible and who has the capacity?
  mind to be independant of javaScript at least of wide screen mode?
  accept reliability on JavaScript based menu in mobile mode without
  alternative classic cssmenu
• complete new development
  write a complete new menu replacing both: classic (including wikistructure) and bootstrap .. combining classic and bootstrap advantages and preventing from both's disadvantages?
  do we have the capacity?

Example HTML Code

Here I have added an example of a typical Bootstrap responsive horizontal navigation menu.
It is the todays status of the main navigation of bootstrapped.fabricius.me and technically borrowed from bootswatch.com
It is plain HTML code in a Tiki custom menu applied to the header.

To review just click on the fading link below:

<div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a href="HomePage" class="navbar-brand">bootstrapped</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav cssmenu_horiz">
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class=""></span></a>
              <ul class="dropdown-menu" aria-labelledby="themes">
                <li><a tabindex="-1" href="HomePage">Home</a></li>
                <li><a tabindex="-1" href="Amelia">Amelia</a></li>
                <li><a tabindex="-1" href="Bootstrap">Bootstrap (=default)</a></li>
                <li><a tabindex="-1" href="Cerulean">Cerulean</a></li>
                <li><a tabindex="-1" href="Cosmo">Cosmo</a></li>
                <li><a tabindex="-1" href="Cyborg">Cyborg</a></li>
                <li><a tabindex="-1" href="Flatly">Flatly</a></li>
                <li><a tabindex="-1" href="Journal">Journal</a></li>
                <li><a tabindex="-1" href="Readable">Readable</a></li>
                <li><a tabindex="-1" href="Simplex">Simplex</a></li>
                <li><a tabindex="-1" href="Slate">Slate</a></li>
                <li><a tabindex="-1" href="Spacelab">Spacelab</a></li>
                <li><a tabindex="-1" href="United">United</a></li>
              </ul>
            </li>
            <li>
              <a href="../help/">Help</a>
            </li>
            <li>
              <a href="http://news.bootswatch.com">Blog</a>
            </li>

          </ul>
 
          <ul class="nav navbar-nav navbar-right">
            <li><a href="http://bootswatch.com" target="_blank">Bootswatch</a></li>
          </ul>

        </div>
      </div>
    </div>

• http://branding.tiki.org/Top+Menu#Bubble_popup_on_menus
• http://dev.tiki.org/Menu+Revamp

BS Menu