I'm looking for a plugin or good explained tutorial about making a dropline menu using jQuery.
What I need: two levels - main and submenu support for "current" state submenu visible when main element has a class of current
My original post is at [URL] I would like to make the dropline submenu appear to slide down instead of just pop in.
View 1 Replies View Relatedim trying to make a sliding tab menu, The menu is already made with animations and such, however now im trying to integrate the menu with the Divs i have for each menu item. I really just need something to start me off.. Basically on click i want the current selected item and div to fadeOut to the left and the newly selected to fadein from the right..
JQUERY
$
'span'
.click
[Code].....
Forgive the extremely basic question but I can't find something that addresses it. I have a navigation bar that is a series of list elements. I want to pop open a subnavigation bar when you mouse over one of the elements.
The slightly different thing about this one is that in the html the subnav div sits outside the main navigation div, ie they are not related. What I want to do is keep the subnavigation bar if you move your mouse from the main nav down to the subnav, and hide it again once the mouse leaves either the subnav or the main nav.
My problem is that any of the ways I can think of doing it, once the mouse leave on the main nav is called i can't stop it from going.[URL]...
This is a very basic question about jQuery usage (i'm not a professional at this at all). Basically, I have a menu (an unordered list), each of which refers to a table. When a user clicks on one element in the list, visible tables should disappear and the desired table appears.
[Code]...
Is there anyway to make a vertical super fish menu drop left? I have positioned the menu on the right side of the page so, I need sub-menus to drop left. Is this possible?
View 1 Replies View Relatedwhat I'm trying to do is to have a vertical menu where one of the list items if triggered (click or mouseover are both fine) moves to the right and then slides down a submenu with other 4 lists items. I got this working while I was just trying this effect alone thanks to this script:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
[code]....
I want to try and make a menu using javascript and DHTML. I want the
menu to be horizontaly placed on top of the webpage. When I move the
cursor over it a popup menu comes up. Sort of like what you can find
on the first page of Micrsoft.com near the top. But I want the menu to
have a more transparent blue color. Is that possible? Also where would
I go to find out how to do this?
If I select one of the menu items the submenu appears just fine, my only
problem is that If I point the mouse curser away from the whole menu the
submenu is still shown, obviously if I click once with the mouse outside the
menu the submenu disappears. So I need some kind of remove-submenu function
when the mouse pointer is not pointing on menusubmenu....
making a script work with a 3-tier menu?
[URL]
Right now, it's only programmed for two. I need to be able to expand like this:
+ Item
...+ Item
......- Item
......- Item
Here it is in practice: [URL]
If you expand Direct Lending you'll see that Industry Verticals opens already expanded and can't be closed.
I want to build a navigation list menu, that is called dynamically from recordsets called rec_product_categories and rec_product_sub_categories.[code]The 'category' field in product_ sub_categories links to the 'category_id' field in product_categories.[code]
View 3 Replies View RelatedI'll get to the hierarchy sensitive part next, but for now I need help making this even work with two top-level links. I'm building a left-navigation that's expandable. Click a little + box image to the left of a top-level section's link, and all the links to sub-sections within that section expand out, the + box image becomes a - box image, and clicking the - box collapses the sub menu links. The scripts below work so long as I just have one top-level section, but because they us an ID for the +-box image, when I add a second top-level menu item, the swapImage function no longer works. How do I make it work with a class instead of an ID? The JavaScript and HTML code is below:
[Code]...
I came up with the idea of making the links in the back of the circle (i've got a total of 10 links), invisible and put a globe in the middle (as background) - making it look like the links in the back go behind the globe and comes back from behind it again. I've tried to do this myself with .this.style.invisibility="hidden";
[Code]...
now i am making a navigation menu using images by on mouse over function,i want to make a div that shows menu using css and javascript function
View 3 Replies View RelatedI am really pressing on to finish this home page menu, and I'm trying to find out why this odd behavior is occurring. There is obviously some conflicting code in my CSS. You can see this odd behaving menu for yourself at productreview. The other thing I'm trying to learn how to do is how to get the 3rd and 4th level lists to appear on the parent item's hover.This is my JavaScript:
Code:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
[code]....
I 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 am having trouble with a simple image gallery with navigational buttons including "first", "next", "previous", and "last"; and making a drop-down archive menu.
1. For the most part, the image gallery works. The problem is that when a user clicks on "next", and then "prev", the last image is not displayed. On the other hand, if a user clicks "prev", and then "next" the last image is displayed(works normally).
2. The way I am displaying the last image, the function last(), is not efficient. It simply refreshes the page in order to display the last image.
Basic overview: The images follow a simple standard: page1, page2, page3,...page64; they are in a subfolder "img". The function changeImage() changes the image from the prev, to the next. The image gallery displays the last image in the gallery; when a user clicks on 'prev' it goes to the previous image, and go to the next image when clicked on 'next'. If the current image is the last image, and the user clicks on 'next', it goes to the very first image. Here is the code (in the
<HEAD> tags):
<script language="JavaScript"><!--
which_image_loaded = -1;[code]....
My guess is the code is not working properly due to the initial values of the counter.Last, is there a way to display the current image "myimage.src" using a dropdown menu with each option value as each image?I have done this with window. location, but this only redirects to the image location.
The problem is that the height of the second level menu results in their being gaps in between each menu item so that as you move your mouse down the second menu items it quickly closes again. scripting novice fix this by telling me which variable I need to change either in the Java script or the CSS files.
View 2 Replies View RelatedI have installed Superfish menu module with Joomla ..Customization work more less fine ...I still have tenious problem like :
- How to have the main menu with the active color, when one of the sub-menu has been actived ?
- How to change the inactive color of the sub-menu without changing the inactive colro of the principal menu ...I did not found any information on the web ..
I have created a jquery accordion menu for a brilliant CMS called 'Concrete5' and all works lovely BUT I now would like the menu to stay open if a menu item is selected within the drop list.I have manged to create the following.....
var pathname = window.location.pathname;
var selecteda = $(".nav-selected a").attr("href");
// alert (selecteda)
[code]....
..but it doesn't seem to work.I'm not a JQuery GOD like most of you on here but I am trying my hardest The accordion menu I am trying to get this to happen on is Accordion Menu.
how to make the menu items a fixed width in a horizontal Superfish menu . I've tried mucking about with the CSS but no luck so far. I'm sure it's easy, but I can't seem to work it out.
View 9 Replies View RelatedTo build a menu block which should be switchable with hide/unhide of the menu items, I'm using .append html. The code idea is this:
[Code]...
As can be seen from above posted code there is a line "<div id="' + menuSlider + '" style="display:none">". Appending that -- AFAIS -- the .append is automatically (????) adding "</div>" which closes the statement. That breaks my idea of the whole concept! The menu part isn't included in the 'menuSlider '. QQ: How to change it -- NOT to have that "</div" added to it??
I am trying to create a specific menu using jQuery where i want to toggle a clicked menu item. I used toggleClass to accomplish this. All fine and well, but what i want is that once i click a menu item, the previously clicked item should have the active state/class toggled off.. The menu is variable. (I tried and tried and searched all over the internet, but i cannot find it... spent 5 hours trying to combine various selectors and if/else statements, but it did'nt work.)
View 1 Replies View RelatedI'm using superfish menu jquery plugin, and I'm wondering if someone know how to update plugin that you can decide if sub - sub menus wil be shown on the right (that is in the original) or on the left side of the parent menu.
The problem is, that if the last menu is near the end of the browser, than the sub - sub menu will go off side the browser.
The purpose of the code is to slideToggle open one of two hidden sub-nav bars when either of two different menu items are clicked upon - instead of a drop down menu. What doesn't work is the hiding of the div that is not required, if it is already open. Viewing in firebug shows that the appropriate classes are being applied - I suspect the reason is that slideToggle has been somehow set and cannot be unset via another object - but perhaps that is not it at all?
$(document).ready(function() {
//add .toggle function to appropriate li element
$('#hozmenu li:nth-child(4)').toggle(function () {
//set 4th menu links colour to be green whilst div is shown
$('#hozmenu li:nth-child(4) a').css('color', '#95d890');
$('#toggle_nav_services').removeClass('toggle_show');
[Code]....
I needed a sidebar menu that, when a user clicks the <h3>, a submenu expands. When the user then clicks on a different menu item, the previous submenu disappears meaning only one submenu can be visible at one time.
Now the code I have at the moment (from jQuery forums) works. It now needs a bit more refining so that it works the way I intend.
When you first load the page, all of the submenus are collapsed which is a real pain as each submenu has 20 - 30 selections.
Is there a way to have them all hidden initially?
Is there a way to get an open submenu to close by clicking on the H3 title again?
Since the site is local only, I posted up a sample on my JSfiddle account.
[url]
This one, which I also found on google, did what I wanted, but without the smooth slide animation. - [url]
When you then click on one of the H3's, it kicks into action and works great!