I have this problem with this basic multi-level responsive menu I made while using :hover (I'm not a profesional. I'm just someone who knows some html, css and wants to create a theme for a favourite website).
When using a mobile device (Chrome for Android):
if I tap the second menu entry (I still haven't mod the link for the responsive mode of the first menu "Forums"), the submenu opens just fine
If I tap the third menu entry, its submenu will open, but in the process it will also tap a link inside the submenu.
I pressume it is because the height of the menu container changes when each submenu is opened and when the submenu is opened the tap is still active and it clicks a link of the submenu.
How do I stop that from happening?
This is the website where the theme in construction is: http://etrostruewowdesigncomplete2.esy.es/phpBB3/index.php
The menu itself is still not finished (i have to hide some links in responsive modes and icons). The menu container opens when taping on the search icon.
This the menu. For example, when opening Community's submenu with a tap, the link highlighted is also taped in the process:
Here is a screenshot of the menu on small screen :
I've decided to go with onclick events for the menu. Hover will just not do it.
Related
Well the title is self explanatory, check this out; http://testing.mkitra.com/4.2/
in the nav bar, the third link is a dropdown which has a submenu. On PC it works fine, it opens when the mouse hovers over it. Now try it on mobile environment. When you click it, the dropdown just closes, you need a prolonged tap to open the submenu. WHY?? Any recommendations?
Thanks guys
This doesn't work because in class dropdown of bootstrap it uses :hover. You should change it to use jquery hide&show and use jquery-mobile for making dropdown in mobile when clicked.
View link here
Hope this will help!
/Assuming usage of an iPad or iPhone/
If I add a website to the springboard the Pressure Touch pops up a menu that says "Share this page".
Does anybody know if that menu is editable or expandable with items?
I would like to add short links of the menu to the item list.
Couldn't find it anywhere....
I have created a single page site, when menu items are clicked, the page scroll to anchors defined in page. The menus are working fine on large screen (desktop) and when clicked the page scroll to the section, but on small screen (mobile) AMP sidebar menu doesn't close after tapping on a menu item and if you press the close button, then it doesn't go to the section of page that was selected in the menu.
As found at this issue on Github:
amp-sidebar pops the history when it's canceled so the navigation is canceled
it's a known bug with single page anchor navigation, but:
This should be fixed in the next release
the relative fix branch is now (2016-11-30) under review
For the dropdown menu on one of my webpage, after I click to do Inspect element on one of menu items, the dropdown menu would collapse and disappear, and such that I couldn't check the content of the dropdown menu in the html and neither really check the corresponding css styles (and further play with the styles). Is there a way to freeze the dropdown menu after clicking to do the Inspect element operation?
After clicking on the menu, press F8 to pause script execution. That should keep your menu open so you can inspect it.
I have a site where in the top header area I have a dropdown which only works when the user hovers the mouse over it (http://liquor.com). But in mobile versions I've been informed this behaviour won't work.
So I'll put a conditional statement in the code and display another dropdown menu, but I'm curious what code should be used for a mobile dropdown.
Any help would be greatly appreciated.
I have pure CSS (no javascript at all) 2-level drop-down menus that work on at least the iPod touch, iPhone, and iPad.
All that was required was to add a dummy onclick handler, so
<li><div class="menuheader">Reports</div>
... </li>
became
<li><div class="menuheader" onclick="void(0)">Reports</div>
... </li>
This was described in Apple's Safari Reference Library entry for Making Elements Clickable.
You could try this: http://css-tricks.com/unobtrusive-page-changer/
Because mobile platforms cannot :hover, you have to bind the dropdown menu to click events instead.
Basically follow this procedure to create a dropdown menu:
Capture the click event for top-row navigation links (because users cannot hover)
Prevent default (browser loading new page)
Load appropriate submenu depending on which top-nav link was clicked.
Remove submenu when it loses focus (user clicks on page or other top-nav-link)