Currently I'm recreating the Office 2013 ribbon in Html, css and javascript.
This is my first approach so don't judge me on css/html/js code.
Currently the ribbon is working with a dropdown but I have an issue.
The dropdown is showed when you click the corresponding icons, but I don't know how to hide it if I click anywhere in the document.
I can probably come up with a solution, but I'm not too sure that it will be a good approach.
Can someone have a look and given me a good solution to accomplish this?
I've created a fiddle here: http://jsfiddle.net/Complexity/mwCCt/
Here's the code to open it:
$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
if ($(this).hasClass("menu")) {
var element = $(this);
$('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());
// Add a click event to the element that contains a menu.
$(this).parent().click(function() {
$(element).toggle();
$(element).parent().addClass("active");
});
}
});
Just click the "New items" button on the ribbon (second one) and then the dropdown menu will open.
Thanks in advance.
Kevin
We can take advantage of the stopPropagation() function:
$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
if ($(this).hasClass("menu")) {
var element = $(this);
$('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());
// Add a click event to the element that contains a menu.
$(this).parent().click(function(e) {
// Stops click event from bubbling up to $(document)
e.stopPropagation();
// Do stuff
$(element).toggle().parent().addClass("active");
});
}
});
// Bind click event to document, to hide any .menu elements that are open
$(document).click(function() {
$('.menu').hide();
});
});
p/s: You should take advantage of chaining, so I combined the two lines referencing $(element) into a single one :) that is one of the most powerful features of jQuery, so go crazy :D
Update: OP asked to also detect click events within the menu item itself. This entails storing the toggle state somewhere, which I have chosen to use the data object for, and sniffing the toggle state on click before deciding to open/close the menu (and perform other actions, such as adding/removing class from parents):
$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
if ($(this).hasClass("menu")) {
var element = $(this);
$('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());
// Add a click event to the element that contains a menu.
$(this).parent().click(function(e) {
e.stopPropagation();
// Check toggle state
if(!$(this).data('state') || $(this).data('state') == 0) {
// If menu is closed, show it
$(element).show().parent().addClass('active');
// Update state
$(this).data('state', 1);
} else if ($(this).data('state') == 1) {
// If menu is already open, close it
$(element).hide().parent().removeClass('active');
// Update state
$(this).data('state', 0);
}
});
}
});
$(document).click(function() {
$('.menu').each(function() {
$(this).hide().parent().data('state', 0).removeClass('active');
});
});
See updated fiddle here: http://jsfiddle.net/teddyrised/mwCCt/5/
Bind a click event on the document, check that the target of the click is not the icons, then hide the element as needed
jQuery(document).on("click",function(e){
if( !jQuery(e.target).hasClass("icon") ) {
//hide ribbon code here
}
});
Add a event listener when you show it that is basically
$(document).on('click', function(){
//hide dropdown
});
You will want to destroy this event listener after you hide
without being tested... something like this
$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
if ($(this).hasClass("menu")) {
var element = $(this);
$('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());
// Add a click event to the element that contains a menu.
$(this).parent().click(function() {
$(element).toggle();
var dd = $(element).parent();
dd.addClass("active");
hideDD = function(){
dd.removeClass('active');
$(document).removeEventListener('click',hideDD);
};
$(document).addEventListener('click',hideDD);
});
}
});
Simply write the relevant code in the focus-out event of the element
Related
I'm trying to build a tricky navigation menu that needs to do the following:
When click in a nav item, .active class should be added to that item and removed from the previous one.
When one dropdown is open and you click to open another one the previous one should close and the new one should open in one click.
When click in a nav item it should open its respective dropdown container (at the moment it opens every dropdowns at once.)
and it should add .black-bg class to main-container underneath it.
When click anywhere outside the dropdown its active class .active should be removed as well as the class .black-bg in main-container underneath it.
JS
$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
$(this).toggleClass("active");
$(".showup").slideToggle(200);
$(".main-container").toggleClass("black-bg");
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function() {
$(".showup").slideUp(50);
});
This is what I came up with so far:
SEE DEMO
See demo here
I hope the above makes sense and someone could help me as I'm really stuck with this nav.
Thank you so much!
I recommend not using jQuery for this because of the exact issues you're running into. Try using Vue or Preact
However, if you insist on using jQuery, your click function should select the item that has "active", and modify it and its siblings accordingly.
https://codepen.io/anon/pen/aGwdXO
$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
if ($(this).hasClass("active")) {
return;
}
$(".active").parent().find(".showup").slideToggle(200);
$(".active").toggleClass("active");
$(this).toggleClass("active");
$(this).parent().find(".showup").slideToggle(200);
if (!$(".main-container").hasClass("black-bg")) {
$(".main-container").toggleClass("black-bg");
}
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function() {
$(".active").parent().find(".showup").slideUp(50);
$(".active").toggleClass("active");
if ($(".main-container").hasClass("black-bg")) {
$(".main-container").toggleClass("black-bg");
}
});
Check this. Just add class showup1, showup2, etc and data-showup="1", data-showup="2" attr in each menu item. (Working in nav items 1 and 2).
$(".click").on("click", function(evt) {
evt.stopPropagation();
var showup = $(this).data('showup');
if(!$(this).hasClass('active')){
$('.active').removeClass('active');
$(this).addClass("active");
$(".showup").hide();
$(".showup"+showup).slideToggle(200);
$(".main-container").addClass("black-bg");
});
Run
I'm having a bit of trouble with a dropdown menu that triggers fadeOut as soon as the mouse leaves the grandparent div, I've searched this problem to death and have yet to find an elegant solution. Here is my code : link
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function(){
$('ul li ul').fadeOut('400');
});
}
$(document).ready(main);
DEMO: MY FIDDLE
You need to specify what element(s) you are trying to attach the event to. By adding '>' youre forcing to only attach the event to that element's children. Try this:
var main = function() {
$('nav').mouseenter(function() {
$(this).find('ul').fadeIn('400');
});
$('nav>ul>li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
FIDDLE
$(this).find('ul').fadeOut('400');
is correct as $('ul>li>ul').fadeOut('400'); Could not target specific (current) li.
Use following hierarchical flow of TAGS
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
So I've got it to work that it shows/hides the UL's/LI's, but I'm not sure what I'm doing incorrectly where it's not swapping out the +/- signs?
Here's my JS:
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).children('ul').slideToggle();
}
$(this).children("li.menu-item-has-children").text(this.toggle ? "-" : "+");
return false;
});
I have a class setup to append the li with a li:before that add the + sign before the li that has the nested ul's. But I'm not sure if I am going about it the right way to swap out the signs.
Here's the fiddle that I made:
http://jsfiddle.net/bc4mg13a/
There you go: http://jsfiddle.net/bc4mg13a/13/
$(".menu-item-has-children").on("click", function(e){
e.stopPropagation();
var clickedLi = $(this);
$("> ul", clickedLi).slideToggle();
clickedLi.toggleClass("current");
});
To start with, your first js line is a has so much redundant stuff.
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click
could be:
$(".top ul li:not(.current)").find("ul").hide().end() // Hide all other ULs
.click
On the other hand, i changed your code slightly, simplified your selectors. On each li click, i select direct ul children, and the i slidetoggle + toggle class the 'current' class.
i also switch the plus sign via the current class on css.
Your code feels incredibly verbose. Well, at least your js. Here's a fiddle of your code that I modified a little bit.
Instead of hiding all your menus with js immediately on pageload, I applied a CSS display: none; to the sub-menu class:
.sub-menu {
display: none;
}
The js is cleaned up a bit, and since the click handler is bound to .menu-item-has-children, You're really only clicking on that to reveal the contained UL.
Give it a look. Hope it helps :)
Simply add:
$(this).toggleClass('open');
To this:
if (this == e.target) {
$(this).children('ul').slideToggle();
$(this).toggleClass('open'); // <--
}
you can just add $(this).toggleClass('open'); before you return false but I would strongly look more into what your code is doing. I'm not so sure the line before is doing anything.
Fixed JS:
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).children('ul').slideToggle();
$(this).toggleClass('open'); // added
}
return false;
});
Just added "$(this).toggleClass('open');" to use the class you specified in your CSS instead of trying to manipulate the text manually.
you can do it like this and add $(this).toggleClass('open');
http://jsfiddle.net/bc4mg13a/5/
For how you have it set up, I would try...
$(".top ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
.click(function (e) {
if (this == e.target) {
$(this).toggleClass("open");
$(this).children('ul').slideToggle();
}
return false;
});
Additional:
For formatting, you might want to do something like:
.menu-item-has-children {
&:before {
content:"+ ";
color: $white;
width: 10px;
display:inline-block;
}
}
.open {
&:before {
content:"- ";
color: $white;
width: 10px;
display:inline-block;
}
}
You don't need to use text(this.toggle ? "-" : "+");
Inside the condition, just toggle the class .open that you have already defined in your SCSS/CSS.
Like so -
$(this).toggleClass('open');
JSFiddle
can you please tell me how to get alert of id when user click of submenu.
Actually I am adding submenu of button click with id"menu_tc_1","menu_tc_2".I want to click of submenu ? and show alert ?
http://jsfiddle.net/eHded/1553/
$(document).on('click',".menuClick",function(){
alert('jii'+this.id)
})
You need to listen to clicks on the menu elements, not the entire menu.
$(document).on('click',".menuClick a",function(e){
alert('jii'+$(this).parent().prop('id'))
})
You click on the a so find it's parent's id
http://jsfiddle.net/eHded/1565/
Try this:
$(document).on('click', ".menuClick ul li > a", function () {
alert('jii' + $(this).parent().attr('id'));
});
Assuming you want the child elements that are added to the menu when you click the add button.
Edit: to add a selected class to the parent li element:
$(document).on('click', ".menuClick ul li > a", function () {
$(this).parent().addClass('selected');
});
Try this instead
$(document).on('click',".menuClick li",function(e){
alert('jii'+this.id)
$(".menuClick li").removeClass("active");
$(this).addClass("active");
e.stopPropagation();
})
This will solve your issue.
Demo
I have an id #navigation li a and a class .menu-description . I want to change class from .menu-description to .menu-descriptionnew whenever user hovers on #navigation li a
My jquery so far:
<script>
$(document).ready(function() {
$('#navigation li a').onmouseover(function() {
//Check if element with class exists, if so change it to new
if ($('div.menu-description').length != 0)
$('div.menu-description').removeClass('menu-description').addClass('menu-descriptionnew');
//Check if element with class 'menu-descriptionnew' exists, if so change it to 'menu-description'
else if ($('div.menu-descriptionnew').length != 0)
$('div.menu-descriptionnew').removeClass('menu-descriptionnew').addClass('menu-description');
});
});
</script>
But it's not working. Any suggestions? Thanks!
The jQuery event is "mouseover" not "onmouseover"
You could clean up your code a lot with the use of .toggleClass() method and the .hover() event
Here's a simple example