Loading...
 

History: Menu Topics

Preview of version: 4

Menu Revamp, Coding, what's 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

So what to do?

  • keep classic css menu as option towards wikistructure menu and a new bootstrap menu?
    that means to keep superfish, what has a -1 by LPH by this time
  • extend the code of bootstraps menu?
    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
  • write a complete new menu which combines classic and bootstrap advantages and prevents from both's disadvantages?
    do we have the capacity?
  • Any joy with horizontal menus in Tiki based on Bootstrap up to now?

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:

NavBar HTML Code!
Copy to clipboard
<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>

History

Advanced
Information Version
Mon 03 of Apr, 2023 03:55 GMT-0000 Gary Cunningham-Lee Categorized as Archived (Registered users only) due to outdated information. 13
View
Thu 28 of Aug, 2014 23:15 GMT-0000 Torsten Fabricius reformatting my previous content 12
View
Thu 28 of Aug, 2014 23:13 GMT-0000 Torsten Fabricius added a text to promote keeping superfish 11
View
Fri 22 of Nov, 2013 20:27 GMT-0000 Torsten Fabricius reneamed "Project Fluffy" to "Navbar" - was a joke betweenJonny and me ;-) 10
View
Fri 22 of Nov, 2013 16:20 GMT-0000 Torsten Fabricius Added Project Fluffy (Bootstrap Navbar) after chat with Jonny 9
View
Tue 05 of Nov, 2013 02:31 GMT-0000 Torsten Fabricius ML asked to rename for the purpose of SEO optimisation 8
View
Sun 03 of Nov, 2013 15:54 GMT-0000 Marc Laporte 7
View
Sun 03 of Nov, 2013 15:52 GMT-0000 Marc Laporte 6
View
Sun 03 of Nov, 2013 03:34 GMT-0000 Torsten Fabricius reviewed the content, added thoughts 5
View
Sun 03 of Nov, 2013 02:45 GMT-0000 Torsten Fabricius added textsnipped rel {FADE()} 4
View
Sun 03 of Nov, 2013 02:43 GMT-0000 Torsten Fabricius added HTML example of bootstrap menu 3
View
Sun 03 of Nov, 2013 02:40 GMT-0000 Torsten Fabricius added bootstrap html code example 2
View
Thu 31 of Oct, 2013 22:22 GMT-0000 Torsten Fabricius menu page done for today 1
View

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config