Drop down links not working in iOS - javascript

I have a Wordpress website that has a horizontal menu bar with a drop down sub-menu that appears when hovering over the parent menu item. The links to the sub menu works in a regular browser, however, when using my iPhone, the links to the sub menu do not work. It previously worked only in a long press mode, but I didn't want the long press mode so I added the following code in my CSS to remove the long press mode:
.navWrap .top-bar2 li.menu-item {
-webkit-user-select:none;
-webkit-touch-callout: none!important;
}
and I also added the following javascript (because the CSS didn't work and some people suggested the javascript solution):
<script type='text/javascript'>document.documentElement.style.webkitTouchCallout = "none";</script>
You can test this by going to the following link: http://sa4iserver1.com/~hoffer/ -- at this time, the only menu item that has a drop down sub-menu is the RENT menu item.
Any suggestions on how to make the sub-menu links clickable via iPhone/iPad would be greatly appreciated!

Related

How to make header section with menu appear, no matter where I scroll to vertically on the page

I have a profile site which is currently hosted on Github pages. I incorporated Bootstrap and it's responsive. I have a header section which contains the navbar menu.
However, my current issue is, on either the desktop or on mobile, when I click any of the nav bar menu links and get taken to the target section, I will have to scroll back up to the header section in order to see the menu and click on another link of choice.
I want to implement a CSS animation, JavaScript or JQuery function or animation that will make it possible for the header and the menu to be visible for clicking even when I scroll away from the top of the page where it is domiciled.
In other words, when I click on the Strengths link and get taken to the Strengths section, I want to be able to touch the screen at that location (on Mobile) or click/scroll/hover (on Desktop), and have the menu appear again for clicking. Instead of scrolling all the way to the top just to click on another link.
ATTEMPTS
i have tried the following:
`
`$(document).on("keypress", function(){
$(".header").css("display", "block");
})
$(document).on("touchstart", function(){
$(".header").css("display", "block");
})
$(document).on("touchstart", function(){
$(".header").hide();
})
$(document).on("keypress", function(){
$(".header").show();
})`
`
But have not achieved the exact objective.
WHAT I EXPECT
When I click on a link of the menu and get taken to the section I have clicked for, I want to be able to touch the screen (on Mobile) or click/hover/scroll (on Desktop) and have my menu appear once again at this current location.
This way, I can always have access to the nav menu at every location/section I am on the page at every given time.
Kindly help on where I'm getting it wrong and what I need to do.
Thank you.

Using CSS or JS to auto-expand submenus on mobile site

I am looking to have my mobile site's menu automatically expand the top menu item's submenu after the hamburger menu is tapped. I have tried using this CSS, but it doesn't work:
.menu-item-has-children {
display: block !important;
}
I noticed that when the top menu item has its submenu opened, an attribute called aria-expanded toggles from false to true.
Is there any way to default that attribute to true without using JS? If not, any JS suggestions would be much appreciated.
Here is a link to the one page on my staging site with this menu applied
This is what the mobile menu looks like currently
This is what I'm trying to get it to look like (submenu expanded)

jQuery Slidedown - I search another effect but don't know the name

I'm working on a HTML version of the Office Ribbon to implement it in any HTML website.
Currently everything is working fine. I do have a button and when I click on it, a menu is shown.
This is done by using the jQuery SlideDown function:
$(this).slideDown({
duration: time
});
Here's a fiddle to demonstrate the effect: http://jsfiddle.net/Complexity/qwV84/
Now, when you open the fiddle and you click the "new items" icon, you see that a menu is rendered (it's slowed down just for showing you). And I do have a problem with the rendering of the menu. The top of the menu is rendered and than it goes to the bottom.
When you have Office 2013 installed open Outlook and click an icon to open a menu there. There the bottom of the menu is rendered just under the icon and then the menu is falling down and the top is being rendered. In fact, it looks like the menu is dropping down from behind an invisble white panel.
I would like to achieve the same effect but I don't know how. Anyone has an idea?

Retain hover style while navigating HTML select element's drop-down menu

I have an HTML select item that changes style when you hover over it. However, in Chrome on Windows, this effect stops when you navigate through the select drop-down menu and off of the original location. (This issue is not apparent in Chrome on a Mac because that uses default colors.) How do I get the select drop-down menu to continue to trigger hover while the user is navigating it?
Here's a fiddle.
This question looks helpful for li drop-down menus, but I couldn't figure out how to apply it to the select element.
try adding this
select:focus{
background-color:green;
color:blue;
}

How to make a full page JS and CSS menu

To be more specific, how do we create a JavaScript menu with CSS styling that occupies the whole page, but the menu bar will be shown. There will be an icon on the top-left. Upon clicking that icon or symbol, the menu should appear and that image should glow. And after cliking it again, the menu goes away. I tried a lot but failed. I am just 14 year old. Please help me.
If there is something like that already which is open source, please post a link so that I can get on it.
UPDATE: I did it own my own.
Try this site here which gives you different menu bars to choose from. all you need to do is download a menu and change the menu details inside the script so that you can change menu names, add more or fewer menu tabs, etc. It uses jquery and contains its own css page which you can manipulate.
In order to hide and show the menu, how about using something like a html tooltip, except for hovering over the button to open/hide the menu, you can set it so that if you click the button, it opens/hide the button ?
Try this its opensource
http://www.interspire.com/content/2005/12/07/building-an-expanding-dhtml-menu-with-css-and-javascript/
http://www.noupe.com/css/13-awesome-java-script-css-menu.html

Categories