Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mauro26

expandir e fechar menu

Recommended Posts

Oi pessoal, estou usando um script, no qual ando a ter problemas a por uma funcionalidade a dar, ele é um menu que expande e fecha, mas gostaria de fazer com que quando eu carrego um link submenu dentro do menu, ele me ficasse aberto o menu ao qual o submenu que foi carregado, agradecia que me ajudasse, o script está aqui neste site até, os links do submenu não estão activos, mas dá para terem uma ideia, o script js é o "utils.js" e o css dele é o main css, mas basicamente onde vem a funcionalidade é o utils.js

 

Abraço pessoaç. espero que me possam orientar em como resolver o problema

 

http://bonuccidesigns.cer33.com/

 

o codigo é este

 

var PANEL_NORMAL_CLASS    = "panel";
var PANEL_COLLAPSED_CLASS = "panelcollapsed";
var PANEL_HEADING_TAG     = "h2";
var PANEL_CONTENT_CLASS   = "panelcontent";
var PANEL_COOKIE_NAME     = "panels";
var PANEL_ANIMATION_DELAY = 20; /*ms*/
var PANEL_ANIMATION_STEPS = 10;





function setUpPanels()
{
loadSettings();

// get all headings
var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG);

// go through all tags
for (var i=0; i<headingTags.length; i++)
{
	var el = headingTags[i];

	// make sure it's the heading inside a panel
	if (el.parentNode.className != PANEL_NORMAL_CLASS && el.parentNode.className != PANEL_COLLAPSED_CLASS)
		continue;

	// get the text value of the tag
	var name = el.firstChild.nodeValue;

	// look for the name in loaded settings, apply the normal/collapsed class
	if (panelsStatus[name] == "false")
		el.parentNode.className = PANEL_COLLAPSED_CLASS;
	else
	if (panelsStatus[name] == "false")   //menu LIfe Club expandir só
		el.parentNode.className = PANEL_NORMAL_CLASS;
	else
	{
		// if no saved setting, see the initial setting
		panelsStatus[name] = (el.parentNode.className == PANEL_NORMAL_CLASS) ? "true" : "false";
	}

	// add the click behavor to headings
	el.onclick = function() 
	{
		var target    = this.parentNode;
		var name      = this.firstChild.nodeValue;
		var collapsed = (target.className == PANEL_COLLAPSED_CLASS);
		saveSettings(name, collapsed?"false":"false");// alteração
		animateTogglePanel(target, collapsed);
	};
}
}

/**
* Start the expand/collapse animation of the panel
* @param panel reference to the panel div
*/
function animateTogglePanel(panel, expanding)
{
// find the .panelcontent div
var elements = panel.getElementsByTagName("div");
var panelContent = null;
for (var i=0; i<elements.length; i++)
{
	if (elements[i].className == PANEL_CONTENT_CLASS)
	{
		panelContent = elements[i];
		break;
	}
}

// make sure the content is visible before getting its height
panelContent.style.display = "block";

// get the height of the content
var contentHeight = panelContent.offsetHeight;

// if panel is collapsed and expanding, we must start with 0 height
if (expanding)
	panelContent.style.height = "0px";

var stepHeight = contentHeight / PANEL_ANIMATION_STEPS;
var direction = (!expanding ? -1 : 1);

setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
}

/**
* Change the height of the target
* @param panelContent	reference to the panel content to change height
* @param iteration		current iteration; animation will be stopped when iteration reaches PANEL_ANIMATION_STEPS
* @param stepHeight	height increment to be added/substracted in one step
* @param direction		1 for expanding, -1 for collapsing
*/
function animateStep(panelContent, iteration, stepHeight, direction)
{
if (iteration<PANEL_ANIMATION_STEPS)
{
	panelContent.style.height = Math.round(((direction>0) ? iteration : 10 - iteration) * stepHeight) +"px";
	iteration++;
	setTimeout(function(){animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
}
else
{
	// set class for the panel
	panelContent.parentNode.className = (direction<0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS;
	// clear inline styles
	panelContent.style.display = panelContent.style.height = "";
}
}

// -----------------------------------------------------------------------------------------------
// Load-Save
// -----------------------------------------------------------------------------------------------
/**
* Reads the "panels" cookie if exists, expects data formatted as key:value|key:value... puts in panelsStatus object
*/
function loadSettings()
{
// prepare the object that will keep the panel statuses
panelsStatus = {};

// find the cookie name
var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "=");
if (start == -1) return;

// starting point of the value
start += PANEL_COOKIE_NAME.length+1;

// find end point of the value
var end = document.cookie.indexOf(";", start);
if (end == -1) end = document.cookie.length;

// get the value, split into key:value pairs
var cookieValue = unescape(document.cookie.substring(start, end));
var panelsData = cookieValue.split("|");

// split each key:value pair and put in object
for (var i=0; i< panelsData.length; i++)
{
	var pair = panelsData[i].split(":");
	panelsStatus[pair[0]] = pair[1];
}
}

function expandAll()
{
for (var key in panelsStatus)
	saveSettings(key, "true");

setUpPanels();
}

function collapseAll()
{
for (var key in panelsStatus)
	saveSettings(key, "false");

setUpPanels();
}

/**
* Takes data from the panelsStatus object, formats as key:value|key:value... and puts in cookie valid for 365 days
* @param key	key name to save
* @paeam value	key value
*/
function saveSettings(key, value)
{
// put the new value in the object
panelsStatus[key] = value;

// create an array that will keep the key:value pairs
var panelsData = [];
for (var key in panelsStatus)
	panelsData.push(key+":"+panelsStatus[key]);

// set the cookie expiration date 1 year from now
var today = new Date();
var expirationDate = new Date(today.getTime() + 365 * 1000 * 60 * 60 * 24);
// write the cookie
document.cookie = PANEL_COOKIE_NAME + "=" + escape(panelsData.join("|")) + ";expires=" + expirationDate.toGMTString();
}

// -----------------------------------------------------------------------------------------------
// Register setUpPanels to be executed on load
if (window.addEventListener)
{
// the "proper" way
window.addEventListener("load", setUpPanels, false);
}
else 
if (window.attachEvent)
{
// the IE way
window.attachEvent("onload", setUpPanels);
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.