Topic Closed
mabu
277 Posts
3.3K Downloads
3 Themes
8 Plugins

I tried to insert a second menu into the navbar by adding

<div class="collapse navbar-collapse">
                    <?php  
                    $GP_ARRANGE = false;
                    $GP_MENU_CLASSES = array(
                            'menu_top'            => 'nav navbar-nav',
                            'selected'            => '',
                            'selected_li'        => 'active',
                            'childselected'        => '',
                            'childselected_li'    => '',
                            'li_'                => '',
                            'li_title'            => '',
                            'haschildren'        => 'dropdown-toggle',
                            'haschildren_li'    => 'dropdown',
                            'child_ul'            => 'dropdown-menu',
                            );
                    gpOutput::Get('Menu','m1');
                    ?></div>

behind ...   gpOutput::Get('TopTwoMenu'); //top two levels
                    ?></div>

but the new menu appears in a second line under the first menu - inspite &nbsp;  and with all menupoints horizontal in a line.

Has anybody experience how to add the m1-Menu at the right side ?

Edited: 3 years ago#10252

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Try adding…

'menu_top'            => 'nav navbar-nav navbar-right',
3 years ago#10254

mabu
277 Posts
3.3K Downloads
3 Themes
8 Plugins

navbar-right  has no effect. What helped was float:left - float:left - float:right für the 3 divs in the nav.

I am using blogstrap-template.  (bootstrap : Row - and then col-md-2 etc. should also work)

But the m1-menu has no dropdowns  despite from the HOME which appears now twice - which i must make invisible by css (or rename as . ie. point)

I want to make a megamenu and need the dropdowns.

3 years ago#10257

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

navbar-right  has no effect. What helped was float:left - float:left - float:right für the 3 divs in the nav.

Stange. The navbar-left and navbar-right classes solely do float:left and :right and are part of bootstrap css.

I am using blogstrap-template.  (bootstrap : Row - and then col-md-2 etc. should also work)

Yes, if menu widths fit, this would work as well.

But the m1-menu has no dropdowns despite from the HOME which appears now twice

Is ist set to 'Top Two Level Links' when you edit it in-page?

3 years ago#10258

mabu
277 Posts
3.3K Downloads
3 Themes
8 Plugins

I found a limited solution in the forum https://www.typesettercms.com/Forum?show=t959

its not gpOutput::Get('Menu','m1'); as i found elsewhere but  gpOutput::GetFullMenu('m1');

With the  Multilevel-Bootstrap-Nav - Plugin i have even more levels.

.navbar-right > li:first-child {opacity:0;}    (added in the Layout in the right top corner) made the second

Home invisible (after adding navbar-right like above - or any other classname)

- thanks

P.S. I think the problem with the not functioning navbar-right (solution : Float:right) above

comes from conflicts of css'es or Js of plugins -  the same as with several plugins in ckeditor.

Edited: 3 years ago#10260

mabu
277 Posts
3.3K Downloads
3 Themes
8 Plugins

I am working with $GP_MENU_CLASSES and need to add parameters to a megamenu (as mentioned above) which is not functioning even though the parameters in the sourcecode in firefox are exactly the same as in a menu from bootply.

(The positioning goes to the left and the dropdown of the second level dont function like in a megamenu - but thats another problem and i am a warrior...)

Some empty parameters in 'li_' in GP_MENU_CLASSES  add a 0...1 (for ddd1 - like ddd10, ddd11) to the new entry like

<div class="collapse navbar-collapse js-navbar-collapse m1" style="float:right;">
                    
<ul class="nav navbar-nav m1">
<li class="ddd10 dropdown dropdown-large dropdown-lg  col-md3 active ">
<a  class="dropdown-toggle aaa1" data-toggle="dropdown" href="/lehre2017/" title="Mega">Mega
<b class="caret"></b></a>

<ul class="dropdown-menu dropdown-menu-large  row">
<li class="ddd10 dropdown dropdown-large dropdown-lg col-md3">

-------------------------------------------------------------------------------------------------------------------------

I found     http://www.bvbcode.com/code/z7cr0k9d-2173467 with the menu.php

Is it possible to just add parameters like role - who has some documentation about it ?

 

Edited: 3 years ago#10269

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

You can customize the formatting of menu links by adding sth. like

$GP_MENU_LINKS = '<a href="{$href_text}" {$attr} role="my-custom-role">{$label}</a>';

before menu output, just like $GP_MENU_CLASSES

I found  http://www.bvbcode.com/code/z7cr0k9d-2173467 with the menu.php

GitHub itself is the better source to check out Typesetter's code
https://github.com/Typesetter/Typesetter/blob/master/include/tool/Output.php

You can search the whole repository, e.g.
https://github.com/Typesetter/Typesetter/search?utf8=%E2%9C%93&q=%24GP_MENU_LINKS&type=

Edited: 3 years ago#10270

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

For mega menus in general:

We don't have reasonable ways to hook into CMS generated menus in order to build mega menus with custom designed dropdowns.
Especially when they are going to include images or gadgets, automatically generated menus will become too limited.

The only two ways I can currently think of are

  • Replace the entire menu with a custom coded Text section (which of course then won't follow changes made in Page Manager)
  • Use JavaScript/jQuery  to replace/modify the menu content.
Edited: 3 years ago#10271

mabu
277 Posts
3.3K Downloads
3 Themes
8 Plugins

The main difference to most css megamenus is the Typesetter structure

li - ul -li/li-li/li-li/li.....-/ul-/li  The li at the end and at the beginning is uncommon.

There is a Zepto.js on github which is only 15 K compressed.

it allows like $('<p>Emphasis mine.</p>').insertAfter('blockquote')  etc. (http://zeptojs.com/#addClass)

With the above mentioned 'li_'   and in the field a  'cli '(empty space after the cli (!)  it is possible to adress every link

Because Typsetter enumerates then (undocumented but aha)  cli0 cli1 cli2 etc. -

and so i can  append  $ (' cli2 class=..><a ').insert after('role=role1)  (spaces important!)

-------------------------------------------------------------------------------------------------------------------------

If someone has  a rudimentary code for a simple anchor-megamenu (evtl. Bootstrap but not necessary )  without multimedia - this would be interesting .

Edited: 3 years ago#10272

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Typesetter structure

<ul><!-- 1st menu level -->
  <li><a>1st-level page</a></li>
  <li><a>1st-level heading page</a>
   <ul><!-- 2nd menu level -->
     <li><a>2nd-level page</a></li>
   </ul>
  </li>
</ul>

is a (if not to say 'the') common standard for navigations.

There is a Zepto.js on github which is only 15 K compressed.

No need for zepto.js. We have jQuery already loaded.

it allows like $('<p>Emphasis mine.</p>').insertAfter('blockquote')

yes, as jQuery does. It's jQuery syntax.

Because Typsetter enumerates then (undocumented but aha)  cli0 cli1 cli2 etc. -
and so i can  append  $ (' cli2 class=..><a ').insert after('role=role1)  (spaces important!)

Doesn't look right. I'd try

$(".cli2 > a").attr("role", "role1");

But you don't actually need enumerated <li> classes. You can always target them by their indexes (zero based!) using the .eq() method or the :eq() selector, e.g.

$(".navbar-nav > li").eq(2).children("a").attr("role", "role1");

or

$(".navbar-nav > li:eq(2) > a").attr("role", "role1");

 

Edited: 3 years ago#10274

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Another way to target menu item dropdowns by their slugs, using jQuery:

var heading_page_li = $('.navbar-nav a[href$="/Heading_Page"]').closest("li");
var mega_menu_1 = li_heading_page.children("ul");

And insert custom html

var mega_menu_1_html =
  '<li><a href="/Page_1"><img alt="image" src="/data/_uploaded/images/page_1.jpg" /> Page 1</a></li>';

mega_menu_1.append(mega_menu_1_html);

or

mega_menu_1.html(mega_menu_1_html);

 

Edited: 3 years ago#10275

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

The li at the end and at the beginning is uncommon

If you want to get rid of the submenu's <ul><li>...</li></ul> structure you could also entirely replace it
with a <div><!-- my mega menu content --></div>

You only need to make sure that the css/js opening/closing the dropdown menu doesn't explicitly target an 'ul'.
A Bootstrap's nav dropdown will also work with any element, as long as it has the class 'dropdown-menu'.

Therefor you could build your mega menu like this

var mega_menu_1_div = $('<div class="dropdown-menu"><h3>Menu Heading</h3><p>Some text with a link to <a href="/Page_1">Page 1</a>.</div>');

and replace the former ul.dropdowm-menu

mega_menu_1.replaceWith(mega_menu_1_div);
Edited: 3 years ago#10276

mabu
277 Posts
3.3K Downloads
3 Themes
8 Plugins

Thank You for Your Engagement.

1.Of course i can add a div in the navbar with a menu and add the specific css - which then does not follow the pagemanager.

2.But the enumeration of an li can be quite useful for example if i want to give a heading-attribute to a link in a menu and others.

3.The problem with the bootstrap-menus from bootsnip and others is that they mostly do not have the 

<li> ; <ul>; li-/li -li-/li-li-/li; </ul></li> structure of typesetter - but without the first and last li.

I had the problem at first that the resulting sourcecode i generated was exactly like in the bootsnip-menu but the menu did not function and the positioning was in the right upper corner.  If i have succes i will publish it as a template.

 

 

 

Edited: 3 years ago#10277

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

The problem with the bootstrap-menus from bootsnip and others is that they mostly do not have the <li> ; <ul>; li-/li -li-/li-li-/li; </ul></li> structure of typesetter

But there is nothing like  ul>li>li. That's not valid HTML It's always ul>li>ul>li>ul>li.
Or ul>li>div, but that's a dead end and only suitable for 2-level menus.

Without being inside a hierarchical structure, dropdown menus need to be triggered via Javascript and IDs.
I've seen quite some ID/JS based menus on bootsnip, they are fine for hardcoded websites but painful to adopt for any CMS.

positioning was in the right upper corner

You will need to have position:relative; ONLY for the navbar's .container element. All descendants (e.g. ul.navbar-nav and its >li children) must have position:static;
Then you may use sth. like

.navbar-default .dropdown-menu {
  position:absolute;
  top:100%;
  left:0;
  right:0;
}

to achieve container-width mega menu dropdowns.

 

Edited: 3 years ago#10280

mabu
277 Posts
3.3K Downloads
3 Themes
8 Plugins

Sorry - but that solution would be much too simple(and crushing for me - even though i am not an experienced programmer)

1. One  problem is that the multilevel dropdown plugin inherits its dropdown-class  and its anchor classes to the second menu.(i have already given an id=mega to the second menu)

2. At the moment i am experimenting with the booNavigation from github which has the Typesetter structure (: just look at the soucecode in firefox) but still makes constant dropdown of all levels. >>   https://github.com/noemilosada/booNavigation

3. If i would not try to use two different menutypes parallel  then things would be much simpler. If things go on i will echo a bootsnip-html  in a div.

This snip was my  goal :  https://bootsnipp.com/snippets/featured/large-dropdown-menu(https://bootsnipp.com/snippets/yDe1)

Edited: 3 years ago#10281

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

... problem is that the multilevel dropdown plugin inherits its dropdown-class ...

Unfortunately Typesetter's menu rendering methods are far from being easy to understand/hack.
But I will see if I can find a way to allow custom multi-level menu class definitions in 5.1.

For the time being, the 'dropdown' classes will be inherited all the way down when defined via $GP_MENU_LINKS and formatted via $GP_MENU_ELEMENTS in  [Bootstrap theme dir]/drop_down_menu.php

But it still should be possible to unbind/modify the dropdown behavior for 2nd+ menu levels using jQuery in a plugin. I'll report back.

3 years ago#10282

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

After a dive into all the the menu rendering, Typesetter 5.1-b2 now supports some more customization and hooking here. More about this see below…*

As long as 5.1 isn't released, you will need to download the current master ZIP from GitHub and install it.

(You may also replace the /include directory of an existing Typesetter 5.0.3 installation with the /include dir from the ZIP Archive - this will update you to 5.1-b2.
In case you don't like 5.1-b2, I recommend to keep the old /include by simply renaming it before uploading the new one to your server - this way you can roll-back easily.)

 

* New menu options:

1. We now may add custom CSS classes to menu items.

Admittedly, this was long due. Now we got it.

screenshot

 


2. We now may add Extra Content Areas to menus.

This doesn't mean we would link to a page where an Extra Area shows up but to display it in the menu itself.
Beware, this is not for the faint-hearted ;-) You will have to add some specific CSS to your theme/layout in order to get useful results.

screenshot 2

 


3. $GP_MENU_ELEMENTS will now receive 2 additional arguments, $level and $menu_id.

For menu element formatting, Typesetter < 5 already calls a function assigned to the $GP_MENU_ELEMENTS global variable (if there is one assigned).
Bootswatch themes already use this function to generate Bootstrap compatible dropdown menu items. Normally it's defined in [theme directory]/drop_down_menu.php .

$GP_MENU_ELEMENTS now receives 4 parameters, which let's us reformat menu elements not only based on node type and already existing attributes but we now may also take the menu level and the source menu id into account. This way we can create very specific reformatting, however, it's not exactly intuitive and requires some PHP knowledge.

See this plugin BsMegaMenu 1.0 as an example. It shows how we can surpass the only-2-level menu class definitions, the $GP_MENU_CLASSES array lets us define.

Check out the code, it has quite some comments.

 

 

edit:

While custom css classes (1) alone will let us customize a menu to quite some extent – even more if we use JS/jQuery along – $GP_MENU_ELEMENTS (3) allows complete reformatting at output level. Of course both can be used in combination as well. With all 3 new options, we should be able to create almost any menu output we can think of.

Edited: 3 years ago#10283

mabu
277 Posts
3.3K Downloads
3 Themes
8 Plugins

That sounds really promising - and it is !

I was meanwhile experimenting with jquery.dcmegamenu.1.3.3.min.js. But somehow the jquery .attr(id, text) does not function as usual(i had to add a styled  id to the first ul) for the menu to function. It is only possible to see the really generated code with a firefox-plugin( i had not tried with : $page->jQueryCode .= '$(".myElement").on("click", function(){ alert("Click!"); });';)  from the documentation.

After adding a new area in pagemanager- 'extra content' it is possible to even edit the sourcecode with all possibilities. It is also possible to insert a bootsnip-code into an extra-area (after restyling the width of the specific dropdown) and so have a megamenu.

:The bootstrap megamenu plugin (/BsMegaMenu) shifts all dropdowns to the very left of the nav and needs further after-styling.  Its just that i need a megamenu for  a single second menutree.

 

 

Edited: 3 years ago#10284

mabu
277 Posts
3.3K Downloads
3 Themes
8 Plugins

After restructuring the tree in pagemanager (and adding the  new drop_down_menu.php...) i have a functioning menu in which only little formation like formatting of the submenu - width(centering, single colum-with no empty space at the right side)  and of the font-style is necessary - which is quite easy except the menu-with which is determined by  @media (min-width:768px){. ..}  in BSMegamenu.css. It causes a constant width of the megamenu independent of the columns and leaves a white space at the right side. I should  somehow be auto.

This is good  a solution for people who want all menupoints in dropdowns. Its just that many people want only  the last menupoint as  a megamenu. In my case i tried it with a second menutree.

Is it possible to keep the original old drop_down_menu.php  and add  a code with a decision for standard (m0) and higher menu m1,m2....mx  so that the dropdown can be added to one other menu ?

Other menus like bootswatch flatly and two point 0 thave further their dropdowns and wait for their adaption.

 

Edited: 3 years ago#10285

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

To get only a single mega menu dropdown, you need to set custom css classes via Page Manager, e.g.

  • 'mega-menu-dropdown'  to the li > ul field of the single level-0 menu item
  • 'mega-menu-subitem col-xs-12 col-sm-6 col-md-3'  for it's childrens' li fileds and
  • 'mega-subhead' to their a fileds, if a subpage is only sub-parent for other pages
     

and adapt the css accordingly.

Then you need to filter only those elements using the 'MenuElements' hook (in BsMegaMenu.php) called via the theme's custom drop_down_menu.php
While the filtering then could be level-independent since the custom class names are now item-specific, WE STILL need to keep the general filter for all zero-level a.dropdown-toggle links in order to keep them functional. Therefore the current way how level-specific formatting is done in the BsMegaMenu plugin is overhead and could be simplified.

As we see, it turns out that any rule-based menu rendering quickly comes to its limits, when there are one or several exceptions.

The BsMegaMenu plugin-based approach only makes sense as long as we deal with rather general menu modifications.

In your case, where the mega menu is only content-specific, trying to definine complex general-purpose rendering rules is not expedient.
Therefore I'd go the abovementioned route with custom menu item classes, but

  • move all the filtering out of the plugin context and code it directly in the theme's drop_down_menu.php
  • add the css to the theme/layout Scss/LESS
Edited: 3 years ago#10287

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register