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?
Related
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.
I'm still very inexperienced in jQuery but trying to tackle this issue. I have a hamburger menu that opens and closes when clicked. However, I added CSS to the hamburger menu to expand to 100vh when open. This worked fine, however, the content in the background still scrolls behind the menu. I found CSS that locks the body in place via an overflow: hidden styling to the "HTML, body" class and lets me open and close the menu without the background scrolling, but with that CSS styling constantly in place, I cannot scroll at all even when the menu is closed.
This brings me to my question. I believe I found one of the scripts that open and closes the hamburger menu. Would it be possible to modify and add to this script so that it adds the above style to the "HTML, body" class only when the menu is open?
I went through W3 Schools to get a better understanding of the syntax, but this script is a little different than what I saw in the tutorials.
Here is the script:
function() {
return e(".mobile_nav.opened .mobile_menu_bar").not(e(this)).trigger("click"), s.hasClass("closed") ? (s.removeClass("closed").addClass("opened"), n.stop().slideDown(500)) : (s.removeClass("opened").addClass("closed"), n.stop().slideUp(500)), !1
}
Is this a possible solution or is there a better option for me to prevent the background scroll? I would share the link but I have to have it hidden an under-construction page.
Here is a screen shot of what I am seeing on my end.
I have used superfish module for more style of my site. It is working fine but I want to remove the mouseover effect from main menu link.
I want to just display the child menu link after clicking the main menu.
My site link is http://devel.studiesweekly.com
when you hover the mouse in main red button menu link it is showing immidiately the child menu bar bellow. I want to show only after click the main menus.
How can I do this? I have used drupal 7.x
You can change the event from the superfish library from hover to click.
Replace your current superfish library code with the code provided in this answer.
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
I am developing an HTML based android app.
I need to implement option menu like the native android menu on long screen tap.
I thought to use invisible elements (positioned out of the viewable area), and cause showing the list by firing the click event.
Not working...
Any workaround?