Hamburger menu sublevels not showing 
Autor: John W.I just spent a lot of time reading many many forum entries on this first before starting this one. I do
remember some advice from about a year ago that I read, but cannot seem to find now.
In the narrower viewport modes when the hamburger menu replaces the nice wide across the screen menu,
I just noticed today that the sublevels in it are not displaying easily.
First, I should say, that I have set my level categories to be links. Thus when you set up the breadcrumb
paths on pages, it does allow you to click on those phrase and return to a designated page you want them to
go to. On a PC or laptop with a mouse, presents no problem.
But trying to get to the sublevels in the hamburger menu on a Samsung smartphone right now, it is not
allowing me. Tapping the main level menu item takes me to the page set up for it. I cannot get it to open the pages below it. Several have multiple levels, such as: Knobs and Pulls, then all the
manufacturer names as sublevels under that, then all the knob and pulls collection pages for each
manufacturer under that. Many of my other main categories are set up the same.
I have gone through every viewport and set the menu to Bring to Front. My menu level tab in the
Template settings is set for Arrange in Multiple Columns. The effect is slide. I have everything on the Left.
In the Hamburger menu Tab, there is something that says Time: 100. I do not know what that setting
controls.
I do remember the menu working fine when I was going through my testing of the site. And I remember
one of your techs telling me that when I experiment on a PC in Preview mode in the smaller viewports,
I will not get the same result. But when on a Smartphone, it will function correctly. Well, on the smartphone
today, something is not digesting well.
website is https://www.eclectic-ware.com
I would imagine there is one setting I am just not finding. Any ideas? And I hope the idea is not to
remove the links from the main levels. That would mess up the breadcrumb ability to have navigation.
But I guess it is more important for the hamburger menu to function right if that is the hang up.
HI John W.
Stop button animation.
I think the mobile menu has to be rethought. Many menus lose users. The mobile has a small surface and large buttons have to be used.
Consider using the Overlay Menu
Create a Hamburger Menu including items in the first level. Once opened, the menu overlays all available space on the page.
Link: https://market.websitex5.com/en/objects/live-preview/109860b8-2f31-41b7-a3be-2731327326d
Or make a page with menus.
John, for what it's worth I agree with Antal, although I would also add a menu to the top row on each page as appropriate. For instance, clicking on Arthur Harris could open a (hidden) page on which is a menu with all the subheading.
Then on each individual page the top row could have a hamburger menu with related Arthur Harris pages.
This would work better than the dynamic vertical uncontrollable hamburger menu including all headings, subheadings and pages flying open and closed depending on where you touched the screen.
Autor
Antal and Esahc,
I was kind of worried that having all pages in the same menu on every page was a bad approach. I have seen
other websites that make pages available this way. Yet, I also see in the source code, there is a heck of a lot
of code in the html file before you even get to the gist of the page data. Thus pushing that H1 tag very low in
the code, and risking almost all the same html indexed for each page first in search engines, that might have a
cut off on how much of the page they index. (This also may result in a faster page loading speed without all that
extra html.)
So your suggestions of shortening the main level menu and adding individual submenus on the next tier of pages
is something I understand and had considered months ago before publishing the site. I was kind of hoping to
avoid that. But in essense, it is how I formatted my site in the past. Go back to what works, right?
Just curious too, could you direct me to one or two URL's of sites created with Website X5 that are larger and
have set themselves up just like you suggested. I know what I should do, but also seeing a couple real life
examples is always helpful too.
Thanks,
Hello John
You could look how I have chosen it to be, here :
http://bramminginfo.dk/starten.html
What you see is a sub / sub level, and still the menus can be handled on a mobile.
It is made with all the menus ( sub sub ) NOT being shown when hovering but by clicking. If I made it with the hovering the user would be insane by trying to go to the lowest level.
HI John W.
I can suggest two websites. These websites have more than 100 pages. When embedding pages, you need to think about what you want to show users and break them down into topics.
1 Preferably 4-5 main menus.
(user starts to see what topic you want to see on the page)
2 Submenu Pages 3-6 options that you can further narrow down to a particular service or product.
3 Service, Products, Information pages
(user repeatedly clicks on a main page)
Mobile look
The menu structure always consists of a main menu with no submenus! The recommended minimum menu size is 48 * 48px
Link 1 : https://www.misterminit.hu/SHOP/index.html
Link 2 : https://topclean.hu/ruhatisztito.html
Link market : https://market.websitex5.com/en/templates/live-preview/2fb8b3fd-1f36-4ce4-82f1-27be04a5bef
Link market (solutions suggested by you) : https://market.websitex5.com/en/templates/live-preview/81077124-10a0-43ae-92f3-1952dad765
But before you start rethinking the menus, do you think you should show all the information on your homepage? This will make the page very slow and lose the user.
So, re-think the mobile menu with only the main menu items.
HI John W.
The Vintage Shop ((solutions suggested by you))
https://market.websitex5.com/en/templates/live-preview/81077124-10a0-43ae-92f3-1952dad765
Autor
John and Antal,
The guys trying to make me read German and Hungarian. Very helpful. I understand the pages even though
I cannot read them. ;)
And yes, I should consider a shorter home page. Maybe I will just scroll a gallery for the bottom highlighted
products. I was trying to get about 500 to 800 words on the page to make Google more happy too.
Antal, on this link you suggested: Link market : https://market.websitex5.com/en/templates/live-preview/2fb8b3fd-1f36-4ce4-82f1-27be04a5bef
I see that when you hover on a menu main category item, it opens the sublevel immediately. How is that being
accomplished? When I made the category headers links themselves, is that what is inhibiting the drop down
menu list from opening automatically?
I will brainstorm on all suggestions this weekend. This is the slow time of the year for me. Come January, I would
like to be more ready with a better completed project. I know many pages are wordy. There is a lot of info to
convey when you offer both products and tech support on products. It has been a challange and will continue
to evlove.
Thanks,
HI John W.
I was thinking of arranging the PAPER template.
The solution used lies in the menu structure.
A new level of opportunity
The level menu does not provide a link so the menu on the mobile can only open and cannot open a web page.
(no mobile mouse to hover over menu)
With this solution, there will be fewer menus in mobile view.
Please consider using the submenus in mobile view.
Autor
Thanks, Antal.
Autor
Antal,
I take it that when you create a menu, and you Select the menu level of the items you want to display: as Menu,
you are going to get every level and every page in the map in that menu. No way to tell it just the top 1 or 2 levels
and not include the 3rd levels?
I have read that from the Map, I can hide the drop down menu for this level on mouseover. (And I could do that for multiple 3rd level menus.)
But if I do that, two questions: 1) Does it only hide that level's submenu, or does it also refrain from writing all
the code for all those pages into the HTML file? and 2) If a drop down menu is triggered to be hidden for a level,
but you create another mini menu on a page for that level, will the dropdown work on the mouseover?
Autor
Okay, I messed around with my practice site. When a level is set to hidden on mouseover, all the HTML code
such as this:
</div>
</li><li class="imMnMnLast imPage" data-link-paths=",/page-104.html">
<div class="label-wrapper">
<div class="label-inner-wrapper">
<a class="label" href="page-104.html">
Page 104 </a>
</div>
Is NOT added into the HMTL. That is good. Making the file shorter. And if the level label is not set to be a link
itself, then it does nothing. No drop down, no clickable link. When set as a link, I do get the page I want as that
link. And with the mini menu, it does not open on a mouseover, only with the mouse click, or tap I presume.
So halfway there to a solution. I really do want the mini menu to open on mouse over. But not having the full
honkey big menu on every page would increase page speed. And as you said much further up in this conversation,
it would alleviate menu confusion.
Autor
Antal and John,
Holy Shorter HTML, Batman.
I am almost to the result that I want. Much better than it was. I hide pretty much all of my second levels from
the main menu, and set up the second hamburger button to show the level pages within the section a customer
would be in. IE seems to want to scramble it a bit. But Firefox, Chrome, and the smartphone did well with it.
I had noted the sizes of two HTML files before reducing the main menu and adding all the other submenus.
index.html was 200KB, now 99KB. Another page went from 204 to 109. So I suspect all files got smaller.
Which is a really good thing.
But then I signed up with Add This and put the Add This social icon sharing thing in the footer of all pages.
I notice it drags a little when it looks to the Add This site for info to update that social bar. But since it is in the
footer, the rest of the page pops up fast as it takes its time down below. By the time a person scrolls, most likely
it would be finished each time.
So I feel I am about 95% of the way there. Thanks for the help.