dynamisches Accordeon Menü in Contenido 4.8 einbinden

[various]

Das fertige Menü

[various]

h

[various]

so hab es hinbekommen, nun möchte ich innerhalb dieses accordeon menüs, das die 3 ebene nach rechts aufklappt. werde dies wohl per ccs menü einbauen.

[various]

juchuuu fertig wenn das jmd haben möchte einfach msg

[idea-tec]

poste es doch auf: http://www.contenido-wiki.org/wiki/inde ... Hauptseite
oder füge es hier als CODE ein, dann kann es sich ziehen, laden und testen
cool wäre dann auch ein link wo man sich das mal in real ansehen kann

[various]

gel.

[various]

das sind diese 3 js-dateien

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="ddaccordion.js"></script>
<script type="text/javascript" src="init.js"></script>

[various]

js dateien befinden sich hier:

http://www.dynamicdrive.com/dynamicinde ... ordion.htm

und die init.js sind die ausgelagerten starteinstellungen

[mauerblume]

Kannst du bitte die init.js auch posten.....

und vielleicht mal einen Link.
Damit man sich ansehen kann, wie es aussehen soll.

Denn, wenn man es einfach mal anlegt, wie du es hier schreibst, funktioniert es nicht.

Danke.

[various]

hier nochmal eine neuere version...

INPUT

Code: Alles auswählen

?><?php
$selected = "CMS_VALUE[0]"; 
?>

<table cellspacing="0" cellpadding="10" border="0"> 

  <tr valign="top"> 

    <td>Kategorie wählen:</td> 

    <td><?php echo "<select name=\"CMS_VAR[0]\">";?> 

        <option value="0">---Alle---</option>

<?php

// alle Kategorien auslesen 

$query = "SELECT

            A.idcat,

            A.level,

            C.name

          FROM

            ".$cfg['tab']['cat_tree']." AS A,

            ".$cfg['tab']['cat']." AS B,

            ".$cfg['tab']['cat_lang']." AS C

          WHERE

            A.idcat=B.idcat  

            AND B.idcat=C.idcat 

            AND C.idlang='$lang'

            AND B.idclient='$client' 

            AND C.visible=1

          ORDER BY A.idtree"; 

 

// Query ausf�hren

$db->query($query); 

 

// loop result and build the options 

while ($db->next_record()) { 

 

  // indent spacer 

  $spaces = ""; 

 

  // how many levels 

  $levels = $db->f("level"); 

 

  for ($i = 0; $i > $levels; $i ++) { 

  // add 2 spaces for every level 

  $spaces = $spaces . "  "; 

  } // end for 

 

  echo "<option";

  if ($selected == $db->f("idcat")) echo " selected=\"selected\"";

  echo " value=\"". $db->f("idcat") ."\">". $spaces . $db->f("name") ."</option>"; 

 

} // end while 

 

?>

    </select> 

    </td> 

  </tr> 

  <tr> 

    <td>Anzahl Ebenen:</td> 

    <td><input type="text" name="<?php echo "CMS_VAR[1]"; ?>" value="<?php echo "CMS_VALUE[1]"; ?>"></td> 

  </tr>

  <tr>

    <td>Ebene "0" anzeigen:</td>

<?php

  echo "<td><INPUT TYPE=\"radio\" NAME=\"CMS_VAR[2]\" VALUE=\"1\"";

  if ("CMS_VALUE[2]" == "1") {

    echo "checked=checked";

  }

  echo "> ja

<input type=\"radio\" name=\"CMS_VAR[2]\" value=\"0\"";

  if ("CMS_VALUE[2]" == "0") {

    echo "checked=checked";

  }

  echo "> nein </td></tr>";

  echo "      </table>";

OUTPUT

Code: Alles auswählen

<?php 

// Includes

cInclude("frontend", "includes/functions.navigation.php");

 

// CMS_VALUES initialisieren

$anzahlEbenen      = "CMS_VALUE[1]";

$startkategorie    = "CMS_VALUE[0]";

$ebeneNullAnzeigen = "CMS_VALUE[2]";

 

function vpSitemap($kategorie=0, $level)

{

  global $lang, $client, $cfg, $startkategorie, $anzahlEbenen, $idcat, $ebeneNullAnzeigen;

  $db  = new DB_Contenido;

  $sql  = "SELECT

             *

           FROM

             ".$cfg["tab"]["cat_tree"]." AS A,

             ".$cfg["tab"]["cat"]." AS B,

             ".$cfg["tab"]["cat_lang"]." AS C

           WHERE

             A.idcat=B.idcat

             AND B.idcat=C.idcat

             AND C.idlang='$lang'

             AND B.idclient='$client'

             AND B.parentid=$kategorie

             AND level <= $anzahlEbenen

             AND C.visible=1

           ORDER by A.idtree";

    $db->query($sql);

    $treffer = $db->num_rows();

    

    if ($treffer) {

      if ($kategorie == $startkategorie) $result .= "" . str_repeat ("", ($level * 4)) . "<ul class=\"menu\">\n";

      else if ($level == 2 ) $result .= "\n" . str_repeat (" ", ($level * 4) + 4) . "<ul class=\"list3" .$kategorie. "\">\n"; 

      else if ($level == 1 ) $result .= "\n" . str_repeat (" ", ($level * 4) + 4) . "<ul class=\"submenu\">\n"; 

      else $result .= "\n" . str_repeat (" ", ($level * 4) + 4) . "\n"; 

    }

    

    while ($db->next_record())

    {

       

      $visible = checkCatPermission($db->f("idcatlang"), $db->f("public"));

      if ($visible) {       
        
        $lvl = $db->f("level");

		/*  echo "kategorie dbidcat: ".$db->f("idcat")."\n";     */
        /*sollte es mit Sprachen Probleme geben, dann ggfls. idcat mit idcatlang vertauschen*/
        if ($db->f("idcat")==$idcat && $lvl == 2){$class2='class="sub_active"';} else {$class2='class="sub"';}   /**/
		
        $result .= str_repeat (" ", ($lvl * 4) + 2);

        if (($lvl > 0) || ($ebeneNullAnzeigen)) {

            if ($lvl == 3 ) $result .= '<li class="level'.$lvl.'"><a href="front_content.php?idcat='.$db->f("idcat").'&lang='.$lang.'&client='.$client. '">' . $db->f("name") . '</a>' . "</li>\n" . vpSitemap($db->f("idcat"), $lvl);

            else if ($lvl == 2 ) $result .= '<li '.$class2.'><a href="front_content.php?idcat='.$db->f("idcat").'&lang='.$lang.'&client='.$client. '">' . $db->f("name") . '</a>' . vpSitemap($db->f("idcat"), $lvl) . "</li>\n" ;

            else $result .= '<h3 class="headerbar"><a href="front_content.php?idcat='.$db->f("idcat").'&lang='.$lang.'&client='.$client. '">' . $db->f("name") . '</a>' . "</h3>\n" . vpSitemap($db->f("idcat"), $lvl) ;         

        } else {

          $result .= "".vpSitemap($db->f("idcat"), $lvl) . "\n";

        }

      }

    } 

    

    if ($treffer) {

      if ($kategorie == $startkategorie) $result .= str_repeat (" ", ($level * 4));

      else $result .= str_repeat (" ", ($level * 4) + 4);

      $result .= "</ul>\n";

      $result .= str_repeat (" ", ($level * 4) + 2);

    }

    

    return($result);

  }

 

$sql = "SELECT

          level

        FROM

          ".$cfg["tab"]["cat_tree"]."

        WHERE

          idcat=$startkategorie";

$db->query($sql);

$db->next_record();

$startEbene = $db->f("level") + 1;

$anzahlEbenen += $startEbene;

if ($startkategorie==0) {

  if ($ebeneNullAnzeigen) $anzahlEbenen--;

  $startEbene--;

}

 

echo vpSitemap($startkategorie, $startEbene);

 

?>

init.js

Code: Alles auswählen

ddaccordion.init({
    headerclass: "headerbar", // CSS class name headers
    contentclass: "submenu", // CSS class name content
    revealtype: "mouseover", // "click" or "mouseover
    mouseoverdelay: 200, // if "mouseover", delay ms
    collapseprev: true, // only one open at any time?
    defaultexpanded: [], // open default [index1, index2, etc] or []
    onemustopen: false, // one header should be open always
    animatedefault: false, // animated into view?
    persiststate: true, // persist state browser session?
    toggleclass: ["", "selected"], // Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "normal", //speed of animation "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ // custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})

ddaccordeon.js

Code: Alles auswählen

var ddaccordion={
	
	contentclassname:{}, //object to store corresponding contentclass name based on headerclass

	expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header
		this.toggleone(headerclass, selected, "expand")
	},

	collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header
		this.toggleone(headerclass, selected, "collapse")
	},

	expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname
		var $=jQuery
		var $headers=$('.'+headerclass)
		$('.'+this.contentclassname[headerclass]+':hidden').each(function(){
			$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
		})
	},

	collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname
		var $=jQuery
		var $headers=$('.'+headerclass)
		$('.'+this.contentclassname[headerclass]+':visible').each(function(){
			$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
		})
	},

	toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header
		var $=jQuery
		var $targetHeader=$('.'+headerclass).eq(selected)
		var $subcontent=$('.'+this.contentclassname[headerclass]).eq(selected)
		if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible"))
			$targetHeader.trigger("evt_accordion")
	},

	expandit:function($targetHeader, $targetContent, config, useractivated){
		$targetContent.slideDown(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)})
		this.transformHeader($targetHeader, config, "expand")
	},

	collapseit:function($targetHeader, $targetContent, config, isuseractivated){
		$targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})
		this.transformHeader($targetHeader, config, "collapse")
	},

	transformHeader:function($targetHeader, config, state){
		$targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
		.removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
		if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
			$targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
			$targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
		}
		else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
			$targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
		else if (config.htmlsetting.location=="suffix")
			$targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
	},

	urlparamselect:function(headerclass){
		var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL
		if (result!=null)
			result=RegExp.$1.split(',')
		return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices
	},

	getCookie:function(Name){ 
		var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
		if (document.cookie.match(re)) //if cookie found
			return document.cookie.match(re)[0].split("=")[1] //return its value
		return null
	},

	setCookie:function(name, value){
		document.cookie = name + "=" + value + "; path=/"
	},

	init:function(config){
	document.write('<style type="text/css">\n')
	document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
	document.write('<\/style>')
	jQuery(document).ready(function($){
		ddaccordion.urlparamselect(config.headerclass)
		var persistedheaders=ddaccordion.getCookie(config.headerclass)
		ddaccordion.contentclassname[config.headerclass]=config.contentclass //remember contentclass name based on headerclass
		config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
		config.revealtype=/^(click)|(mouseover)$/i.test(config.revealtype)? config.revealtype.replace(/mouseover/i, "mouseenter") : "click"
		config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
		config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
		config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
		var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
		var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
		if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array)
			expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
		var $subcontents=$('.'+config["contentclass"])
		if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded
			expandedindices=[]
		if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
			expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
		if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header
			expandedindices=[0]
		$('.'+config["headerclass"]).each(function(index){ //loop through all headers
			if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $(this).html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
				$('<span class="accordprefix"></span>').prependTo(this)
				$('<span class="accordsuffix"></span>').appendTo(this)
			}
			$(this).attr('headerindex', index+'h') //store position of this header relative to its peers
			$subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
			var $subcontent=$subcontents.eq(index)
			var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
			if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
				if (config.animatedefault==false)
					$subcontent.show()
				ddaccordion.expandit($(this), $subcontent, config, false) //Last Boolean value sets 'isuseractivated' parameter
				lastexpanded={$header:$(this), $content:$subcontent}
			}  //end check
			else{
				$subcontent.hide()
				config.onopenclose($(this).get(0), parseInt($(this).attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
				ddaccordion.transformHeader($(this), config, "collapse")
			}
		})
		$('.'+config["headerclass"]).bind("evt_accordion", function(){ //assign custom event handler that expands/ contacts a header
				var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
				if ($subcontent.css('display')=="none"){
					ddaccordion.expandit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
					if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
						ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
					}
					lastexpanded={$header:$(this), $content:$subcontent}
				}
				else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
					ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
				}
 		})
		$('.'+config["headerclass"]).bind(config.revealtype, function(){
			if (config.revealtype=="mouseenter"){
				clearTimeout(config.revealdelay)
				var headerindex=parseInt($(this).attr("headerindex"))
				config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
			}
			else{
				$(this).trigger("evt_accordion")
				return false //cancel default click behavior
			}
		})
		$('.'+config["headerclass"]).bind("mouseleave", function(){
			clearTimeout(config.revealdelay)
		})
		config.oninit($('.'+config["headerclass"]).get(), expandedindices)
		$(window).bind('unload', function(){ //clean up and persist on page unload
			$('.'+config["headerclass"]).unbind()
			var expandedindices=[]
			$('.'+config["contentclass"]+":visible").each(function(index){ //get indices of expanded headers
				expandedindices.push($(this).attr('contentindex'))
			})
			if (config.persiststate==true){ //persist state?
				expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
				ddaccordion.setCookie(config.headerclass, expandedindices)
			}
		})
	})
	}
}

jquery-1.2.6.pack.js

von oben stehendem link ziehen!

css

Code: Alles auswählen

.menu ul li.sub_active a{color:#a9042d;}
.menu ul li.sub_active:hover{border:1px solid #baac92;}
.menu ul .sub:hover{border:1px solid #baac92;}
.menu ul .sub{border:1px solid #fff;}
.menu ul li.sub_active{border:1px solid #fff;}
.menu{border:#baac92 solid 1px;width:248px;margin-bottom:8px;}
.menu .headerbar{font-size:12px;color:white;background:#ecf3f9;margin-bottom:0;padding:7px 0 7px 6px;border:#baac92 solid 1px;margin:1px;}
.menu .headerbar a{width:80px;text-decoration:none;color:#a9042d;display:block;}
.menu ul{list-style-type:none;margin:0 0 0 5px;padding:0;margin-bottom:0;width:120px;position:relative;}
.menu ul li{padding-bottom:0;}
.menu ul li a{font:normal 12px Arial;color:black;background:#fff;display:block;padding:5px 0;line-height:10px;height:10px;padding-left:7px;text-decoration:none;}
.menu ul li ul li a{font:normal 12px Arial;color:black;background:#fff;display:block;padding:5px 0;padding-left:6px;text-decoration:none;height:10px;line-height:10px;width:114px;text-indent:0;margin:0;border:#baac92 solid 1px;}
.menu ul li a:hover{color:#a9042d;background:#ecf3f9;}
.menu ul ul{visibility:hidden;position:absolute;top:-1px;left:115px;width:125px;margin-top:1px;}
.menu ul li:hover ul,.menu ul a:hover ul{visibility:visible;}
.menu ul ul.list345{top:87px;}
.menu ul ul.list313{top:43px;}
.menu ul ul.list324{top:43px;}
.menu ul ul.list325{top:65px;}

hoffe, ich hab an alles gedacht...

[mauerblume]

mir fehlt immernoch die init.js damit es funktioniert

danke.

[various]

die ist doch oben gelistet!?

gruss

[mauerblume]

du schreibst:

und die init.js sind die ausgelagerten starteinstellungen

kannst du die datei bitte mal posten.
oder einen link dazu?

danke.

[various]

nur für dich...

Code: Alles auswählen

<script type="text/javascript" src="init.js"></script>

in deine seite einbinden.

datei init.js im hauptverzeichnis anlegen.

dann den folgenden inhalt in diese datei.

Code: Alles auswählen

ddaccordion.init({
        headerclass: "headerbar", // CSS class name headers
        contentclass: "submenu", // CSS class name content
        revealtype: "mouseover", // "click" or "mouseover
        mouseoverdelay: 200, // if "mouseover", delay ms
        collapseprev: true, // only one open at any time?
        defaultexpanded: [], // open default [index1, index2, etc] or []
        onemustopen: false, // one header should be open always
        animatedefault: false, // animated into view?
        persiststate: true, // persist state browser session?
        toggleclass: ["", "selected"], // Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "normal", //speed of animation "fast", "normal", or "slow"
        oninit:function(headers, expandedindices){ // custom code to run when headers have initalized
            //do nothing
        },
        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
            //do nothing
        }
    })

fertig!

[Oldperl]

Hallo various,

bitte nutze für das Posten von Code den BBCode "Code". Danke.
Ich habe das im letzten Post für dich geändert.

Gruß aus Franken

Ortwin