jQuery: onclick drop-down menu with controls - javascript

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.

Related

Admin LTE Submenus not remaining open on click

I have incorporated AdminLTE template for my Visual Basic Project. I want the same effect which has been used for the demo:
https://almsaeedstudio.com/themes/AdminLTE/index.html , i.e when you click on sub menu in the Tree view drop down the targeted page open but the Tree view stays open and shows which page is active. Which is not happening in my case, when I click on the sub menu, it takes me to the targeted page, but the Tree view closes automatically.
Please help.
On the menus, the active class set according to the route and you need to put active conditions manually according to each route.

Make menu go away when an item is clicked on mobile/tablet

I have a pretty specific problem which i am hoping someone can guide me in the right direction with.
Here is the website link : http://rimowaedition.com/
When on a tablet or mobile device the menu is condensed into a button. To chose anything on the menu
1. i have to click the button and it brings a drop down list.
2. Click on the page i want to go to.
3. click the menu button to close the drop down list or else it takes up the whole screen and i cannot see the page in the back.
Here is a screenshot of how it is: http://imgur.com/aV7RHwb
Is there any way to make it so that when i click an item in the drop down it automatically closes the menu and goes to that page.
Any guidlines or clues as to how i would go about doing this would be much appreciated since as of now i am pulling my hair out .
You can set a click event on any item in the menu lists that you click.
So...
If you're using jQuery
$('list-item').click(function() {
//Remove the class that causes the menu to be open
//Perform any actions that you need after the button is clicked
//such as loading another page
});
This can also be done in vanilla javascript. Just search up click events in javascript.
Use JavaScript Use JavaScript on the click event of any of the
> <a href>'s
in the menu to hide the menu.
on the click event of any of the
> <a href>'s
in the menu to hide the meUse JavaScript on the click event of any of the
> <a href>'s
in the menu to hide the menu.
nu.

Tabbed menu in CSS and Javascript - tab sets to active after refreshing page

I have tabbed menu written mainly in HTML and CSS. There are 5 tabs, the first one is set to active when we first load the page. I had to add little JS script, because that active tab wouldn't change its look to "not-active" when we clicked on another tab (so we had two tabs with "active" look). Everything works fine, but if we click on, let's say, 3rd tab and then refresh website, the first tab changes its look from "not-active" to "active", so there are two tabs with "active" look. Only the styling is wrong, content in the tabs views the right content... So if we click on another tab and refresh the page, we have two tabs with "active" look, but the website still views the content from the right tab. I don't want the first tab to set its look to "active" after refreshing page. I don't know JS and I don't know how to fix it.
Javascript:
jQuery(function($){
$(".tabmenu").children("div").click(function(){
$(".current").removeClass("current");
});
});
Here's the full code: http://jsfiddle.net/y5SzQ/1/
The simplest solution
$(".tabmenu").children("div").click(function () {
$(".current").removeClass("current");
})
.filter(location.hash).click();
(to test: change tab, right click Reload resule frame)
Demo: http://jsfiddle.net/y5SzQ/3/
What it does is just triggers click event similarly to what happens when user clicks with a mouse. If there is location.hash (say '#french-tab') and tab other then Polish has to be selected, then .filter(location.hash) will become for example .filter('#french-tab') and corresponding tab will be selected.

Replace superfish hover event with click event

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.

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