Collapsable Menu
Nov 23, 2002
This is a vertical collaps menu I made:
<html>
<head>
<script language='javascript1.2'>
//Scrit Name:Collapsable Menu V2.0
//Created By:Garadon
//E-Mail:Shashalak@hotmail.com
//Homepage:www.the-hive.dk/~donp/
function expand(value)
{
var antal=3;
var i=value;
var move=document.getElementById(i).clientHeight;
if(document.getElementById(value).style.visibility=='visible')
{
document.getElementById(value).style.visibility='hidden'
while(i!=antal)
{
i++;
document.getElementById(i+'t').style.pixelTop=document.getElementById(i+'t').style.pixelTop-move;
}
}
else
{
document.getElementById(value).style.visibility='visible'
while(i!=antal)
{
i++;
document.getElementById(i+'t').style.pixelTop=document.getElementById(i+'t').style.pixelTop+move;
}
}
}
</script>
</head>
<body bgColor=Black Text=yellow >
<table cellspacing=0 cellpadding=0 border=0 id=1t style='position:absolute;left:0px;top:5px;width:150px'>
<tr>
<td colspan=2 onClick="expand(1);" bgColor='#555555'>
<B>
Test1
</B>
</td>
</tr>
<tr>
<td bgColor='#000000'>
<table Border=0 bgColor='#333333' style='width:100%;visibility:hidden' id=1>
<tr>
<td>
Test1
</td>
</tr>
<tr>
<td>
Test1
</td>
</tr>
<tr>
<td>
Test1
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing=0 cellpadding=0 border=0 id=2t style='position:absolute;left:0px;top:24px;width:150px'>
<tr>
<td colspan=2 onClick="expand(2);" bgColor='#555555'>
<B>
Test2
</B>
</td>
</tr>
<tr>
<td bgColor='#000000'>
<table Border=0 bgColor='#333333' style='width:100%;visibility:hidden' id=2>
<tr>
<td>
Test2
</td>
</tr>
<tr>
<td>
Test2
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing=0 cellpadding=0 border=0 id=3t style='position:absolute;left:0px;top:43px;width:150px'>
<tr>
<td colspan=2 onClick="expand(3);" bgColor='#555555'>
<B>
Test3
</B>
</td>
</tr>
<tr>
<td bgColor='#000000'>
<table Border=0 bgColor='#333333' style='width:100%;visibility:hidden' id=3>
<tr>
<td>
Test3
</td>
</tr>
<tr>
<td>
Test3
</td>
</tr>
<tr>
<td>
Test3
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
View 1 Replies
ADVERTISEMENT
Aug 4, 2010
I have this code that I found online and I'm trying to figure out how to make this collapsable menu open collapsed when the page opens up.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[code]....
View 4 Replies
View Related
Jul 9, 2004
Any there any way to make the familiar expanding/collapsing banner ads found on sites like CNET, ZDNet, etc. in JavaScript without having to use Flash? The only thing on the web I've found....
View 14 Replies
View Related
Nov 9, 2010
i just found this jquery script for collapsable panels : [URL] it works fine for me, but the problem is that i have to write all the ID's from the DIV's into the script before. i got a page with a lot auf these panels and i dont want to write every ID in the script. is there any posibility to have only one scipt and when i click one panel it regognize on which i clicked? so i dont want to have the ID's in the script.
this is the script:
$(function()
{
$("#mostrar").click(function(event) {
event.preventDefault();
[Code]....
View 2 Replies
View Related
Aug 5, 2010
I have the code below that gives the ability to open and collapse sections.I don't know too much javascript and found this code online. I tweaked it to serve my purposes but it doesn't do one thing. I would like all of the areas to be collapsed when the page is opened.How would I tweak the code below to do that?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[code]....
View 3 Replies
View Related
Feb 15, 2011
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
View 1 Replies
View Related
Jun 3, 2009
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 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
Oct 6, 2009
I 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 ..
View 2 Replies
View Related
Aug 27, 2010
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.
View 1 Replies
View Related
Jan 19, 2011
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 Related
Apr 26, 2010
To 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??
View 2 Replies
View Related
Mar 8, 2010
provide me with code to make a collapsible menu? What I'm looking for is a vertical menu, that will open up the sub-categories upon a mouseover. Clicking on the menu item will bring them to the specific page. Oh, and this might not matter, but I'd prefer if I was able to style the menu to fit with my site theme.
View 2 Replies
View Related
Sep 30, 2010
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 Related
Mar 4, 2011
I'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.
View 2 Replies
View Related
May 6, 2010
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.
View 2 Replies
View Related
Jun 16, 2011
Am working on a web template similar to this one: [URL] and would like to change the hover color for the menus (in blue with white text). What would be the best color to match if the menu background is left as it is when hovering on a menu item?
View 2 Replies
View Related
Oct 26, 2009
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]....
View 1 Replies
View Related
Sep 1, 2011
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!
View 2 Replies
View Related
Apr 16, 2010
I 'm working on a menu which imitates a desktop application menu toolbar (like this on your firefox ).Here's a demo[1] The menu is an <ul> containing <li> elements and <ul>s for sub-navigation.[2] User clicks the top-nav <li> with the arrow indicator and sub-menu pops out.[3] By clicking again the sub-menu hides.[4] Also by clicking outside the top-nav <ul>, a visible sub-menu hides (i used focusout event for this one).[5] Last one, a usability enhancement. Once a user clicks a top-nav <li> element with arrow indicator, he doesn't have to click again the rest <li>s with sub-nav. For instance, in the demo, if i click "Articles" and the menu pops out i shouldn't have to click "Games" in order to display it's own sub-nav.I'm having problems with [2]-[3], like arrow flickering as i click but before releasing the mouse button.umber [5] is a big mystery to me, i 'm not at this level right now.
View 1 Replies
View Related
Jan 13, 2011
I am trying to use the Jquery selecmenu to skin dropdowns.There are extra UL LI getting formed with data "undefined" so dropdown is showing undefined in end.
View 1 Replies
View Related
Oct 31, 2009
I'm thinking of using this plugin for my menus. Is there an easy way to display a menu item in a disabled state?
View 1 Replies
View Related
Nov 3, 2009
I actually want to make a horizontal drop down menu with a sub menu.As far as I have researched, I think that it can be done by JavaScript. I have searched for some java scripts but they are very long and complex.
That made me wonder that for a funcitonality like a Drop down is so complex?
So here is my question : Is there any JavaScript that can be applied for drop down menu exclusively? Which just presents logic of drop down solely?
View 3 Replies
View Related
Mar 1, 2011
I want to create a menu like the left (as we see that) menu of getitnow.gr.Do you know any script for this?I use prototype framework,is there any script related with prototype? I mean a script that make the menu to stay even we use the scrollbar of the brownser.
View 1 Replies
View Related
Feb 11, 2011
I'm building a drop down menu like [URL] or [URL] or [URL] the effect I'm trying to achieve is to have the top menu item showing a background image via css and create a stylized design with the sub-menu. Using CSS when I hover over the sub menu the background image of the top item disappears. So I'd like some guidance with javascript on how to keep the back-image while hovering on the sub menu.
View 1 Replies
View Related
Aug 27, 2009
I want to make a menu (not drop down) which will be of 100% width and height just like ipod drill menu. Can anybody know about such sliding menu and drilling down to each item..? how to change this one to achieve my preferences. I want: menu options (not in a drop down) slides left into subcatogaries on each item click (like windows media center menu)....
View 1 Replies
View Related
