"touch and feel" at custom HTML drop down menu - javascript

I made a custom drop down menu on a HTML page + JavaScript. I want that menu to act as following:
When the button "Freunde" gets clicked, the drop down menu appears
When the button gets clicked again, the drop down menu disappears
When the mouse curor leaves the "area" of button + drop down menu, it disappears
The drop down menu consists of a main div with multiple divs in it (the "menu items").
My first approach was to put a onmouseout() on the main div of the drop down menu, but there is following problem: As soon as I hover over an inner div, the onmouseout() is true, and since the inner divs fill the entire main div, the drop down menu is visible only as long as the user doesn't hover over it.
So I tried it to solve similiarly like a JQuery lightbox, namely to put a "background" div over the whole screen and paste the drop down menu in there, and set the onmouseover() there. That would be almost perfect, but the "Freunde" button is also affected from that.
So is there any way to combine an event from different elements? Like
if(cursor is not over Button && cursor is not over DDMenu) set invisible
I marked the desired are in following image

Assuming you're set up as
<ul>
<li></li>
<li></li>
</ul>
You could set up your CSS like this:
#nav ul li ul { display: none; }
#nav ul li.active:hover ul { display: block; }
And then set up your JS like this:
var menuClick = function() {
$(this).toggleClass('active');
menuHover();
};
var menuHover = function() {
$('#nav li.active').hover(function() {
}, function() {
$(this).removeClass('active');
});
});
$('#nav > ul > li').on('click', menuClick);
Granted, this is absolutely gross coding, but I think it should work. (this also assumes you're using the jQuery library).

Related

Keep sub menu open on mouse out if sub option clicked/selected

Having a side menu with parent and child options which used to display the content on the right main div if any of the child options are selected. Parent options will be shown on page load and
when the mouse hovers on the parent, child options are displayed, and when the mouse out the child options are hiding.
Now I wanted to keep the child options(submenu) expanded of that particular parent on mouse out also if the child option is selected/clicked and it should be hidden when other parent-child options are selected.
Below is the CSS property
# parent
ul li: hover li{
display : block;
}
# child
ul li ul li a : hover{
background-color - red;
border-radious: 25px;
color : red;
}
Keep submenu open on mouse out, already tried this.
Passing a class (e.g. selected/active) to the parent, if the child option is selected/clicked, and using that class to make the child 'display block important' might help you in this situation.
Try this.
CODE
//JS
$('.child-option').on('click', function() {
$('.child-option').parents('.parent').removeClass('selected');
$(this).parents('.parent').addClass('selected');
});
//CSS
.parent.selected li {
display: block!important;
}
I have changed mouseover event to a mouse-click event, and then by using jquery I fulfilled my requirement.
$(document).ready(function(e){
#To prevent action on child click
if(e.target !==e.currentTarget)
return ;
$("li.parent").children().addClass("dropdown")
});

Gmail-like Sign out

I have a Gmail-like Signout mechanism, such that when you hover on the username (on the top right), it slides down a menu that includes a "sign out" link. The username is on a floated list, while the menu that slides out is on an inner list (not floated). The sliding out/in is performed using jQuery.
This is what it's supposed to do:
The inner menu slides down (becomes visible) when username is hovered on;
if the mouse goes to the inner menu, the inner menu should remain visible;
if the mouse hovers elsewhere, the inner menu should slide back up (becomes invisible).
This is what it currently does:
The inner menu slides down when the username is hovered on;
when the cursor is off the username, the menu slides up - regardless of where the cursor is.
Perceived solution: I believe there should be an if clause somewhere that checks if the cursor is on the inner list and keep the inner list open, and that's the part that gets me stumped.
EDIT: Here is the current code:
HTML:
<ul id="user_spot">
<li><span class="username">username
<ul id="user_spot_links">
<li>Sign Out</li> <br />
</ul>
</li>
</ul>
CSS:
ul#user_spot li {
float:left;
position:relative;
}
ul#user_spot_links {
position:absolute;
top:20px;
display:none;
}
ul#user_spot_links li {
float:none;
clear:both;
}
JS:
$('ul#user_spot li a').hover(function() {
$('ul#user_spot_links').slideDown('slow');
return false;
}, function() {
// this is where I believe the needed code should be"
$('ul#user_spot_links').slideUp('slow');
});
You don't need JS for that.
Check this fiddle: http://jsfiddle.net/PaKnc/
Basically the UL that slides down is a child of the LI you hover over. You can manipulate the CSS properties of a child in CSS.
For example:
#parent #child {
style1;
}
#parent:hover #child {
style2;
}
Here, style1 and style2 can be totally different. In our case we take advantage of this by altering the display property.
The problem is that when you need to exit the username anchor to hover over the dropdown. The simple solution is to just change the hover selector to be the li instead of the a. Then, you will not exit it even while you remain hovered over the dropdown.

Hide a css-made dropdown menu

I have created a dropdown menu with css. Here is the HTML code:
<li class="menu" id="menu">
<div class="dropdown">
<div class="col1"> ...
here is the css:
.dropdown {
visibility:hidden;
/*...*/
}
#menu li:hover .dropdown{
visibility:visible;
}
This works perfectly. In jQuery I handle the click event for the links in this menu and I want to use jQuery to hide the dropdown whenever the user clicks on a link so it goes away.
I tried these both (note: I haven't used these together.):
$('.dropdown').css('visibility', 'hidden'); //didn't work
$('.dropdown').hide(); //didn't work either
they both hide the menu but the problem is when they hide it, I don't get the menu again whenever I hover the mouse over the item.
You have to define what happens when the mouse is hovering the button and what happens when it's not. Something like this:
jQuery(document).ready(function(){
jQuery(".dropdown").hover(function() {
/* hovering actions */
}, function() {
/* non-hovering functions */
});
});
That's because jQuery's hide() method uses the rule "display:none" over that elemenent, in this case ".dropdown", to hide it, therefore, by definition, the "visibility" can't work on an element that has the rule "display:none" assigned to it.
Use jQuery to make the dropdown effect instead of a bunch of CSS rules.
Okay, what is actually happening is when you you set $('.dropdown').css('visibility', 'hidden'); on the element, it adds this to the style attribute of the element, inline (you can check this with Firebug). So the CSS
#menu li:hover .dropdown{
visibility:visible;
}
doesn't have any effect because inline styles take precedence. .dropdown elements will always be set as hidden now.

Hide Div When Clicked

I've got a little HTML/CSS/JQuery drop down menu working. My pseudo code for it is:
function closeMenus() {
$('.subMenu').css('display', 'none');
}
#mainMenu ul li .subMenu {
display: none;
position: absolute;
}
#mainMenu ul li:hover .subMenu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
<ul>
<li>
Menu Header
<div class="subMenu" onClick="closeMenus();">Menu Content</div>
</li>
</ul>
</div>
The CSS works so when someone hovers over Menu Header, the subMenu appears below it and disappears when the mouse leaves the menu. My problem comes when a user clicks an item in the menu; I'd like to hide the menu. The JavaScript hides the menu fine but when the user mouses over the menu header again, it doesn't reappear. It appears that CSS won't override the JavaScript display property. Most, if not all, of the links won't be going to other pages, just calling more JavaScript.
Anyone have any ideas how to hide the sub menu on click so that it will be again visible, or do I need more Javascript to show the menu every time someone hovers?
Use JQuery more fully -- look into the .toggle() command and bind it via click:
$('.subMenu').click(function() {$(this).toggle();});
Then you can eliminate most of your other code.
You're trying to do half of it with CSS and half of it with jQuery. Just do it all with jQuery: http://jsfiddle.net/hw5qr/
$('.subMenu').click(function() {
$(this).hide();
});
$('#mainMenu').hover(function() {
$(this).find('.subMenu').show();
}, function() {
$(this).find('.subMenu').hide();
});
Stryle attribute has highest priority.
$('.ftpBrowseSubMenu').css('display','none');
make
<div style="display:none">
, so rule
#mainMenu ul li:hover
has lower priority against style attribute. So, you have to do everything with javascript.
Like you already said are element styles stronger than css styles (unless you use !important). So you have to to do everything with Javascript what shouldn't be to hard. You have just to register two more event listener: onmouseover and onmouseout. With them you can set the display property to the correct value and it will work this way.

Accessibility of JavaScript drop down menu

I have implemented my own drop down menu and wanted to clarify the accessibility implication of my solution:
http://jsfiddle.net/tpHcv/5/
The piece of code i am interested in for now is:
$('#sub-nav > li ul').each(function(index){
var $this = $(this),
index = index + 1;
$this
.clone()
.appendTo('#main-nav > li:eq(' + index + ')');
});
'sub-nav' is hiddden from everyone via CSS to start. Then it is appended to the relevant 'main-nav' li. Will this approach prevent people using assistive technology from getting to the sub menu items?
Please don't aks why i have done it this way. Suffice to say i have no access to the original markup of the project so cannot just append the sub-menu to the markup in the way that i would like.
For greater accessibility, consider adding keyboard support. When a link has the focus (via tab or whatever), make sure its subnav is visible. Similarly, when a subnav link has focus, make sure it is visible. Some of that you can do with css via :focus.
It's unfortunate you don't have access to the markup. Is there a reason you need to clone the <ul>, or is it ok to just move the original element? Do your dom manipulation with script, but do the show/hide with css via the :hover pseudo-class.
This gets you part of the way there: http://jsfiddle.net/tpHcv/9/ You'll still need some JavaScript to manage tabs and focus on the sub-items.
#main-nav li > ul
{
display: none;
}
#main-nav > li a:focus + ul,
#main-nav > li:hover > ul
{
display:block;
}
Will your #main-nav links go anywhere or are they just for triggering the sub navigation? If they don't go anywhere, to support browsers with JavaScript disabled, consider hiding #main-nav initially with css, and then show it with JavaScript. This way it isn't displayed unless the links will actually do something.

Categories