Customize jQuery submenu positioning - javascript

I am trying to create a horizontal menu that has at least two levels of submenus. All submenus are vertical.
Submenu1 will be directly below its parent.
All subsequent submenu levels (2+) should be to the right of its parent.
I am just starting to learn how to use jQuery menu, and they don't seem to have a customization for this. I am not sure how to approach this... I tried and failed to call .menu() on $("#myMenu .level1").
My question is - I would much appreciate if someone can point me in the right direction on how to make the menu as I have stated above.
Javascript snippet
<script>
$(function() {
$("#myMenu").menu({
position: {
my: "left top",
at: "left bottom"
}
});
});
</script>
HTML snippet
<ui id="myMenu">
<li class="level1">
Item 1
<ul>
<li class="level2">
Item 1
<ul>
<li class="level3">
Item 1
</li>
</ul>
</li>
</ul>
</li>
Update: JSbin

Hi finally i have an answer for your question. Using some properties of the menu like blur and focus. I found this page that already has the solution http://forum.jquery.com/topic/how-to-make-the-perfect-horizontal-menu. I studied those lines and applied it in your code. If you have any question about the functionality feel free to ask.
Review the new code here http://jsbin.com/uxuTAba/5/.

Psuedocode:
On mouseover of Menu Item, slidedown List (positioned right under Menu Item)
On mouseover of List Element, slidedown List Element X's Submenu (positioned to the right of X)
Basically what I am saying is, to position your menus with CSS and then use slideDown() and slideUp() to display them dynamically. So the menus positioning does not need to be determined with the jQuery at all -- just the display status of sliding them up/down. But they're all positioned relative to the menu, with your base CSS.

Related

gsap menu to scroll to elements only moves down as expected, not up

I've got a page using gsap to animate scrolling.
To navigate, the menu is setup with a simple "scroll to ID" approach which is intercepted by gsap to do the scrolling.
This works as expected to scroll down the page, but not up the page. However if you've scrolled down the page, selecting the element above from the menu doesn't scroll up. But selecting an element 2 up from the current one, then scrolls up 1 element.
An example of the code;
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
</ul>
</nav>
<section id="section1" class="panel">
</section>
gsap.utils.toArray("nav a").forEach(function(a) {
a.addEventListener("click", function(e) {
e.preventDefault();
gsap.to(window, {duration: 1, scrollTo: e.target.getAttribute("href")});
});
});
A demo is here on codepen
This is a logical issue. Once you've scrolled past a section, the element has been moved down by 100vh. So when you navigate to its y offset, it's 100vh below where it was at the start.
There are different ways to fix it. The easiest may be to keep an array of values of the original offset and scrollTo those values instead. Demo.
Sides notes:
You can just use the selector strings as your targets in GSAP when you don't need it scoped further.
You should use a double colon (::) for pseudo-elements in CSS.
If you're going to use ES6 features like const some places, you might as well use them throughout your code.
You're more likely to get help even quicker in the GreenSock forums.

Showing a submenu on hover of the parent link, then keeping it visible until the mouse leaves the sub menu?

I have a menu arranged like this:
<ul class="parent-menu">
<li class="menu-item">
<a class="menu-item-link" href="#">Link</a>
<ul class="sub-menu">
<!-- sub menu list items -->
</ul>
</li>
<!-- more parent menu list items -->
</ul>
The .sub-menu elements are hidden by default.
I'm using the following jQuery to show/hide the submenus perfectly fine:
$('.menu-item > a').hover(function() {
$(this).find('.sub-menu').toggle();
})
Of course, they disappear as soon as the mouse leaves the .menu-item > a element. I can't figure out a way to "handoff" the second half of the .toggle() event to work as basically a .mouseleave() on the entire .sub-menu element.
So when a user hovers on a parent menu item, they are presented with a sub menu, and should be able to hover at their leisure and select a sub menu item.
How would I go about this?
Figured it out actually. I was overcomplicating things by using .hover() and found that I could simply use mouseenter() and mouseleave() separately, but using the latter on the parent element of both the main menu item and its submenu. So when your mouse enters the parent menu item link, it shows its sub menu (I have multiple, so I had to use $(this) and find() or siblings() instead of hardcoding it). And when the mouse leaves the parent of both (so either the main link or the sub menu itself) it becomes hidden, as it should be.
Here's the code:
$('.menu-item > a').mouseenter(function() {
$(this).siblings('.sub-menu').show();
});
$('.menu-item').mouseleave(function() {
$(this).find('.sub-menu').hide();
});
display = false;
$('.sub-menu').toggle( display );
$('.parent-menu').mouseenter(function() {
$('.sub-menu').toggle("slow");
});
$('.parent-menu').mouseleave(function() {
$('.sub-menu').toggle("slow");
});
Not sure if you wanted each one to separately or together. This will open them all.

Showing an image only within a certain area

I have a simple menu in an unordered list:
<ul class="courses">
<a href="#">
<li class="spinny">
<h3>Course Title</h3>
<img class="rotateme" src="images/logo_transparent.png"/>
</li>
</a>
</ul>
When the user hovers over the li item, the background changes colour and the img is displayed using a simple jQuery .toggle function:
$(".spinny").hover(function(){
$(".rotateme").toggle("fast");
});
The image is also spinning thanks to some CSS3 animation, hence the class name rotateme, but I don't think that matters.
My problem is that the image is displayed on top of everything else, whereas I'd like to only show it within the bounds of the li item (as if it was a background-image essentially). How can I do this?
Also, how can I scale this up to multiple list items?
EDIT: Rough JSFiddle example here. As you can see, the whole circle is shown. I just want to show it where it lies inside the grey box.
.spinny { overflow: hidden; }
Is your easiest solution. Other than that, you'd have to set an appropriate size on the image so that it isn't bigger than the list item.
In response to your comment:
$(".spinny").hover(function(){
$(this).find(".rotateme").toggle("fast");
});

jquery toggle and smooth scroll clashing on same page

I am using jquery toggle plugin along with the smoothscroll plugin on a single page website. now, the problem is that the hidden text in the toggle function is not allowing the smoothscroll jquery to function properly. suppose we click 'item a' in the nav option and it is supposed to scroll to the 'item a' section div in a smooth manner, it does so haphazardly and also takes into account the height of the hidden text in toggle function which is about 100px. Hence, there is neither a smooth scroll but also a difference of 100px of the desired result.
For reference, i am using html5 and have 4 sections on the page, as provided in code below.
Here is the code for toggle function:
`$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).toggleClass("active").next(".togglebox").slideToggle("slow");
return true;
});
});`
here is the code for navigation menu (supposed to scroll on the same page):
<nav>
<ul>
<li>Home</li>
<li>Our Works</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
i am using the smoothscroll plugin located at:http://css-tricks.com/snippets/jquery/smooth-scrolling/
can someone please guide me why these 2 jquery are clashing.
PS: i am also using a jquery slideshow, but that has no effect as far as i can tell, coz i removed that, and nothing changed.
It's difficult to tell based on what you've posted, but using the .hide() method, which is comparable to setting the CSS property to display: none, could cause the browser to incorrectly calculate height. I would try setting visibility: hidden , and then when active visibility: visible.

Wordpress Admin-Like Menu

Can anyone provide me with a link to a tutorial or plugin, preferably in jQuery that will allow me to create a menu that not only collapses vertically (jQueryUI's Accordian), but also collapses horizontally? No matter what I google, all I can find are the vertical ones, and the Wordpress one is super-integrated to its core, as far as I can tell.
EDIT: Here are some screenshots. The first is normal, the second is expanded / collapsed vertically, the third is collapsed horizontally.
Try jQuery UI i think thats what WP uses
http://jqueryui.com/
You can use a plugin like Accordion or Collapsible Menu (a bit more wordpress like) for the vertical collapse, and then put that menu in a div that can collapse horizontally with a plugin like TabSlideOut. Or just change the width of the menu DIV with .animate().
Also notice how the wordpress removes the text from the menus but leaves the icons.
html
<div class="hide-menu">Hide Menu</div>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>
<ul class="subs"><li>Subs</li></ul>
</li>
</ul>
jQuery
$('.hide-menu').bind('click',function (){
$('#menu').animate({width:30});//can always extend this.
//u can use the if statement or toggle if u need toggling feature
});
$('#menu').children('li').bind('click',function (){
//here u can hide the subs
})
now ofcourse the above is not going to work exactly like wordpress or may not work at all but you get the idea :) I hope
I will toggle a class, as you can see there is an arrow that toggles horizontaly. So, just add or remove class and with CSS make the effect done, like this:
$(mi-button).click(function(e){
$(mi-menu-selector).toggleClass(your-class);
e.preventDefault;
});
with Css show or hide the text of each li of your menu.
.hide-horizontal{
text-indent:-999em;
}
You need to use responsive design to achieve this.
You can use CSS media queries:
http://en.wikipedia.org/wiki/Responsive_Web_Design
http://mediaqueri.es/

Categories