Jquery :: Using Superfish With Mega Menus
Jul 12, 2011
I'm working on a project that uses mega menus. Mega Joomla mega menu URL... was put into place before the project was handed off to me . The only problem with it, is that when you are browsing the site on an iOS device (ipad, iphone, etc), and you press on a main menu item, it goes straight to the page it links to instead of opening up the mega menu like the 'hover' is supposed to do.I was looking at Superfish and it looks like it meets my requirements of having the menu be CSS based (so it degrades nicely when JS is turned off), accessible (you can tab through the menu) AND it appears that when you are on an iOS device, you can touch the menu item once, and it will open the menu, touch it twice and it will go to the link which is what I need (i tested this with the sample menu given on the Superfish site).
I've tried to set it up but it's not working and I think it's because it's not expecting children <ul>'s. Mine are all being hidden. I've read through this thread URL... and according to Charlie, Superfish is supposed to work with children <ul>'s and <div>'s but I just can't get mine to work.Is there anyway to adapt Superfish to this?
View 5 Replies
ADVERTISEMENT
Jul 7, 2009
I'm trying to setup a vertical menu where the submenus align to the top of the parent ul rather than the parent li.as in this image: URL...
View 4 Replies
View Related
Oct 22, 2010
I'm usingSuperfish for a popout context menu and it works up to a point, then the screen gets littered with the visible submenu items that are no where near their parent.I have several "views", and 250 things with menus on 1 page seems OK, but 450 is not. I don't have one in between at the moment. Also, my "pages" are in jqueryUI tabs, the tab divs have a table in them, the table td's is where I'm sticking the ul for the menus. I have have many tabs and they all work, even with over 600 in total, it's just the one table with over 400 rows that doesn't look right.Is there some technical limitation on applying sf-menu class to a UL as a child to a table where it hits a ceiling, or do i need to make a mockup test case to figure out what's going on?
View 2 Replies
View Related
Jul 29, 2009
I have a menu that I've already set up with ALA's CSS Sprites2.I have to add a drop down menu into the mix. What would be the best way to achieve this, or rather what would I need to change in the Superfish scripts to get this to work?
View 2 Replies
View Related
Apr 23, 2009
How is the arrows displayed in the superfish menus? If I would like to change to an image of my choice, how do I go about?
View 1 Replies
View Related
May 4, 2009
I want to use the Superfish menu plugin but with 1 more behavior: when the user clicks outside the menu, the menu closes. (or clicks anywhere, doesn't matter). This way I can have a large delay and just tell people to close the menu by clicking outside the menu, which will improve greatly the usability of the menu.
View 1 Replies
View Related
Jul 20, 2009
when someone tabs through with the keyboard, and presses enter on a link, it triggers the click event on that link (which is good) but then the menu stays open.. In my case, I'm not directing the user to a new page, just loading up ajax content, so the menus just hang there open.I want to close them after a click/pressing enter.Or should this go with my gripes about keyboard navigation.
View 6 Replies
View Related
Jun 29, 2011
I've got 4 subnav buttons; each has at least a sub menu; some subs have a subsub menu. My problem is, if I mouseover one of the four main subnav buttons, and then DO NOT choose a sub menu option, but instead mouseover (say) the next of the four buttons, the first sub menu stays displayed.
This only happens if I'm mousing horizontally across the buttons -- i.e., if I mouseover a button, move the mouse pointer above the button, the menu will disappear as it should and it all works correctly.
I've attached a screenshot illustrating how all 4 menus can be open at once.
This is a snippet of the relevant navigation html (2 buttons only):
<div class="sub_nav"><ul class="superfish" id="subnav">
<div id="cat_js_here">
<li class="not_selected"><a class="sub" href="collection.php">Browse by Category</a>
[Code].....
View 7 Replies
View Related
Feb 1, 2011
I'm testing superfish for a project.It works well, but I have a problem in that the total menu is very large - approx 1200 items.I suppose it must be quite possible to load sub-menus with ajax.I've searched - found others looking, but cant find an 'off the shelf' solution.And despite too long playing around I concede that my javascript isnt up to the job.I can get a simple test page running ok, using .load to pull submenu from server and inject it, but I cant figure out how to roll it into superfish.
View 2 Replies
View Related
Jan 27, 2011
Is there a way via the jQuery options to limit the display of menus below a certain level using superfish? I realize it is an odd request, but I am using parts of the main nav menu in a variety of places to reduce updating issues. I have 3rd/4th levels which appear within sections of a site, but I do not want them to drop down from the main nav. So, can I set a limit?
View 5 Replies
View Related
Dec 27, 2010
implement 2 instances of superfish menus on one page? I would like to place a primary navigation menu above the header, and a secondary nav-menu below the header. I've "kind of" managed to do it with the help of Google and by reading quite a few blogs, but I think I'm doing it the wrong way by just duplicating the whole JS folder and renaming things.
Plus, I don't know how to style the menus. So, how would YOU implement 2 Superfish JavaScript menus on ONE page?
View 5 Replies
View Related
Apr 23, 2009
I can get them both to display but I need to style each one differently I have copied the basic styles and renamed them xx2 and then renamed the ul class to match but it doesn't like it!
View 1 Replies
View Related
Jul 16, 2009
When the number of menus (including a menu and its submenus) reach a particular number, then after that rest of the menus are not getting
displayed. Is there any settings available to restrict number of menus in superfish?
View 1 Replies
View Related
Jun 25, 2009
Trying to get the Superfish menus to work in vertical mode, whereby each list item is a single line, and the next menu down sits to the
right of that menu. For normal horizontal menus you use the Supersubs option when you call Superfish, but the superfish-vertical.css you need to make the menus layout vertically, seem to overwrite the widths of the UL's and LI's.
View 1 Replies
View Related
Sep 16, 2009
I have successfully installed superfish-powered drop-down menus in my horizontal nav bar, but I get an irritating (and inconsistent) issue when I click on a nav link: the drop-down menus briefly "flash" down as the new page loads. In fact the page as a whole flashes. This behavior only occurs in IE8 (haven't tried 7) - Firefox, Safari,Chrome are all fine. The url is: peacefulnations.org
View 1 Replies
View Related
Oct 26, 2009
Has anyone modified Superfish vertical menus so the flyout is to the LEFT? How?
View 1 Replies
View Related
Jul 29, 2010
I've cranked up the numbers for sensitivity, interval, and timeout, and the site seems totally unresponsive to my changes. I've double-checked that hoverintent.js is being called, and it definitely is.
var cfg = {
sensitivity: 7,
interval: 5500,
[code]....
View 3 Replies
View Related
Nov 4, 2011
i'm having with a superfish menu i have tried to add to my wordpress site.The menu seems to work fine for the base-level (top parent pages) menu items.But the drop down menus seem to flash on screen for just a second and then disappear when the mouse hovers over the menu items.To see an example, please check out the top menu on this temporary development page: http:[url].....I have tried adjusting the z-index in superfish.css file but it doesn't seem to be having any effect.
View 1 Replies
View Related
Nov 5, 2010
I have a mega menu that when the main menu items is hovered over the mega menu the div is displayed. I want to keep the div from being shown off the right of the browser screen. I have the following that determines the amount a div is off the right of the browser:
Code:
function keepMenuLeft(){
var div_width = $("li.hovering div").width();
[code]....
View 1 Replies
View Related
Dec 13, 2010
I'm having a little issue with assigning a slideDown / slideUp effect to my Mega nav. The problem is that when hovering over the individual tab the slidedown effect causes all submenus to slidedown at the same time, instead of the individual tab over which I am hovering. I'm sure that there is a simple way to fix this - I've tried first child, calling specific divs etc, but without success.here's the menu
<li class="mega"><a href="foo">Foulineous</a>
<div class="megafly">
<div class="col1">
[code]....
View 1 Replies
View Related
Jan 18, 2010
I am having an issue using the Cut & Paste jQuery Mega Menu [URL].. I am using it on the main page of my future forum (test forum is here [URL].. It's the button labeled 'Forum Categories'). The mega menu works fine on the main page of the forum, but once I drill down into the forums, the mega menu no longer works. The mega menu ONLY works on the index of the forum.
View 17 Replies
View Related
Sep 18, 2011
I was basically trying to follow several tutorials to get a superfish menu working on my website, but I don't seem to be able to get it to work.I included both the superfish.css and the superfish.js in my website's header; both paths are corrent and point to the designated file.I then included the superfish function in my header like this:
<script> $(document).ready(function(){ $('ul.sf-menu').superfish({
delay: 1000, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
[code]....
The corresponding <ul> element has the required sf-menu class, but still there are no animations, no fading, no delays, just the plain css functionality provided by the superfish.css.
View 2 Replies
View Related
Nov 16, 2010
I am quite new to jquery and like it so far, dipping my feet but getting them very wet!
I wonder if someone with knowledge could steer me in the right direction regarding the conflict I have with my Mega Menu and my Content Slider at sample page, [URL].. as you can see the Mega Menu appears under the Content Slider,.
View 1 Replies
View Related
Feb 11, 2009
I am trying to make a form where the user is only able to select an option from one of the drop down menus and if they click both then submit an error should pop up telling them to select just one. Now I have found this code:
<SCRIPT LANGUAGE="JavaScript"'>
<!--
function validateForm(){[code]....
the first problem is that my menu must be named "id[2]2" which causes a problem due to the bracketed 2 and the 2 after. Is there any way around that?the second problem I forsee is that this will only work with 1 drop down box being unselected. I need a code that will give the warning if nothing is selected OR if something is selected in both drop downs.
View 17 Replies
View Related
Nov 20, 2010
im using a mega men dropdown and inside there a series of ul's. On focus of the top nav the megamenu plugin fires and the dropdown opens.. I can then tab through all the unordered list links inside and it moves across untill it gets ot the end of the navigation. What I can't work out is how I activate the .blur event if the next tabindex is not inside the mega menu.
[Code]...
View 1 Replies
View Related
Nov 24, 2009
I'm currently trying to build a vertical mega menu as all the ones on the net seem to be set up for horizontal menus. I'm struggling a bit on a certian point as I'm not a very strong Javascript user.It places the mega menu under the button but i want it to appear to the side of the button and be flush with the top of it. I have made it appear to the side but I cant seem to make it run flush with the top of the button, it appears at the bottom of the button.The buttons are 142px wide and 28 in height.
View 1 Replies
View Related
