WebSite X5Help Center

 
Fabio B.
Fabio B.
User

Menù Overlay Multilevel, how to, some way  en

Автор: Fabio B.
Просмотрено 714, Подписчики 5, Размещенный 0  

Following the request of Andre E. i will explain here how to in english (i hope comprehensible as i don't use GG Translate).

I found 2 way to get a Overlay menù multilevel.

The first one is the simplest way, starting from a normal menu object, not Overlay menù.

1) Just put the following css+jQuery code in the Step One > Advanced Settings > Code > before closing tag head

<style>
/* Copyright Fabio Bevilacqua */
@media only screen and (max-width: 640px){
div[id$="-menu-opened"],
ul.menu-mobile-animated,
ul.menu-mobile-animated *,
div[class="hamburger-menu-background menu-mobile menu-mobile-animated hidden"]
{width: 100% !important;}
}
</style>
<script>
/* Copyright Fabio Bevilacqua */
$(document).ready(function(){
$('li.imLevel').click(function(){
$(this).siblings().remove();
});
});
</script>

2) Put a normal hamburger menù in the header content within the template.

On desktop view you will see such the normal menù working with your settings from the program UI.

On screens under 640px you will see the overlay version of the same menù.

As you can see this is simply a css based way to modifie the normal menu object.

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

The second way uses the optional object Incomedia's Overlay Menu, so...

1) ...the first step is obviously to put this object in the header within the template for the main level of your website

2) create a hidden page inside each of sublevels that you want to show in your Overlay Menu (for example: level-1-menu-page,  level-2-menu-page, level-3-menu-page...)

3) into each of these hidden pages put a new Overlay Menu object showing himself level; then go in the Page Properties ( at the step 3), select Property of tag body and put this code: <body onload="openMenu()"></body>

4) in the map (step 3) give a link to that page to the level you choose to open it with and open the page in the same window (for example: Level 1 point to level-1-menu-page...)

5) put the following css+jQuery code in the Step One > Advanced Settings > Code > before closing tag head

<style>
/* copyright: Fabio Bevilacqua */
button.exit {
font-size: 25pt;
color: black;
background-color: transparent;
position: fixed;
top: 38px;
right: 38px;
z-index: 1000000;
}
div#imBreadcrumb {
z-index: 1000000 !important;
width: 350px;
top: -60px;
}
</style>
<script>
/* copyright: Fabio Bevilacqua */
function openMenu(){
setTimeout(function(){
$(document).ready(function(){
$('.trigger-overlay').click();
$('div[class$="_menuoverlay_back"]').append('<button onclick="goBack()" class="exit" color="currentColor">X</button>');
$('div[class$="_menuoverlay_back"]').append('');
exitColor = $('div[class^="pluginAppObj_"]:last-of-type ul li a ').css('color');$('button.exit').css('color', exitColor);
$('div#imBreadcrumb a').removeAttr('href');$('div#imBreadcrumb a').removeAttr('onclick');
});
}, 1000);
};
function goBack(){
window.history.back();
};
</script>

If you want, you can customize the close button by changing background color, font, image...

That's all.

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

Another user, Luca E., found a third way to create a multilevel overlay menu that is explained in italian in this topic: https://helpcenter.websitex5.com/ru/post/238356

as it's not my creation i wont translate that in here but just do a mention; this is a php based overlay menu very nice, less easy to implement but doesn't need to do adjustements in the project pages after installation in case of site grow. While in my second way you will always have to repeat step 2,3 and 4.

Размещено
38 Ответы - 3 Полезно
Luca E.
Luca E.
User

Hi guys, sorry for my bad english, but with the help of google translate we try.

PS: The pages of the site must be with php extension. In my style sheet I have inserted font-awesome. IMPORTANT: In the html.txt file replace the string imHeader_imMenuObject_02 with the id of your wsx5 menu as in the picture.

DEMO HERE: https://www.arteottica.net/provamenu8_1/

Enjoy

Читать больше
Размещено От Luca E.
John S.
John S.
User

@Luca (5 thumbs up) and Fabio (3 thumbs up)( only 3 because of the level navigation and the styling) - this is how a overlay menu should function.

@INCOMEDIA - Hope you can make something like this but without the need of PHP. Now you can see how it should be made.

I tried to make the thumbs up using emojis - but system did not publish then.

Читать больше
Размещено От John S.
Luca E.
Luca E.
User

@John thks laughing

Читать больше
Размещено От Luca E.
Giuseppe Guida
Giuseppe Guida
User

I also join Fabio and Luca by proposing my solution: only CSS and only with the functions of Website X5.
Attached is the project to download, here is the online example link:


http://www.test70.altervista.org/menufullwidth/

IMPORTANT: you must find the correct ID of your Menu Object and replace this number in my code entered in the project in STEP 1 Settings / Advanced / Statistics and Code / Code / Custom code / Before closing the Head tag).
Finally, these visible in the screenshot below are the values to be entered in the settings of the Menu Object "Hamburge Menu" section.
That's it, have fun.

Читать больше
Размещено От Giuseppe Guida
Fabio B.
Fabio B.
User
Автор

Thank you John. Anyway, styling the menu is up to you, how you can do it by the program's UI. My only care is that it runs efficiently and you can implement it easily. This is only a technical tool to customize from the program UI, not a universal stuff for all websites. wink

Читать больше
Размещено От Fabio B.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

From me also a very big THANK YOU and thumbs up! Also for this English version.... :)

@ Fabio,

I found your menu is not for me personally, i don't see home page in levels and it jumps and takes a bit to load or reload.

But again very nice for making this, no affence intended here in any way.

@Luca,
I will now start with yours, it can be set in header so i can control viewport myself, so that looks good for me, i will let you know!

But again guys a very big thumbs up to all of you, i feel realy a bit embaressed why Incomedia can not handle this in the overlay menu and make it more usefull, i see problems with menu's all over the helpdesk.

It feels a bit like the spirit is not there anymore at Inco, the will to get better and to show that they can be better and help out is more easy going instead of comon let's do it. It's just not 110% anymore, and it's a shame because the program itself is so good and easy for sterters, and also usefull for experienced users.

Читать больше
Размещено От Andre E
Luca E.
Luca E.
User
Andre E
From me also a very big THANK YOU and thumbs up! Also for this English version.... :) @ Fabio, I found your menu is not for me personally, i don't see home page in levels and it jumps and takes a bit to load or reload. But again very nice for making this, no affence intended here in any way. @Luca, I will now start with yours, it can be set in header so i can control viewport myself, so that looks good for me, i will let you know! But again guys a very big thumbs up to all of you, i feel realy a bit embaressed why Incomedia can not handle this in the overlay menu and make it more usefull, i see problems with menu's all over the helpdesk. It feels a bit like the spirit is not there anymore at Inco, the will to get better and to show that they can be better and help out is more easy going instead of comon let's do it. It's just not 110% anymore, and it's a shame because the program itself is so good and easy for sterters, and also usefull for experienced users.

Hi Andre. Yes, my script is self contained. You just have to create the pages in wsx5 and the script will search for them by itself.
A trick: you can create a hidden page, create multiple menus and submenus, and create multiple menus on the same file.
For those who cannot use php pages, you could do a fwrite that stores an html page and with jquery make a load and recall the previously created page.
It is a very versatile script.

Читать больше
Размещено От Luca E.
Luca E.
Luca E.
User

I have made some changes, and now I believe it is complete.
In the mymenu.css file you need to replace this

.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}

with this

.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: auto;
transition: 0.5s;
}

However, one thing I forgot to write is very important:
You have to give a link to the first level, ok a page or just #

ENJOY

Читать больше
Размещено От Luca E.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

i changed your code looks all good, why do you need an link to first level? a link from where?


never mind, got it... 

Читать больше
Размещено От Andre E
Luca E.
Luca E.
User

if you don't insert links to the levels the script doesn't work

Читать больше
Размещено От Luca E.
Luca E.
Luca E.
User

This Is the last PHP script for html object

Читать больше
Размещено От Luca E.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN
Luca E.
This Is the last PHP script for html object

If i use this code all info from website is gone. Please check.

https://andreweb.nl/Luca/index.php

There should be a header logo on the home page, with old code it works, and yes i have set menu object nr.

your original code same project: (your menu is in the 2 lowest viewports)

https://andreweb.nl/Luca_org/

Читать больше
Размещено От Andre E
Fabio B.
Fabio B.
User
Автор

Andre in your website https://andreweb.nl/tst/index.html i see my script#2 working, but why you put Level3's link to HP? It should point to a hidden page inside Level3 as i have explained. You did a mistake.

Read again points 2, 3 and 4.

Читать больше
Размещено От Fabio B.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN
Fabio B.
Andre in your website https://andreweb.nl/tst/index.html i see my script#2 working, but why you put Level3's link to HP? It should point to a hidden page inside Level3 as i have explained. You did a mistake. Read again points 2, 3 and 4.

No that's not your test site, it's a common tst, don't know what i got there at the moment, probably a mess.. :)

i stopt looking further at yours, but these test are here;

https://andreweb.nl/fabio2/

https://andreweb.nl/fabio1/

nr 1 does not seem to work. i added a normal menu in the header and set it to always show hamburgermenu, i hope that is what you ment by place a standard hamburger menu in the header

Читать больше
Размещено От Andre E
Fabio B.
Fabio B.
User
Автор

Yes, that's it. Infact they both are working correctly. If for you #1 doesn't work then for you it's the Incomedia's normal menù that is not working.

Also, you cannot see HomePage in all levels because it's not in all levels, only in the first; so you have to close menù and open again (#1) or close and go back (#2).

If you don't like it's ok, but they both work properly.

Читать больше
Размещено От Fabio B.
Luca E.
Luca E.
User
Andre E
Luca E. This Is the last PHP script for html object If i use this code all info from website is gone. Please check. https://andreweb.nl/Luca/index.php There should be a header logo on the home page, with old code it works, and yes i have set menu object nr. your original code same project: (your menu is in the 2 lowest viewports) https://andreweb.nl/Luca_org/

Andre in your first link the source of menu is blank

In second link the source is ok

verify the PHP settings in my script

Читать больше
Размещено От Luca E.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

@Luca,
verifyd php, followed your instructions uploaded again,does not work, i am going to eat now, i wil walk through the new code after dinner to see what s happening.

ok, checked your code, 

it looks like there is an unknown page, hidden.php in line 13 called (i removed the empty line 1) so in yours it is line14.

this should be set to index.php imho.

Let me know....

after changing it to index.php and uploaded it again both example works know.

Читать больше
Размещено От Andre E
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

New file.

Let me know if i am wrong i will remove the file / post if needed.

THX!

Читать больше
Размещено От Andre E
Luca E.
Luca E.
User
Andre E
New file. Let me know if i am wrong i will remove the file / post if needed. THX!

Hi Andre, I have inserted various levels of menus in the hidden.php page (hidden and private to the admin only)
If you want, you can point the reading of the DOM to any other page, such as the index.

Читать больше
Размещено От Luca E.
Luca E.
Luca E.
User

If you don't want to use PHP extension on the pages you can do the following:

DELETE echo $out22; NO $out;

and add:
$files = fopen ("this-is-my-html-menu.html", "w");
echo fwrite ($files, $out22);
fclose ($files);

the script will create a page called this-is-my-html-menu.html

Next you have to create an html object in wsx5, and seeing the source code you go to get the object id
Example: imHeader_imHTMLObject_34_wrapper

Finally in the seo and code section
tab code insert page call with jquery:

<script>

$(document).ready(function(){

$(function(){

$("#imHeader_imHTMLObject_34_wrapper").load('this-is-my-html-menu.html');
});

});

</script>

Using this method, you must remember to run the primary php file that makes up the menu, every time you change the menu to wsx5
Remember to replace the id in bold

Читать больше
Размещено От Luca E.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

Tha pages i test with are all PHP. but for me it works, so a very big thank you.

Читать больше
Размещено От Andre E
Luca E.
Luca E.
User
Andre E
Tha pages i test with are all PHP. but for me it works, so a very big thank you.

I had no doubt. wink

Take a look at this. My script integrates perfectly and is even more beautiful than the overlay

https://github.com/FrDH/mmenu-js

Читать больше
Размещено От Luca E.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

Hello Luca,

sorry, but i kicked the menu out for the moment, at my site the shop search does not work in combination with your menu.

I set it to php, and it just does not show up at all if set to html it works, but then the menu does not work obviously, so now i have set the overlay from x5 again, and that seems to work, only thing is you need to make for all folders a hidden menu and you have no submenu's underneath the folder.

If i have some time ( abit busy at the moment i will try the Giuseppe version.

Thanks anyway, and if you can test this and let me know if you have same problem then it would be nice to see a solution. Anyway, thx for all the effort so for to all.

https://andreweb.nl/Luca/cartsearch/index.php

https://andreweb.nl/Luca/cartsearch/index.html

Читать больше
Размещено От Andre E
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

Hello Giuseppe, also thanks for making this menu, but for me this is not what i seek.

I got complaints from custumors that the hamburgermenu menu is not  logical, for the reason below.

Go from my example to level2 you will notice that the menu jumps all over and the place where level1 is at the beginning is when you go there jumps to other locations. If you are finily there and want to go to level2 same thing the menu just jumps all around and you end up on a totaly different place level2 is at the start indicated (CLS on menu). 

That's why i went to the overlay menu from x5, but that does not show levels and pages underneeth that, so it's pritty useless because it does not follow the normal menu structure and you need to make all kind of -ugly- workarounds, and they are ugle because these workarouns will also be in your normal menu.

https://andreweb.nl/giuseppe/index.php

Читать больше
Размещено От Andre E
John S.
John S.
User

@INCOMEDIA

Here : https://www.dmi.dk/

You can see how a overlay menu should function. It is much the same as in the X5 - but with a big difference.

If the level in X5 is set to hide pop-up then clicking the item will open a page.

On the page settings should be an extra option :

If opened in overlay-menu show sub-levels ( and eventual pages as line(s)).

This will make it possible to go down levels in the overlay-menu. If a page-line is clicked then the page should open.

This should be much the same as in the link I show.

This will be a very effective way to navigate in the overlay-menu.

Instead of the totally useless opening of pop-up-menus. This is very very confusing for a user, and with more levels it is useless.

Читать больше
Размещено От John S.
Giuseppe Guida
Giuseppe Guida
User

Sì, é giunta l'ora che Incomedia prenda di petto la situazione e renda migliore e più moderno il menù hamburger che contiene LIVELLI perchè è stato segnalato da tantissimi utenti e in tantissimi anni che quel menù hamburger  "salta" da un livello all'altro se utilizzato nella versione desktop (e oggi molti siti web, come nel link postato da John S.: https://www.dmi.dk/ utilizzano l'hamburger con livelli anche su desktop)

TRANSLATE

Yes, the time has come for Incomedia to take the situation head on and make the hamburger menu that contains LEVELS better and more modern because it has been reported by many users and in many years that the hamburger menu "jumps" from one level to another if used in the desktop version (and today many websites, as in the link posted by John S .: https://www.dmi.dk/ use the hamburger with levels even on desktop)

Читать больше
Размещено От Giuseppe Guida
Andre E
Andre E
Moderator
Лучший пользователь месяца EN
Giuseppe Guida
if used in the desktop version

This is the same for the smallest (phone) viewport even if hamburgermenu is not set in desktop. Pritty much all mobile/phone websites views from x5 are effected by this strange jump effects, and the phone is getting more and more used to view websites......

Читать больше
Размещено От Andre E
Luca E.
Luca E.
User
Andre E
Hello Luca, sorry, but i kicked the menu out for the moment, at my site the shop search does not work in combination with your menu. I set it to php, and it just does not show up at all if set to html it works, but then the menu does not work obviously, so now i have set the overlay from x5 again, and that seems to work, only thing is you need to make for all folders a hidden menu and you have no submenu's underneath the folder. If i have some time ( abit busy at the moment i will try the Giuseppe version. Thanks anyway, and if you can test this and let me know if you have same problem then it would be nice to see a solution. Anyway, thx for all the effort so for to all. https://andreweb.nl/Luca/cartsearch/index.phphttps://andreweb.nl/Luca/cartsearch/index.html

Hello Andre, view here:

https://www.arteottica.net/blog/

https://www.arteottica.net/cart/

it works for me...

you probably haven't thrown out the link recognition feature

check here 

$cartella = $_SERVER['PHP_SELF'];

if (strpos($cartella, '/res/') !== false || strpos($cartella, '/cart/') !== false || strpos($cartella, '/blog/') !== false)

{

    $mypath = "../";

} else {

    $mypath = "";

}

And here

foreach($item22->find( 'a') as $item_link22)

$item_link22->href = $mypath.$item_link22->href;

PS: my cartsearch product (under development)

https://www.arteottica.net/cartsearch.php

Читать больше
Размещено От Luca E.
Luca E.
Luca E.
User

@ANDRE E

find this

$cartella = $_SERVER['PHP_SELF'];

if (strpos($cartella, '/res/') !== false || strpos($cartella, '/cart/') !== false || strpos($cartella, '/blog/') !== false)

{

    $mypath = "../";

} else {

    $mypath = "";

}

and change with this

$cartella = $_SERVER['PHP_SELF'];

if (strpos($cartella, '/res/') !== false || strpos($cartella, '/cart/') !== false || strpos($cartella, '/blog/') !== false || strpos($cartella, '/cartsearch/') !== false)

{

    $mypath = "../";

} else {

    $mypath = "";

}

I'm sorry to disappoint you, but my script works, and it also works very well 

seeing is believing cool

Читать больше
Размещено От Luca E.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

THX Luca, 
And you don't disapoint me, i am very glad with your menu and effort to help out.

The shop search works now but the hamburgermenu in the smallest viewports is now gone.

https://andreweb.nl/Luca/cartsearch/index.php

Читать больше
Размещено От Andre E
Luca E.
Luca E.
User

check the css settings.

later of a glance from PC and I verify the problem

Читать больше
Размещено От Luca E.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

extra info, it is only in the search! in the normal menu (home page) it works correct

Читать больше
Размещено От Andre E
Luca E.
Luca E.
User

@andre in the cartsearch path the css file is missing.

if you have inserted the link to the style sheet in the head tags you have to do this:

in the head section write:

<?php

$my_cartella = $_SERVER['PHP_SELF'];

if (strpos($my_cartella, '/cartsearch/') !== false || strpos($my_cartella, '/cart/') !== false || strpos($my_cartella, '/blog/') !== false)

{

    $mypaths = "../";

} else {

    $mypaths = "";

}

?>

<link rel="stylesheet" href="<?php echo mypaths; ?>files/mymenu.css?v=1" media="screen,print">

Читать больше
Размещено От Luca E.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

sorry Luca

i set the code above in head section of the search -> website does not work at all anymore.

set the code next to the one there already was in the head for all pages -> no website at all

replaced the code for aal pages in the head with code above -> no website at all anymore.

Else leave it, i don't want to give you a lot work for this.

Читать больше
Размещено От Andre E
Luca E.
Luca E.
User

<link rel="stylesheet" href="<?php echo $mypaths; ?>files/mymenu.css?v=1" media="screen,print">

correct here. in writing I omitted the character $

Читать больше
Размещено От Luca E.
Luca E.
Luca E.
User

like i did. Look at the photo

Читать больше
Размещено От Luca E.
Andre E
Andre E
Moderator
Лучший пользователь месяца EN

Got it the $ was missing.

looks good now!

Читать больше
Размещено От Andre E