I'm trying to make a jQuery drop-down menu, but usable anywhere on my page. I would like it to be dynamic (as each element that contains the trigger class and that it is positioned perfectly). To do this, I need to have a jQuery code that replace my drop-down with the element clicked like this example (at the center of the clicked text): http://prntscr.com/7hw91t on this site: https://www.invisionpower.com/
My HTML code:
<ul>
<li class="more">
More
</li>
<li class="more">
Second Menu
</li>
</ul>
This code is referred to the elements that, when clicked, will open the drop-down: http://prntscr.com/7hwa7m The "drop-down-menu-trigger" is the class that will trigger the opening of the drop-down menu.
This is the drop-down-menu code that is placed at the bottom of my index.php:
<div id="more-drop-down-menu" class="drop-down-menu">
<ul>
<li>
<a class="modal-window-trigger" name="modal-window-faq" id="faq" href="faq.php">Frequently Asked Questions</a>
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</div>
</div>
And my JS code:
(function($)
{
$(".drop-down-menu-trigger").click(function(e)
{
e.preventDefault();
$(".drop-down-menu").css({"visibility": "visible"});
});
})(jQuery);
my CSS:
.drop-down-menu
{
background-color: #FFFFFF;
position: absolute;
top: 188px;
right: 0;
box-shadow: 0 15px 110px rgba(0, 0, 0, 0.2);
border-radius: 3px;
visibility: hidden;
}
.drop-down-menu:before
{
right: 10px;
bottom: 100%;
margin-left: -15px;
border: 15px solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #FFFFFF;
}
.drop-down-menu a
{
display: block;
color: #000000;
padding: 10px;
}
.drop-down-menu a:hover
{
background-color: #F5F5F5;
}
I would like to have help for this, so thanks to those who will try to help me.
Possibly something like this but not tested, you should put or render what you have in jsfiddler so we can see what your after.
(function($)
{
$(".drop-down-menu-trigger").click(function(e)
{
e.preventDefault();
//get location offset css
var leftPos = $(this).offset().left,
topPos = $(this).offset().top;
$(".drop-down-menu").css({
"visibility": "visible",
"left": leftPos,
"top": topPos
});
});
})(jQuery);
Updated Answer :
There was several changes which included CSS and some offset in jquery for getting the carret to the middle off the menu, here is the updated version on fiddler
http://jsfiddle.net/screepts/rh2w16of/2/
here is the screenshot of updated code working with your menu
Related
I have an application with a side-menu built using jQuery-ui. It can be collapsed to show icons only or expanded to also include menu titles.
On mouse hover, the sub-menu pops up, its location adjusted for whether the menu is collapsed or expanded.
The problem is the width of the hover area. It works fine when expanded. When collapsed, the hover area width should match the collapsed menu width. But it is still causing the sub-menu to appear when the mouse hovers over the area where the expanded menu would be.
In the html below, the menu div has a width defined in the style attribute, and I suspect it's the source of my issue. But I have not been able to cause the hover area width to change in coordination with the expand/collapse state of the menu. How can I fix this behavior?
See JSFiddle.
The html:
<div id="main$main_menu$1" class="ui-state-hover ui-corner-all menuBar">
<div id="main$visibility" class="menuContent">
<input type='button' value='4' id='menuVisibility' class="menuToggler ui-state-default ui-corner-all" onclick="runEffect();">
</div>
<div id="main$help_menu$1" class="menuContent" style="background: none; border: none; width: 100px;">
<span class="menuIcon">s</span>
<span class="menu_hideable menuHidden" >Help</span>
<ul class="menu menuDropdown ui-menu ui-widget ui-widget-content" style="width: 79px; display: none;" id="ui-id-121" role="menu" tabindex="0">
<li class="ui-menu-item" id="ui-id-122" tabindex="-1" role="menuitem"><div id="main$help_button$1">Contents</div></li>
<li class="ui-menu-item" id="ui-id-124" tabindex="-1" role="menuitem"><div id="main$help_about_button$1">About</div></li>
</ul></div>
</div>
Some CSS styling:
.menuBar {
padding: 0px;
margin: 0px;
height: 99%;
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
width: 1.3em;
font-size: 24pt;
}
.menuBar-Expanded {
width: auto;
}
.menuDropdown{
margin: -24px 0px 0px 36px;
text-align: left;
z-index:101; /* dropdown on top of main menu */
position:absolute; /* do not displace the main menu items */
}
.menuDropdown-Expanded {
margin: -24px 0px 0px 100px; /* position of pop-ip when menu bar is expanded */
}
.menuContent{
padding: 4px 4px 4px 4px;
}
.menu_hideable {
display: inline;
}
.menuHidden {
display: none;
}
.menuIcon {
font-family: webdings;
font-size: 24pt;
height: 24px;
width: 24px;
vertical-align:middle;
}
.menuToggler {
font-family: webdings;
font-size: 14pt;
width:20px;
height:20px;
}
Javascript functions:
var collapseIcon = '3';
var expandIcon = '4';
function runEffect() {
$(".menu_hideable").toggleClass("menuHidden");
$("div#main\\$main_menu\\$1").toggleClass("menuBar-Expanded");
$(".menuDropdown").toggleClass("menuDropdown-Expanded");
if ($("#menuVisibility").val() == expandIcon) {
$("#menuVisibility").prop('value', collapseIcon);
} else {
$("#menuVisibility").prop('value', expandIcon);
}
};
$(document).ready(function() { var menu = $("#main\\$help_menu\\$1 > ul.menu").menu();
menu.menu('widget').hide();
$('#main\\$help_menu\\$1').hover(function () {
var menubarWidth = $("div#main\\$help_menu\\$1").css("width");
$("div#main\\$help_menu\\$1").addClass("ui-state-active");
menu.menu('widget').show();
$("div#main\\$help_menu\\$1").css("width", menubarWidth);
}, function () {
menu.menu('widget').hide();
$("div#main\\$help_menu\\$1").removeClass("ui-state-active");
});
$(menu).hover(function () {
menu.menu('widget').show();
}, function () {;
menu.menu('widget').hide();
});
});
Ok so the problem is that you set your hover area to width 100px. Put it relative to it's container with width 100% ! Like so https://jsfiddle.net/peurhwam/4/
<div id="main$help_menu$1" class="menuContent" style="background: none; border: none; width: 100%;">
You may have trouble with your padding, soo try to put padding inside instead of in the hover area directly.
EDIT : https://jsfiddle.net/peurhwam/6/
I believe the issue is the selector being used to call the hover function is set to this '#main\$help_menu\$1'. This includes the hidden content and is activated when you hover over it even when it is hidden.
Change the following line:
$('#main\\$help_menu\\$1').hover(function () {
to this:
$('.menuIcon').hover(function () {
I have a short piece of JS which is supposed to show and hide the secondary navigation of a site. If a user clicks Menu Item A it shall show, they click it again and it hides and if Menu Item A is open and they click Menu Item B then it closes A and opens B in its place.
The first part of this works, I can click a single menu item and it will open and close, if however I click a different menu item whilst one is open then it shall close (as expected), open (as expected) and then close again. It's as if the event is being fired twice.
Here is my JS snippet.
$(document).ready(function() {
$('.NavButton').click(function(event) {
handleSecondaryNavigation(event.target.alt);
});
});
function handleSecondaryNavigation(MenuItem) {
if ($('#ul' + MenuItem).is(':visible')) {
// Menu item visible, hide it
$('#SecondaryNavigation').animate({
width: 'toggle'
}, 350, function() {
$('#ul' + MenuItem).hide();
});
} else if ($('#SecondaryNavigation').is(':visible')) {
// Clicked different menu item, hide then show (swap)
$('#SecondaryNavigation').animate({
width: 'toggle'
}, 350, function() {
$('#SecondaryNavigation ul').hide(function() {
handleSecondaryNavigation(MenuItem);
});
});
} else {
// Menu not visible, show it
$('#ul' + MenuItem).show(function() {
$('#SecondaryNavigation').animate({
width: 'toggle'
}, 350);
});
}
}
#MainNavigation {
background: #F1F1F1;
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
}
#MainNavigation .NavButton {
width: 20px;
display: block;
padding: 15px 20px;
cursor: pointer;
}
#SecondaryNavigation {
position: fixed;
top: 0px;
left: 60px;
bottom: 0px;
background: #DADADA;
width: 200px;
display: none;
box-shadow: 2px 0px 5px #686868;
}
#SecondaryNavigation ul {
display: none;
margin: 0px 10px;
}
#SecondaryNavigation ul li {
display: block;
padding: 10px;
border-bottom: 1px solid #CBCBCB;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="MainNavigation">
<img class="NavButton" alt="A" />
<img class="NavButton" alt="B" />
</nav>
<nav id="SecondaryNavigation">
<ul id="ulA">
<li>Lorem</li>
<li>Ipsum</li>
</ul>
<ul id="ulB">
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</nav>
Swapping out the handleSecondaryNavigation(MenuItem) bit and hard coding the action installed of recursively also does not work.
Any ideas? I'm sure it's probably something silly...
Thanks
I have solved your issue and please find the working fiddle
This event listener is triggered twice each time for each ul element
$('#SecondaryNavigation ul').hide(function() {
console.log("hide trug");
handleSecondaryNavigation(MenuItem);
});
change this to
$('#SecondaryNavigation ul').hide(function() {
});
handleSecondaryNavigation(MenuItem);
I have updated the fiddle as well
Hope this helps
I don't seem to understand the Russian Doll philosophy of html and thus, I fail to correctly apply css to the desired container.
Here are two templates I'd like to use simultaneously :
http://tympanus.net/Tutorials/AnimatedBorderMenus/index5.html
http://tympanus.net/Development/SectionSeparators/
And my problem is that the result is this :
First everything seems all right :
Then I click on the hamburger to open the menu :
The problem is that the portion of code which does the border the overlay applies on <nav> and it doesn't seem to affect the <section> but it does affecter the <header> and <footer> (you can't see the later on the screenshots).
Here is the portion of code :
.bt-menu.bt-menu-open {
height: 100%;
border-width: 30px 30px 30px 90px;
background-color: rgba(0,0,0,0.3);
transition: border-width 0.3s, background-color 0.3s;
}
I reached this conclusion by doing this :
And also adding the above css to my sections inline. It did what I would expect by opening the menu.
So, why doesn't it affect my section?
Here is my html if it can prove useful : http://pastebin.com/g7Exx64f
Weave: http://kodeweave.sourceforge.net/editor/#89d761c4072d7ae653f1a8205392074a
I skimmed through the CSS from the pen you linked some have a z-index which means it's stacked above your element.
Plus your container is probably not set to position: fixed; so your content will scroll with you.
In addition you can toggle the display of the social network icons in pure css. You will need an input[type=checkbox] with a unique id. Say #callmenu. Then you need a label[for=callmenu]. For is used trigger the checkbox when clicked.
Say you want to toggle the display of .social. To do this with the checkbox you set what you want the css of .social to be before it's checked.
.social {
visibility: hidden;
}
Then you set what you want it to look like when the checkbox is checked...
#callmenu:checked ~ .social {
visibility: hidden;
}
The snippet below is a simple example of what I believe you'd like to achieve.
You can view this weave which utilizes the pen you linked and font-awesome.
/* Border Menu */
#callmenu {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
}
label[for=callmenu] {
cursor: pointer;
position: fixed;
top: 0;
left: 0;
z-index: 2;
font-size: 2.6752em;
margin: 0.2em 0.7488em;
color: #666;
}
.bgoverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
opacity: .3;
z-index: 1;
}
.icon-menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
background: #3a3a3a;
z-index: 1;
}
.icon-menu ul {
list-style: none;
padding: 2.576em 0;
text-align: center;
}
.icon-menu li {
font-size: 0;
padding: 0;
margin: 0;
}
.icon-menu li a {
color: #999;
padding: 1.12em;
transition: all ease-in 150ms;
}
.icon-menu li a:hover {
color: #cecece;
}
/* When menu is checked */
#callmenu:checked ~ .icon-menu li {
font-size: 1.76em;
margin: 0.768em 0;
}
#callmenu:checked ~ label[for=callmenu] {
color: #d5ebe4;
}
<input type="checkbox" id="callmenu">
<div class="bgoverlay"></div>
<div class="icon-menu">
<ul>
<li>
<a href="javascript:void(0)">
Twitter
</a>
</li>
<li>
<a href="javascript:void(0)">
G+
</a>
</li>
<li>
<a href="javascript:void(0)">
Facebook
</a>
</li>
</ul>
</div>
<label for="callmenu">
menu
</label>
I am creating an advanced administration panel, and I'm playing the part of editing items, I like it when I clicked to edit an item he would fill the entire space of its parent, however I have no idea how to make the element back to its original position with animation, any idea how to do this? I tried this so far:
Here is a pen: http://codepen.io/anon/pen/WvGONp
HTML
<div id="container">
<div class="single-item">
<div class="title">home</div>
<a class="edit" href="#"></a>
</div>
<div class="single-item">
<div class="title">Gallery</div>
<a class="edit" href="#"></a>
</div>
<div class="single-item">
<div class="title">Contact</div>
<a class="edit" href="#"></a>
</div>
</div>
SCSS
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html, body, #container {
height: 100%;
min-height: 100%;
}
#container{
& > .single-item{
position: relative;
background-color: #d9d9d9;
border-radius: 2px;
margin-bottom: 15px;
padding: 15px;
z-index: 1;
& > .edit{
display: block;
position: absolute;
background-color: #000;
top: 15px;
right: 15px;
width: 20px;
height: 20px;
}
&.active{
z-index: 2;
}
}
}
Javascript
$("#container").on("click", ".edit", function(e){
e.preventDefault();
var el = $(this);
var elParent = el.closest(".single-item");
var curElTop = elParent.position().top;
var curElLeft = elParent.position().left;
elParent.toggleClass("active", function(){
elParent.css({
position: "absolute",
top: curElTop,
left: curElLeft
}).animate({
top: 0,
right: 0,
bottom: 0,
left: 0
});
});
});
CSS3 transition will help you create smooth animation for full screen width & height.
But if still for some reason, you want to do it in jQuery, here is the solution :
While clicking second time on the "edit" button, you just have to say :
$("<element_reference>").removeAttr("style");
It will remove the styles what was applied previously, get back the element to its normal view.
Or you can also change the position from "absolute" to "static", both will give you the same result. Refer this question for animating position using jQuery.
Hope it helps.
I've discovered the easiest way to do things like this is:
Put CSS transition properties on the item.
Make a new class that you add onto the item when it's clicked, to make it fullscreen. Take off the class when the item is closed.
CSS transitions tend to be faster and smoother.
I am currently building a layout where I have several 'triggers' inside a <nav><ul><li><a> element - each display a <div> which effectively sits 'behind' (z-index).
I need the divs (#showme and #showmetoo) to stay visible even if the user moves the mouse from the respective trigger (.thetrigger, .thenextrigger) - as the divs will contain content/links.
Additionally, when the user moves from one trigger to the next the displayed div should change.
<header>
<nav>
<ul>
<li><a class="thetrigger">Show Me That Thing</a></li>
<li><a class="thenexttrigger">Show Me That Thing</a></li>
</ul>
</nav>
<div id="showme">Yay, this thing</div>
<div id="showmetoo">and this thing</div>
</header>
CSS
header {
width: 100%;
height: 300px;
position: relative;
background: red;
z-index: 1;
}
nav {
position: absolute;
top: 10px;
left: 30px;
z-index: 3;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
padding: 30px;
}
.thetrigger, .thenexttrigger {
color: white;
}
#showme {
display: none;
background: blue;
color: white;
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 100%;
z-index: 2;
}
#showmetoo {
display: none;
background: green;
color: white;
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 100%;
z-index: 2;
}
jQuery
$(document).ready(function() {
$('.thetrigger').hover(function() {
$('#showme').fadeIn();
}, function() {
$('#showme').fadeOut();
});
$('.thenexttrigger').hover(function() {
$('#showmetoo').fadeIn();
}, function() {
$('#showmetoo').fadeOut();
});
});
http://jsfiddle.net/richardblyth/24bcs/
Demo
It sounds like you want the div to remain until the next trigger is hovered over.
You can use a lot less jQuery if you use a class for the triggers, and find their respective divs using data. With this you can add as many triggers + corresponding divs as you like without having to write more jQuery.
HTML
<header>
<nav>
<ul>
<li><a class="trigger" data-show="pane1">Show Me That Thing</a></li>
<li><a class="trigger" data-show="pane2">Show Me That Thing</a></li>
</ul>
</nav>
<div class="pane" data-show="pane1" id="showme">Yay, this thing</div>
<div class="pane" data-show="pane2" id="showmetoo">and this thing</div>
</header>
jQuery
$(function(){
$('.trigger').on('mouseover', function(){
// show the desired pane and hide its siblings
$('.pane[data-show="' + $(this).data('show') + '"]').fadeIn().siblings('.pane').fadeOut();
});
});
I think what you actually want, if I understand you question, is to hide the other #showme element when you hover into the trigger element associated with the #showmetoo element.
Like this:
$(document).ready(function() {
$('.thetrigger').hover(function() {
$('#showme').fadeIn();
$('#showmetoo').fadeOut();
});
$('.thenexttrigger').hover(function() {
$('#showmetoo').fadeIn();
$('#showme').fadeOut();
});
});
http://jsfiddle.net/4N26S/