Expandable Buttons

**snlilli** · 23.10.2008 12:56

Hi all,

ich bin auf meiner Suche nach einem netten Forum in dem es Hilfe zum Thema JS gibt auf euch hier gestoßen und hoffe das es die richtige Wahl war

Ich möchte ein Menue bauen welches mit expandable buttons funktionieren soll. An sich hab ich hier:http://www.dnolan.com/code/js/listmenu/ auch alles gefunden, was man dafür braucht.
Nun soll mein Menu aber keinvertikales sondern ein horizontales werden.
Wenn man jetzt aber mehrere buttons nebeneinander anordnet verschieben sich die einzelnen menues sobald eins geöffnet wird.
Das soll natürlich nicht passieren. Das menue soll auf einer Höhe bleiben und der Inhalt des geöffneten menues soll nach unten expandieren.

Hoffe es ist einigermaßen zu verstehen was ich will

..weiß nicht wie ich es besser beschreiben soll.

Wäre super toll, wenn jemand eine Lösung hierfür hätte !!

Gruß
Lilli

**webcreate** · 23.10.2008 13:03

Fragen wir mal so ... warum JS? Reicht Dir kein CSS? Schau doch mal unter Menus - Multi-Level - Dropline nach.

**snlilli** · 23.10.2008 13:32

hmm doch klar. womit das menue realisiert wird ist an sich egal.
Jedoch hab ich mit css das selbe problem.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Example Menu</title>
<script>
var myvar;
function menuinit() {
        document.getElementById('m1').style.display = 'none';
        document.getElementById('m2').style.display = 'none';
        document.getElementById('m3').style.display = 'none';
	document.getElementById('pm1').src = 'plus.png';
	document.getElementById('pm2').src = 'plus.png';
	document.getElementById('pm3').src = 'plus.png';
}
function menuexpand (i) {
        menuinit();
        if (myvar == i) {
		document.getElementById('p' + i).src = 'plus.png';
		document.getElementById(i).style.display = 'none';
		myvar = '';
	}
        else {
		document.getElementById('p' + i).src = 'minus.png';
		document.getElementById(i).style.display = 'block';
		myvar = i;
	}
}
</script>
<style>
#nav {
        width: 10em;
}
#nav, #nav ul, #nav li {
        margin: 0;
        padding: 0;
        list-style: none;
}
#nav a {
        display: block;
        height: 1.2em;
	width: 100%;
        padding: 0.25em;
	text-decoration: none;
}
#nav a.span {
        color: white;
        background-color: #008;
	position: relative;
}
#nav a.span:hover {
        color: black;
        background-color: #CCF;
}
#nav a.span img {
	position: absolute;
	top: 2px;
	right: 2px;
	border: 0;
}
#nav li {
        border: thin solid white;
	clear: both;
}
#nav li ul li {
        font-size: 85%;
        border: none;
}
#nav li ul li a {
        color: white;
        background-color: #00C;
}
#nav li ul li a:hover {
        color: black;
        background-color: #CCF;
}
</style>
<body>
<table onload="menuinit();">
<tr>
<td>
<ul id="nav">

                <li>
                        <a href="#" class="span" onclick="menuexpand('m1');return false;">Menu 1<img id="pm1" src="" alt=""></a>
                        <ul id="m1">
                                <li><a href="#">Item 1a</a></li>
                                <li><a href="#">Item 1b</a></li>
                                <li><a href="#">Item 1c</a></li>
                                <li><a href="#">Item 1d</a></li>
                        </ul>
                </li>
</td>
<td>
<ul id="nav">

                <li>
                        <a href="#" class="span" onclick="menuexpand('m2');return false;">Menu 2<img id="pm2" src="" alt=""></a>
                        <ul id="m2">
                                <li><a href="#">Item 2a</a></li>
                                <li><a href="#">Item 2b</a></li>
                                <li><a href="#">Item 2c</a></li>
                                <li><a href="#">Item 2d</a></li>
                        </ul>
                </li>

</td>
<td>
<ul id="nav">
                <li>
                        <a href="#" class="span" onclick="menuexpand('m3');return false;">Menu 3<img id="pm3" src="" alt=""></a>
                        <ul id="m3">
                                <li><a href="#">Item 3a</a></li>
                                <li><a href="#">Item 3b</a></li>
                                <li><a href="#">Item 3c</a></li>
                                <li><a href="#">Item 3d</a></li>
                        </ul>
                </li>

        </ul>

</td>
</tr>
</table>
</body>

**Adromir** · 23.10.2008 15:12

Damit die nachfolgenden Elemente nicht verschoben werden, musst du mit float arbeiten und vielleicht zur Sicherheit noch eine feste Breite für die Elemente vergeben. Sonst nimmt ein Blockelement immer automatisch die ganze Seitenbreite ein.

**snlilli** · 23.10.2008 15:37

Das hört sich irgendwie plausibel an..
doch wo genau muss ich denn den float einbauen ?

Code:

<html>
<head>
<script type="text/javascript">

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : ""
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>


<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>

</head>
<body>



<table align="center">
<th>
Airbus <nob>OpenD is an Enterprise Collaboration Platform and Knowledge Management System, 
which is primarily intended to be used for manage documentation and project planning for Airbus products. 
Our development team includes hundreds of people in various locations across national boundaries, so web 
collaboration is <b>very important</b> to us. The <nob>OpenD has changed the way we run meetings, plan releases, 
document our product and generally communicate with each other.
</th>



</table>


<table align="center">
<tr>
<td>
<table>
<p onClick="expandcontent('sc1')" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('ict','','file:///D|/LES/final_buttons/ict_2.jpg',1);"><img name="ict" src="D:\LES\final_buttons\ict.jpg" width="163" height="60" border="0" alt=""></p>
<div id="sc1" class="switchcontent" style="width: 100%; height: 100%; float: top;">
<a href="">2.1</a>
<br>
<a href="">2.2</a>
<br>
<a href="">2.3</a>
<br>
<a href="">2.4</a>
</div>
</table>
</td>
<td>
<table>
<p onClick="expandcontent('sc2')" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('oaob','','file:///D|/LES/final_buttons/oaob_2.jpg',1);"><img name="oaob" src="D:\LES\final_buttons\oaob.jpg" width="163" height="60" border="0" alt=""></p>
<div id="sc2" class="switchcontent" style="width: 100%; height: 100%; float: top;">
<a href="">2.1</a>
<br>
<a href="">2.2</a>
<br>
<a href="">2.3</a>
<br>
<a href="">2.4</a>
</div>
</table>
</td>
<td>
<table>
<p onClick="expandcontent('sc3')" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('oaod','','file:///D|/LES/final_buttons/oaod_2.jpg',1);"><img name="oaod" src="D:\LES\final_buttons\oaod.jpg" width="163" height="60" border="0" alt=""></p>
<div id="sc3" class="switchcontent">
<a href="">2.1</a>
<br>
<a href="">2.2</a>
<br>
<a href="">2.3</a>
<br>
<a href="">2.4</a>
</div>
</table>
</td>

<td>
<table>
<p onClick="expandcontent('sc4')" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('oaoz','','file:///D|/LES/final_buttons/oaoz_2.jpg',1);"><img name="oaoz" src="D:\LES\final_buttons\oaoz.jpg" width="163" height="60" border="0" alt=""></p>
<div id="sc4" class="switchcontent">
<a href="">2.1</a>
<br>
<a href="">2.2</a>
<br>
<a href="">2.3</a>
<br>
<a href="">2.4</a>
</div>
</table>
</td>

<td>
<table>
<p onClick="expandcontent('sc5')" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('info','','file:///D|/LES/final_buttons/info_2.jpg',1);"><img name="info" src="D:\LES\final_buttons\info.jpg" width="163" height="60" border="0" alt=""></p>
<div id="sc5" class="switchcontent">
<a href="">2.1</a>
<br>
<a href="">2.2</a>
<br>
<a href="">2.3</a>
<br>
<a href="">2.4</a>
</div>
</table>
</td>

</tr>
</table>


</body>
</html>

zur Startseite vom TP

Thema: Expandable Buttons

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Expandable Buttons

Ähnliche Themen

Buttons via AS

buttons

scratch banner und expandable banner

Expandable Banner so wie im Link?

Bilder-Buttons wie Submit-Buttons

Aktive Benutzer

Aktive Benutzer