I have a jQuery menu widget which contains a single root entry and several sub entries. I want it to behave as follows:
It shouldn't open on hover but on click
It shouldn't open to the side but upwards
How can I achieve this?
$("#menu").menu({ trigger: "click" });
That will change the event that triggers the menu from "hover" to "click"
I am assuming by "It shouldn't open to the side by upwards" you mean the sub menu should appear below the selected main menu option, expanding the height of the main menu. However, this is an assumption; If you could clarify your requirements I will come back and edit my answer.
Instead of hover event you would use click event. And most of the time direction of the sub menus or menu item contents is defined with absolute position so in your case you would define the position in a way where you would define a top negative position, where value would be the height of your hidden content.
Hope it helps.
Related
I am trying to build a MEGA MENU using jquery and css using the following code:
$(".sub-menu").find('a.amenu').hover(function(){
$(this).parent().find(".sub-menu-panel").show();
}
,function(){
$(this).parent().find(".sub-menu-panel").hide();
}
);
where the menu links has a class called "sub-menu" and the panel related to it has a class called "sub-menu-panel".
How to keep the related panel of a menu link visible if the mouse hover it ?
my problem is when i move the mouse over a panel to click any sub-link on it the panel it self disapeared because the mouse out event fired when i leave the main link.
Firstly - providing an example of what you're trying to explain would be advantageous to getting a working response.
Secondly - you shouldn't need any javascript/jQuery to show a submenu on hover - a simple :hover mechanic in CSS should give you the effect you want.
I have created a jQuery UI navigation menu, using the menubar widget. It works how I expected except I would like it to behave slightly differently. As you can see here http://jsfiddle.net/hcharge/DebVr/ the submenu expands out and is positioned relative to the link that was clicked.
I would like it to expand out and stick to the left of the navigation bar, no matter which link was clicked, the submenu will always stay the same width. Like this image...
I've tried setting a position relative to the container and absolutely positioning the submenu, however I think that jQuery UI positioning is overriding this. Any advice would be great, cheers.
Edit: this needs to be done with JS as it has to be clicks and not hover actions that trigger the dropdowns
Why don't you do it all only with CSS?
See http://jsfiddle.net/DebVr/8/
Note: the background is blue in order to see the white borders.
Edit:
If you want some functionality, you can add it later, but I think that the basis should be with CSS.
See my code with some functionality here: http://jsfiddle.net/DebVr/11/
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabindex=index+1;
});
$('#bar1>li>a').focus(
function(){$(this).siblings('ul').show();}
);
$('#bar1>li>a').blur(
function(){$('#bar1>li>ul').hide();}
);
Edit 2:
If you want to hide again the submenu when clicked, use the following code:
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabIndex=index+1;
});
$('#bar1>li>a').focus(function(){
$(this).siblings('ul').addClass('show');
});
$('#bar1>li>a').mousedown(function(){
$(this).siblings('ul').toggleClass('show');
});
$('#bar1>li>a').blur(function(){
$(this).siblings('ul').removeClass('show');
});
And CSS:
#bar1>li>ul.show{
display:block;
}
See it here: http://jsfiddle.net/DebVr/16/
Edit 3:
In the code above, I replaced obj.tabindex with obj.tabIndex, and updated the jsfiddle.
The problem is that if you click on the submenu, the anchor loses focus and then the submenu dissapears. On Chrome it can be easily fixed setting the focus event to #bar1>li instead of #bar1>li>a, but then the event doesn't work on firefox... I'm working on a solution, but meanwhile you can use http://jsfiddle.net/DebVr/16/.
Edit 4:
Finally, the fixed code: http://jsfiddle.net/DebVr/18/
It works on Chrome, Firefox and IE.
I was wondering what could be the easiest way to add animation to some tab navigation.
I'm developing a small documentation website, Documentation, and as you can see I have that small arrow that adds up to the tab when navigation.
Well, what I was thinking is what if I can do it like this : Sample ; I tried something, I added a span via JS and then on click event ( applied to the li elements ) trigger the arrow animation. The thing is that doing that I stopped the script which is responsible for making the tabs work as they do stop.
So is there another way to achieve something like that ? And what would be the logic ?
Simplest would be to add a narrow absolute position div inside st_slide_container and position to the right. Inside that new element add another element that is just large enough for your arrow icon and is position absolute.
Either use callback of tabs change( depends on what is available in plugin API) or add another click handler to a.st_tab.
In this event handler you can get the index of current tab and apply animation of position top to the small arrow element
EDIT: Example of click handler to get index which would be multiplier for the top animation
$('a.st_tab').click(function(){
alert($(this).parent().index())
})
I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/
Effect I want . Basically I want to popup a simple menu when the user mouseovers a link .
I tried several ready made scripts , but had trouble integrating them with my site. SO decided to built my own.
here is what I am trying to do:
<li onmouseover=showlist1() onmouseout=hidelist1() ><a class="navigation" href="show_delhi_items.php">Menu heading</a></li>
function showlist1() //onmouseover
{
document.getElementById('list1').style.visibility='visible' ;
}
function hidelist1() //onmouseout
{
if (menu elements don't have focus)
{
document.getElementById('list1').style.visibility='hidden' ;
}
}
now in this how do I implement the 'menu elements don't have focus' part ? I know its not possible to know which elemtn has focus. so I need an alternative. Basically the problem is that as soon as the mouse moves outside the main link(the link that popups the hidden menu), the menu hides. what i want is for the menu to remain visible if it gets focus. but currently it gets hidden as soon as the mouse outside our main link
hope I was clear enough.
Make the menu overlap the list item that has the onmouseover menu. Then only close the menu if the mouse is outside both the list item and the menu. You will have to use:
position: absolute;
top: some-y-value;
left: some-x-value;
Hmm now I made that comment i better back it up with an actual way of doing it :)
Go here and read all about suckerfish dropdowns
Go here to see an example implementation