Closed upsonp closed 11 years ago
pjackson28
commented
11 years ago The problem is with the use of:
<div class="mb-sm">That is only intended for use in the mega menu and is not designed to work with the side menu. Please align your markup with the working examples. Here are some links that could be helpful:
upsonp
commented
11 years ago Thanks for the quick response
I did my best to reformat the code to look like the working example, but the working example only goes down two levels (I.E. 4.1 to 4.1.1) and only uses the heading level 3 tag. I would like to go down two more levels, but require at least one more.
I've written a menu generator in PHP and was able to show how my menu looks as the mega menu, which is what I would like the secondary menu to look like.
Notice in mobile_003.png "Collaborations" under "Info for Clients" has a sub-menu, but in mobile_004.png "Collaborations" is as far down as the secondary menu can go.
Attached the updated left side menu code
<!-- SideNavLeftStart -->
<div>
<section>
<h3 class="top-section"><a href="/index-eng.php" title="Bedford Institute of Oceanography">Bedford Institute of Oceanography</a></h3>
<ul>
<li><a href="/general-generales/about-sujet-eng.php" title="About BIO">About BIO</a></li>
<li><a href="/other-autres/history-historique-eng.php" title="A Brief History of BIO">A Brief History of BIO</a></li>
<li><a href="/general-generales/contact-contactez-eng.php" title="Contact Us">Contact Us</a></li>
<li><a href="/general-generales/directions-eng.php" title="How to Find BIO">How to Find BIO</a></li>
<li><a href="/general-generales/events-activites-eng.php" title="Upcoming Events">Upcoming Events</a></li>
</ul>
</section>
<section>
<h3 class="top-section"><a href="#" title="Science">Science</a></h3>
<ul>
<li><a href="/science/data-donnees/index-eng.php" title="Data and Products">Data and Products</a></li>
<ul>
<li><a href="/science/data-donnees/base/index-eng.php" title="Oceanographic Databases">Oceanographic Databases</a></li>
<li><a href="/science/data-donnees/acon-eng.php" title="ACON">ACON</a></li>
<li><a href="/science/research-recherche/ocean/ice-glace/data-donnees-eng.php" title="Sea Ice Studies">Sea Ice Studies</a></li>
</ul>
<li><a href="/science/monitoring-monitorage/index-eng.php" title="Monitoring">Monitoring</a></li>
<ul>
<li><a href="/science/monitoring-monitorage/azmp-pmza-eng.php" title="Atlantic Zone Monitoring Program">Atlantic Zone Monitoring Program</a></li>
<li><a href="/science/monitoring-monitorage/azomp-pmzao/azomp-pmzao-eng.php" title="Atlantic Zone Off-Shelf Monitoring Program ">Atlantic Zone Off-Shelf Monitoring Program </a></li>
<li><a href="/science/monitoring-monitorage/bbmp-pobb/bbmp-pobb-eng.php" title="Bedford Basin Monitoring Program">Bedford Basin Monitoring Program</a></li>
<li><a href="/science/monitoring-monitorage/mwqmp-psqem-eng.php" title="Marine Water Quality Monitoring Program">Marine Water Quality Monitoring Program</a></li>
</ul>
<li><a href="/science/research-recherche/index-eng.php" title="Research">Research</a></li>
<ul>
<li><a href="/science/research-recherche/ocean/index-eng.php" title="Ocean Sciences">Ocean Sciences</a></li>
<li><a href="/science/research-recherche/fisheries-pecheries/index-eng.php" title="Fisheries and Aquaculture">Fisheries and Aquaculture</a></li>
<li><a href="/science/research-recherche/ecosystem-ecosysteme/index-eng.php" title="Ecosystem Research">Ecosystem Research</a></li>
<li><a href="http://www.nrcan.gc.ca/earth-sciences/home" title="Geological Survey of Canada">Geological Survey of Canada</a></li>
</ul>
<li><a href="/science/newtech-technouvelles/index-eng.php" title="New Technologies">New Technologies</a></li>
<ul>
<li><a href="/science/newtech-technouvelles/sensing-teledetection/index-eng.php" title="Operational Remote Sensing">Operational Remote Sensing</a></li>
<li><a href="/science/newtech-technouvelles/seahorse/index-eng.php" title="Seahorse">Seahorse</a></li>
<ul>
<li><a href="/science/newtech-technouvelles/seahorse/basin-bassin-eng.php" title="Bedford Basin Deployment">Bedford Basin Deployment</a></li>
<li><a href="/science/newtech-technouvelles/seahorse/station-eng.php" title="Station 2 Deployment">Station 2 Deployment</a></li>
</ul>
<li><a href="/science/newtech-technouvelles/observatory-observatoire-eng.php" title="Real-Time Arctic Ocean Observatory">Real-Time Arctic Ocean Observatory</a></li>
</ul>
</ul>
</section>
<section>
<h3 class="top-section"><a href="#" title="Outreach">Outreach</a></h3>
<ul>
<li><a href="/outreach-depassez/careers-carrieres-eng.php" title="Carrires">Carrires</a></li>
<li><a href="/outreach-depassez/tours-visites-eng.php" title="Guided Tours">Guided Tours</a></li>
<li><a href="/outreach-depassez/pavilion-pavillon-eng.php" title="Sea Pavilion">Sea Pavilion</a></li>
</ul>
</section>
<section>
<h3 class="top-section"><a href="#" title="Info for Clients">Info for Clients</a></h3>
<ul>
<li><a href="/info/advisory-consultatifs-eng.php" title="Advisory Activities">Advisory Activities</a></li>
<li><a href="/info/collaborations/index-eng.php" title="Collaborations">Collaborations</a></li>
<ul>
<li><a href="/info/collaborations/partnerships-partenariat-eng.php" title="Research Partnerships">Research Partnerships</a></li>
<li><a href="/info/collaborations/universities-universites-eng.php" title="Universities">Universities</a></li>
</ul>
<li><a href="http://www.dfo-mpo.gc.ca/science/coe-cde/index-eng.htm" title="Centres of Expertise">Centres of Expertise</a></li>
<li><a href="/info/publications-eng.php" title="Publications">Publications</a></li>
</ul>
</section>
<section>
<h3 class="top-section"><a href="#" title="Facilities">Facilities</a></h3>
<ul>
<li><a href="/facilities-installations/buildings-immeubles-eng.php" title="Buildings">Buildings</a></li>
<li><a href="/facilities-installations/gift-cadeux-eng.php" title="Gift Shop">Gift Shop</a></li>
<li><a href="http://www.dfo-mpo.gc.ca/libraries-bibliotheques/maritimes-eng.htm#bedford" title="Library">Library</a></li>
<li><a href="/facilities-installations/vessels-navires/vessels-navires-eng.php" title="Research Vessels">Research Vessels</a></li>
<ul>
<li><a href="/facilities-installations/vessels-navires/ccgs-hudson-ngcc-eng.php" title="CGGS Hudson">CGGS Hudson</a></li>
<li><a href="/facilities-installations/vessels-navires/ccgs-matthew-ngcc-eng.php" title="CCG Matthew">CCG Matthew</a></li>
<li><a href="/facilities-installations/vessels-navires/ccgs-needler-ngcc-eng.php" title="CCGS Needler">CCGS Needler</a></li>
</ul>
</ul>
</section>
</div>
<!-- SideNavLeftEnd -->The side menu can support up to three levels (see http://wet-boew.github.com/wet-boew/demos/theme-gcwu-fegc/cont-secnav2-eng.html) but additional would cause issues in mobile view, particularly on small screens. If your side menu has that much nesting then you may want to consider simplifying it or making it context-specific (so can reduce levels) so it is usable by mobile users.
upsonp
commented
11 years ago Thanks,
I tried breaking the menus up and having several different menus for the "Secondary" navigation, but I found it breaks the continuity of the site. I played around with a password protected version on my Android phone. My issue was I press the menu button and select "BIO > Science > Research", then I have to wait for the page to load so I can press the menu button to select "Research > Fisheries and Aquaculture" wait for the page to load. Press the menu button to select "Canadian Shark Lab"
With the "Primary" navigation created from the mega menu I'm able to just press menu and select "BIO > Science > Research > Fisheries and Aquaculture". Wait for page to load, press menu and select "Canadian Shark Lab".
Another Issue I had when I split up the menus to make them work with the mobile version was that the site became very tedious to use on a desktop machine. Instead of being able to see the whole left side menu and make the proper selection based on what was visible, I was constantly clicking something to bring up a different menu to drill down, then I had to go back to the start so I could drill down to different content. I'm not really a fan of dumbing down an extremely useful interface (to desktop users) and making it way more tedious to use, just so that someone with a mobile device doesn't have to scroll down. Especially, when a properly nested menu on the mobile device would solve the issue of having to scroll.
Is there a way to define the mobile version of the menu separately from the version that would be displayed to a desktop user?
At the moment my main goal is to get the content into the WET 3.0 templates. If you can't/won't allow for more levels in the secondary navigation I'll have to look into the menu issue again at a later date to see if I can structure the site differently to make the mobile menus work better. For now I'll just have to live with the quirky secondary menu behavior. Based on the Google analytic stats most of the users for our site are desktop OSs and I'd rather not make things harder for them by catering to the < 8% mobile visitors we get.
Please don't get me wrong. The mobile menu is fantastic and works very well, I like that its able to create the mobile menu with no additional effort on my part. You've done an excellent job.
pjackson28
commented
11 years ago Sorry, I wasn't very clear when I referred to support for three levels in the secondary navigation. WET can support a nested ul (third level) just like in the mega menu so "Research > Fisheries and Aquaculture > Canadian Shark Lab" would work in the mobile menu (ignoring space issues). I've updated the working examples to show how a nested ul can be used for the third level.
As for providing different menus altogether for desktop and mobile views, it is possible but not recommended (can AJAX in different menus based upon the current view). It would increase maintenance effort and create the risk of desktop and mobile menus getting out of sync (why two different versions of websites are discouraged). It is recommended that you implement an approach that works across both views.
Now for putting three levels of links in the secondary navigation, people from the User Experience Working Group (@wet-boew/user-experience-working-group) are in a better position to determine if there are any issues with that.
Note that most of our stats from January are showing that more than 18% of site visitors are using mobile devices (sourced from a few GC sites) and the numbers are rapidly increasing. It is recommended that you consider navigation/IA approaches that work well in mobile as within two years it is widely expected that mobile site visitors will exceed desktop visitors.
upsonp
commented
11 years ago Thanks for that Paul,
The updated working example really helps out. I think I know what I was doing wrong now. It's still going to be a few days, possibly a week or two, before I have another chance to readjust the menu, but the working example has enough levels for what I'm trying to accomplish. If I can structure it the way you've worked the working example I'm pretty confident it'll work out.
pjackson28
commented
11 years ago @upsonp Has the issue been addressed for you?
upsonp
commented
11 years ago yes, thank you
I'm having an issue with the Secondary Mobile Menu concerning sub-menus. I've attached a couple of screen captures demonstrating the issue and will do my best to describe it.
When using a second level sub-menu, the mobile menu pulls the sub-menu out of the list of links and places it at the bottom of the list. This results in a blank space where the sub-menu originally existed.
Image mobile_001.png shows how the "Collaborations" menu was was moved to the bottom of the "Info for Clients" menu leaving a gap between "Advisory Activities" and "Centres of Expertise".
Image mobile_002.png shows how the issue is compounded when looking at the "Science" section. Note all four sub-menus were moved to the bottom leaving four blank areas directly under the "Science" heading.
I realize this may be an issue with how I coded the menu so I've also attached the code for the left side menu if someone can identify an issue with the code: