JQuery :: Click To Expand Superfish Submenu?
May 2, 2010I would very much like to be able to click to expand a submenu in Superfish, rather than the default hover to expand. How can I achieve this?
View 2 RepliesI would very much like to be able to click to expand a submenu in Superfish, rather than the default hover to expand. How can I achieve this?
View 2 Repliesi used the plugin superfish and all things are fine. BUT, the submenu flaps to the right side. there is a problem with multilevel menues. my menu floats right to the hole webpage. so the submenu flaps over the webpage-border. how can i change this? i want the submenu to flap to the left side.
View 5 Replies View RelatedI'm wondering how to modifiy the vertical menu of superfish to let the submenu appear horizontal next to the parent menu element:123 3a 3b 3c45I just spent some hours searching on Google andplayed around with the CSSbut could not manage to fix it.
View 1 Replies View RelatedI am new to jQuery & Superfish, but it seemd like the most logical way to do a quick prototype for a menusystem. I am trying to create a verertical menu system (using superfish-vertical). However, I'd like to tweak the behaviour of the submenu, and have been unsuccessful so far. Here's what the current solution does (straight out of the box) assume menu item 3 is hovered over:
[Code]...
I'm almost done customizing the Superfish jQuery menu to fit my web site theme. I have all of the menu hover and submenu hover styles in place, but I'm having a problem with the color of the top-level menu item's font when the submenu is expanded. The active top menu item's background matches the hover color, but when I hover overa submenu item, the font color reverts back to the original (non-hovered) color. How do I get the top level menu item's color to match its hover color when the submenu is expanded?
The relevant portions of my CSS are as follows:
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#8C1C39;
}.sf-menu a.sfHover {
color:#FFFFFF;
}.sf-menu li {
background:transparent;
}.sf-menu li li {
background:#FFFFFF;
}.sf-menu li li li {
background:#9AAEDB;
}.sf-menu li:hover, .sf-menu li a:hover {
color: #FFFFFF;
background:#00207B;outline:0;
}.sf-menu a:focus, .sf-menu a:active,
.sf-menu li li a:hover, .sf-menu li.sfHover {
background:#8C1C39;
color: #FFFFFF;
outline:0;
}
Attachments
TopHover.jpg
Size : 10.86 KB
Download : 505
SubHover.jpg
Size : 9.33 KB
Download : 510
I have a problem with nav-bar style insuperfish when update jQuery from 1.2.6 to 1.5 or any later than 1.2.6. Submenu start with UL not begin left. roblem in IE8. Superfish download from: [URL] Replace source from [URL]
View 2 Replies View Relatedcan i tell superfish menu to open a specific submenu manually (without mouseover or click, just static, until you change it)
View 2 Replies View RelatedIs it possible to make the Superfish menu expand up instead of down (I would like to use it as a menu on the bottom of the page)?
View 1 Replies View RelatedI'd like to be able to get Superfish to expand the entire menu and show the current active link in pathlevel 2. I'm using the nav-bar style and it seems that only pathlevel 1 is visible:
[URL]
I have a 3-level menu using JQuery-Superfish. I would like to hover over the top-level menu item and have BOTH the 2nd and 3rd-level menus open automatically.
View 1 Replies View RelatedI have trouble with SuperFish Menu, of course it looks very nice and is good solution, but I am not advanced in CSS language.how to change space between menu and submenu in Navi-bar type menu? Now sobmenu hide part of menu, I have to must space.....
Attachments
superfis.JPG
Size : 11.4 KB
Download : 306
I have a horizontal menu with some subitems. At the moment when I click on the main menu the submenu is being shown and it remains open even if I click anywhere on the page. But here is the tricky part, when I click on a menu item (in the submenu) I want the submenu to display the items on which the page is.For example the menu looks like this:home
page1
page1a
page1b
[code]....
I want to prevent expand/collapse behavior when clicking on a node (folder) in the tree. I only want to expand/collapse when clicking on the plus/minus sign (+/-).
I have tried to use stopPropagation on the click event but I don't getit to work.
I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible. When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.
So, here is the code I have so far:
Code:
<div id="topnav">
<ul>
<li>
<a href="index.html">Home</a>
[Code]....
I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.
When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.
So, here is the code I have so far:
Code:
The javascript:
Code:
And the css:
Code:
Is there a way to close the superfish dropdown after click? I have some 'onclick' functions that kick off some behavior and then return false. How do I get the dropdown to go away? I suppose I need to somehow call "hideSuperfishUl"
View 1 Replies View RelatedI 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 RelatedI'm using the plugin superfish for my menu and i would like to hide it after choosing an item. Here is my code :
$(function(){
$('ul.sf-menu').superfish();
$('a[class=select-item]').click(function() {
[code]....
JS newbie here trying to cobble together enough to get this page done.
Here's the snippet I'm having trouble with (sorry, I know it's sloppy, if you have a better way to do it by all means please post) code...
And the page where it is implemented
Firefox's debug window says it might be an issue of undeclared variables -'claroxanadvanced', 'claroxanoriginal' and 'smokersformula' are all div IDs in the html, what line should I put to declare them?
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.
How can I set the menu to automatically expand on mouse rollover instead of click? Here is the code as it stands right now:
$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
});
});
Second Question: For some reason, the menu is appearing behind a table row when it expands, thus hiding a good portion of the menu. Here it is: [URL]
Try clicking on 'Products & Services', and then clicking on "Centerfire Rifle Suppressors" from the dropdown menu. When it takes you to that category page, click the menu again and you will see that the menu hides behind the <h1> table row.
does someone know how to add a submenu or menu like this sample [URL]...scripts/jquery_simple_drop_down_menu/# but not on a ul but on a button (<button id="rerun">Refresh</button>) Or having a menu with submenu where the first item looks like the button. And the button have the same style than here [URL]..
View 2 Replies View RelatedI use superfish horizontal nav-bar style. Subcategories appearhorizontally below categories.The problem is that when I take themouse from the category name to reach one of their subcats, thesubmenu disappears! The subcategories disappear too fast! Is there away to fix this?
View 1 Replies View RelatedThe submenu works fine with FF, IE8 etc. But it fails with IE7.I have to use sprites background images and the second level sub menu
have to be positioned at a certian place.When I hover top of sub menu, it is ok. But the below of that submenu, such as Radio, Artikler, Hvem er vi?, I am not able to select in IE7.
please access[URL]... I want the subMenu to be :active, when I click on mainMenu. Right Now, subMenu is showing when I hover over to mainMenu.
View 2 Replies View RelatedI spent way too long writing a buggy and bloated jQuery script that is supposed to allow the sub-menus of a drop-down menu be a dynamic width (i.e. the submenu assumes the width of the widest list item). I am probably missing some base CSS property, surely it cant be this hard? My script I wrote is:
// drop down menu
var setWidth = 2;
var nextSetWidth = 0;
$jQ('.nav li').hover(function(){
var thisList = $jQ(this).parent('ul');
if (thisList.parent('li').length > 0) {
thisList.children('li').each(function(){
var thisSpan = $jQ(this).find('span');
var spanWidth = thisSpan.width();
if (spanWidth > setWidth) {
setWidth = spanWidth;
}});
setWidth = setWidth + 16;
thisList.css('width', setWidth);
}
var nextList = $jQ(this).find('.nav:eq(0)');
if (nextList.parent('li').parent('ul').parent('li').length == 0){
nextList.css('left', '2px');
}
nextList.children('li').each(function(){
var nextThisSpan = $jQ(this).find('span');
var nextSpanWidth = nextThisSpan.width();
if (nextSpanWidth > nextSetWidth) {
nextSetWidth = nextSpanWidth;
}});
nextSetWidth = nextSetWidth + 16;
nextList.css('width', nextSetWidth);
if (nextList.parent('li').parent('ul').parent('li').length > 0){
nextList.css('left', setWidth);
}}, function(){
$jQ(this).find('.nav:eq(0)').css('left','9999em');
setWidth = 2;
nextSetWidth = 0;
});
//End of Drop down menu
The HTML looks something like:
<ul class="nav">
<li><a><span></span></a></li>
<li><a><span></span></a></li>
<li><a><span></span></a>
<ul class="nav">
<li><a><span></span></a></li>
</ul>
</li>
</ul>