Ergebnis 1 bis 4 von 4
  1. #1
    RealGsus ist offline Grünschnabel
    registriert
    26-10-2007
    Beiträge
    3

    Question Foldout Menü vertikal mit 2 Subebenen

    Hallo,

    ich hab nun schon ne Weile hier im Forum und im Netz gesucht, aber leider noch nichts passendes gefunden und hoffe deshalb ihr könnt mir helfen.

    Ich möchte ein einfaches Aufklappmenü einbauen, allerdings bräuchte ich eine 2. Ebene und genau das ist mein Problem. Soll also etwa so aussehen:

    Code:
    Main 1
       Sub 1
       Sub 2
       Sub 3
          SubSub 1
          SubSub 2
       Sub 4
    Ich habe auch schon 2 passende Beispiel mit nur einer Ebene gefunden. Sieht so und so aus. Leider fehlen mir noch die nötigen JS-Kenntnisse um sie selber anzupassen, deshalb hoffe ich ihr könnt mir helfen.

    Hier mal noch der jeweilige Quellcode:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-script-type" content="text/javascript">
    <meta http-equiv="content-style-type" content="text/css">
    <title>Foldoutmenue Vertical</title>
    
    <style type="text/css" media="screen">
    <!--
    body
    {
    	font-family: Arial, sans-serif;
    	font-size: 11pt;
    	overflow: auto;
    	padding: 10px;
    	margin: 0px;
    }
    
    #menu, #menu ul
    {
    	padding: 0px;
    	margin: 0px;
    }
    
    #menu li
    {
    	border: 1px solid #fff;
    	list-style-type: none;
    	font-weight: bold;
    	cursor: pointer;
    	color: #008000;
    	display: block;
    }
    
    #menu a
    {
    	text-decoration: underline;
    	font-weight: normal;
    	color: #008000;
    	padding-left: 10px;
    	display: block;
    }
    //-->
    </style>
    
    <script type="text/javascript">
    <!--
    function hideSub()
    {
    	if (!document.getElementsByTagName)
    		return;
    
    	var mnu    = document.getElementById('menu');
    	var toplis = mnu.getElementsByTagName('li');
    
    	for (var it = 0; it < toplis.length; it++)
    	{
    		var sublis = toplis[it].getElementsByTagName('li');
    
    		for (var is = 0; is < sublis.length; is++)
    			if (sublis[is].style)
    				sublis[is].style.display = (toplis[it].className == 'show') ? 'block' : 'none';
    	}
    }
    
    function mShow(Me)
    {
    	if (!Me.getElementsByTagName)
    		return;
    
    	var mylis = Me.getElementsByTagName('li');
    
    	if (!mylis)
    		return;
    
    	for (j = 0; j < mylis.length; j++)
    		mylis[j].style.display = (mylis[j].style.display == 'block') ? 'none' : 'block';
    }
    //-->
    </script>
    
    </head>
    <body onload="hideSub();">
    
    <ul id="menu">
      <li onclick="mShow(this);">Main 1
        <ul>
          <li><a href="#">Sub 1</a></li>
          <li><a href="#">Sub 2</a></li>
          <li><a href="#">Sub 3</a></li>
          <li><a href="#">Sub 4</a></li>
        </ul>
      </li>
    
    <!--  <li class="show" onclick="mShow(this);">Options 2 -->
    
      <li onclick="mShow(this);">Main 2
        <ul>
          <li><a href="#">Sub 1</a></li>
          <li><a href="#">Sub 2</a></li>
          <li><a href="#">Sub 3</a></li>
          <li><a href="#">Sub 4</a></li>
        </ul>
      </li>
    </ul>
    <br><br><br>
    
    
    </body>
    </html>
    Code:
    <html>
    <head>
    <title>DHTMLCentral.com - Free Dynamic HTML Scripts - FoldoutMenu Demo</title>
    <meta name="Author" content="Thomas Brattli (webmaster@dhtmlcentral.com)">
    <META NAME="Generator" CONTENT="Designer:Thomas Brattli (www.bratta.com)">
    <meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scripts,menu,foldoutmenu,hierarchical,expandable,collapsable,outlines,">
    <meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help.">
    <style type="text/css">
    #divCont {position:absolute; z-index:1; left:50px; top:70px; height:400px; width:170px; visibility:hidden;}
    .clTop   {position:absolute; z-index:1; width:170px; line-height:17px;}
    .clSub   {position:absolute; z-index:1; left:0px; top:20px; width:170px; line-height:14px;}
    
    /*** This sets the style for the links inside the menu. ***/
    #divCont .clTop a {color:#000000; font-family:verdana,arial,helvetica,sans-serif; font-size:14px; font-weight:bold; text-decoration:none;}
    #divCont .clTop a:hover {color:#000000; text-decoration:none;}
    #divCont .clTop .clSub a {color:#777777; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; font-weight:normal; text-decoration:none;}
    #divCont .clTop .clSub a:hover {color:#333333; text-decoration:none;}  
    </style>
    <script language="JavaScript" type="text/javascript">
    /**********************************************************************************   
    FoldoutMenu 
    *   Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
    *   This script was released at DHTMLCentral.com
    *   Visit for more great scripts!
    *   This may be used and changed freely as long as this msg is intact!
    *   We will also appreciate any links you could give us.
    *
    *   Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a> 
    *********************************************************************************/
    
    function lib_bwcheck(){ //Browsercheck (needed)
    	this.ver=navigator.appVersion
    	this.agent=navigator.userAgent
    	this.dom=document.getElementById?1:0
    	this.opera5=this.agent.indexOf("Opera 5")>-1
    	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
    	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
    	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    	this.ie=this.ie4||this.ie5||this.ie6
    	this.mac=this.agent.indexOf("Mac")>-1
    	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
    	this.ns4=(document.layers && !this.dom)?1:0;
    	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    	return this
    }
    var bw=new lib_bwcheck()
    
    
    
    /*** variables you can configure ***/
    
    FoldNumber = 6					//How many toplinks do you have?
    var stayFolded = false			//Stay open when you click a new toplink?
    foldImg = 1						//Do you want images (if not set to 0 and remove the images from the body)?
    mainOffsetY = 0					//Vertical space adjustment between the main items, in pixels.
    
    //This is the default image.
    //Remember to change the actual images in the page as well, but remember to keep the name of the image.
    var unImg=new Image();
    unImg.src='foldoutmenu_arrow.gif'
    
    var exImg=new Image();					//Making an image variable...
    exImg.src='foldoutmenu_arrow_open.gif'	//...this is the source of the image that it changes to when the menu expands.
    
    // NOTE: if you change the position of divCont from absolute to relative, you can put the foldoutmenu in a table.
    // HOWEVER it will no longer work in netscape 4. If you wish to support netscape 4, you have to use absolute positioning.
    
    /*** There should be no need to change anything beyond this. ***/
    
    // A unit of measure that will be added when setting the position of a layer.
    var px = bw.ns4||window.opera?"":"px";
    
    if(navigator.userAgent.indexOf('Opera')>-1 && document.getElementById){ //Opera 5 resize fix.
    	scrX= innerWidth; scrY= innerHeight;
    	document.onmousemove= function(){
    		if(scrX<innerWidth-10 || scrY<innerHeight-10 || scrX>innerWidth+10 || scrY>innerHeight+10){
    			scrX = innerWidth;
    			scrY = innerHeight;
    			initFoldout();
    		}
    	};
    }
    
    //object constructor...
    function makeMenu(obj,nest){
    	nest= (!nest)?"":'document.'+nest+'.';
    	this.el= bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj);	
       	this.css= bw.ns4?this.el:this.el.style;
    	this.ref= bw.ns4?this.el.document:document;		
    	this.x= (bw.ns4||bw.opera5)?this.css.left:this.el.offsetLeft;
    	this.y= (bw.ns4||bw.opera5)?this.css.top:this.el.offsetTop;
    	this.h= (bw.ie||bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.opera5?this.css.pixelHeight:0;
        this.vis= b_vis;
    	this.hideIt= b_hideIt;
        this.showIt= b_showIt;
        this.moveIt= b_moveIt;
    	return this
    }
    //object methods...
    function b_showIt(){this.css.visibility='visible'}
    function b_hideIt(){this.css.visibility='hidden'}
    function b_vis(){if(this.css.visibility=='hidden' || this.css.visibility=='HIDDEN' || this.css.visibility=='hide') return true;}
    function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px}
    
    /************************************************************************************
    This is the function that changes the sub menus to folded or unfolded state.
    ************************************************************************************/
    function menu(num){
    	if(bw.bw){
    		if (!stayFolded){
    			for (var i=0; i<oSub.length; i++){
    				if (i!=num){
    					oSub[i].hideIt()
    					if (foldImg)oTop[i].ref["imgA"+i].src = unImg.src
    				}
    			}
    			for(var i=1; i<oTop.length; i++){
    				oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h)
    			}
    		}
    		if (oSub[num].vis()){
    			oSub[num].showIt()
    			if (foldImg)oTop[num].ref["imgA"+num].src = exImg.src
    		}else{
    			oSub[num].hideIt()
    			if(foldImg)oTop[num].ref["imgA"+num].src = unImg.src
    		}
    		for(var i=1; i<oTop.length; i++){ 
    			if (!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h+oSub[i-1].h+mainOffsetY) 
    			else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h+mainOffsetY)
    		}
    	}
    }
    
    /*********************************************************************
    The init function... there should be no need to change anything here.
    *********************************************************************/
    function initFoldout(){
    	//Fixing the browsercheck for opera... this can be removed if the browsercheck has been updated!!
    	bw.opera5 = (navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?true:false
    	if (bw.opera5) bw.ns6 = 0
    
    	oTop = new Array()
    	oSub = new Array()
    	//Making the objects and hiding the subs...
    	for (var i=0; i<FoldNumber; i++){
    		oTop[i] = new makeMenu('divTop'+i,'divCont')
    		oSub[i] = new makeMenu('divSub'+i,'divCont.document.divTop'+i)
    		oSub[i].hideIt()
    	}
    	
    	//Positioning the top objects...
    	oTop[0].moveIt(0,0)
    	for (var i=1; i<oTop.length; i++){
    		oTop[i].moveIt(0, oTop[i-1].y+oTop[i-1].h+mainOffsetY)
    	}
    	
    	//Making the containing menu object and showing it...
    	oCont = new makeMenu('divCont')
    	oCont.showIt()
    }
    
    // If the browser is ok, the script is started onload...
    if(bw.bw) onload = initFoldout;
    </script>
    </head>
    
    <body marginleft="0" marginheight="0">
    <!-- START DELETE -->
    <br><br><br>
    <!-- END DELETE -->
    
    <div id="divCont"> <!-- These are the contents of the foldoutmenu. -->
    
    <div id="divTop0" class="clTop"><a href="#" onclick="menu(0); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA0" width=12 height=12 alt="" border="0"> [choice 0]</a><br>
    <div id="divSub0" class="clSub">
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    </div><br>
    </div>
    
    <div id="divTop1" class="clTop"><a href="#" onclick="menu(1); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA1" width=12 height=12 alt="" border="0"> [choice 1]</a><br>
    <div id="divSub1" class="clSub">
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    </div><br>
    </div>
    
    <div id="divTop2" class="clTop"><a href="#" onclick="menu(2); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA2" width=12 height=12 alt="" border="0"> [choice 2]</a><br>
    <div id="divSub2" class="clSub">
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    </div><br>
    </div>
    
    <div id="divTop3" class="clTop"><a href="#" onclick="menu(3); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA3" width=12 height=12 alt="" border="0"> [choice 3]</a><br>
    <div id="divSub3" class="clSub">
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    </div><br>
    </div>
    
    <div id="divTop4" class="clTop"><a href="#" onclick="menu(4); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA4" width=12 height=12 alt="" border="0"> [choice 4]</a><br>
    <div id="divSub4" class="clSub">
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    </div><br>
    </div>
    
    <div id="divTop5" class="clTop"><a href="#" onclick="menu(5); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA5" width=12 height=12 alt="" border="0"> [choice 5]</a><br>
    <div id="divSub5" class="clSub">
    	<a href="#">This is a link</a><br>
    	<a href="#">This is a link</a><br>
    </div><br>
    </div>
    
    </div> <!-- Here ends the foldoutmenu. -->
    
    
    
    
    </body>
    </html>
    VG, der seb

  2. #2
    RealGsus ist offline Grünschnabel
    registriert
    26-10-2007
    Beiträge
    3

    AW: Foldout Menü vertikal mit 2 Subebenen

    Kann mir wirklich niemand helfen?

  3. #3
    Avatar von Albu
    Albu ist offline Super Moderator
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: Foldout Menü vertikal mit 2 Subebenen

    Menüs macht man heutzutage nicht mehr mit Javascript sondern CSS.
    Help yourself: Stu Nicholls | CSSplay | CSS only menus
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  4. #4
    RealGsus ist offline Grünschnabel
    registriert
    26-10-2007
    Beiträge
    3

    AW: Foldout Menü vertikal mit 2 Subebenen

    Ok, danke für den Tipp, werd ich mir gleich mal anschauen!

    VG Gsus

Ähnliche Themen

  1. Java Script Menü Problem
    Von thewhitesmoke im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 12-09-2007, 14:50
  2. Java Script menü
    Von demf im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 05-08-2007, 00:49
  3. PopUp Menü rechtsbündig!?
    Von [x]snaKe im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 14-03-2006, 14:51
  4. Brauche dringend Hilfe bei meinem Menü Script
    Von AEdevil im Forum JavaScript
    Antworten: 15
    Letzter Beitrag: 12-07-2005, 18:29
  5. dropdown menü
    Von snake14 im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 26-01-2003, 17:19

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •