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
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'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?
I wish to create a menu (a sign-up menu), see this to get an idea of it. When user clicks on this button/link a drop-down menu appears, using which he can do something (here login).
The behaviour of the link should be the following:
The drop-down menu should appear when clicked on this button/link.
when clicked anywhere on the page (including the button/link itself), but outside the menu, the menu should disappear.
If clicked somewhere on the drop-down menu, the menu should not disappear.
All the controls in the drop-down menu should work.
I did somehow managed to get first three working, but then the controls within the drop-down menu (4th behaviour) are not working.
The javascript/jQuery code along with html code is given here (jsfiddle link, same as above). You can fork it and make changes.
Thanks.
check this
http://thefinishedbox.com/files/freebies/loginfreebie/index.html
Download tha code
http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/
I made a fork of what you have on your jsFiddle: http://jsfiddle.net/DukyJ/
If you look at the code I just added an extra div to have the page's content so I don't have to assign click events to the whole body just only to that div.
Then, I removed the return false and the stopProppagation and just added a '#' to the link in the href because it wasn't necesary.
And finally just added some style to the signin link and the singin panel so you can see that the menu appears over the content as I suppose you want it to appear.
I'm creating a firefox add-on, and I have a situation where if someone clicks on a specific item in my toolbarbutton menupopup, I want to display some text to appear beside the mouse for a couple seconds. I don't mean mouseover text, because when they click on the item, then I close the menupopup. I mean something like what's shown at this site:
http://www.kingsquare.nl/cursormessage
The normal way of doing this would be with javascript and a div that would have the text I want to show. Unfortunately, I've discovered that the toolbarbutton can't have an effect on the main window, which is where I'd need to place the div to show. I've tried getting Jquery to work and haven't been successful either.
You can use panels together with openPopup() and hidePopup(). Remember to set the attribute noautohide to true on the panel.
More info on panels - https://developer.mozilla.org/en/XUL/panel