✔ Left Slide Menü + Right Slide

[goto;]

Hallo liebe Community,

Folgendes Problem legt sich mir offen, ich habe ein Slide Down Menü das von Oben in die Seite fährt. Desweiteren habe ich ein Navi- Bereich der sich nach links zusammen zieht. Hier soll direkt daneben ein weiteres Menü das sich nach Rechts zusammen zieht. Das mit der Animation klappt, das Problem ist nur das einbinden.

So sieht die Funkion aus

<script>
$(document).ready(function() {

	$("#open").click(function(){
							  
		$("div#panel").slideDown("slow");                    /*Mein Panel der runter fährt*/
		$("#tabelle").animate({width:"60%"},1000);     /*Die Navibar*/
		

	
	});	
	
	$("#close").click(function(){
		$("div#panel").slideUp("slow");	
		$("#tabelle").animate({width:"100%"},1000);
		
	});		
	
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});		
		
});
</script>

Dort habe ich meine Tabelle die daneben soll so ergänzt.

<script>
$("div#panel").slideDown("slow");
$("#tabelle").animate({width:"60%"},1000);
$("#rightpanel").animate({width:"20%"},3000);
...
$("#close").click(function(){
$("div#panel").slideUp("slow");	
$("#tabelle").animate({width:"100%"},1000);
$("#rightpanel").animate({width:"100%"},3000);
</script>

So sieht dann meine Tabelle aus.

    <div id="wrappAll">
        <div id="tabelle">
            <table id="t1">
                <tr>
                    <td>
                        Tabellenzeile 1
                    </td>
                    <td>
                        Tabellenzeile 2
                    </td>
                </tr>
            </table>
        </div>
    </div>

Und das ist mein css

    <style>
        #wrappAll {
            border:1px solid black;
        }
        #t1 {
            width:75%;
        }
       #t2 {
           width:25%;
       }
    </style>

Wie muss ich meine Tabelle einbinden damit mir beide Tabellen nebeneinander angezeigt werden und nicht alles auf der Seite gesprengt wird? mit float:xxx; schon versucht. Damit wird aber nur alles gesprengt. Mit beide Tabellen in eine und dann so ausrichten auch ohne erfolg. Bin gerade ratlos.

 

[Maik]

Hi,

gibt's das vollständige Gebilde irgendwo live zu begutachten?

mfg Maik

 

[goto;]

Hallo, hab das nötigste oben. Erreichbar unter http://www.mmo-inc.de/test/index.php
Oben ist das Slide Menü und darunter das Navi das sich nach links verkleinert. dort rechts daneben soll das andere Navi menü das sich nach rechts verkleinert. Es soll direkt neben der "Nase" des Slidemenüs zusehen sein.

 

[Maik]

Aus dem Bauch heraus würde ich jetzt mal sagen, dass wenn es dir mit der float-Eigenschaft nicht gelungen ist, die Tabellen nebeneinander auszurichten (was ich aber nicht so recht nachvollziehen kann), es über eine absolute Positionierung zu versuchen - in etwa so:

#wrappAll {
            border:1px solid black;
            position:relative; /* relative Positionierung, damit sich darin die absolute Positionierung von #t2 relativ verhält */
        }

#t2 {
            position:absolute;
            right:0;
}

mfg Maik

 

[goto;]

Klingt gut, versuch ich dann direkt mal danke

 

[Maik]

Mach das, derweil verschiebe ich das Thema ins CSS-Forum, da hier ja offensichtlich kein JS-Problem vorliegt

mfg Maik

 

[goto;]

Wenn ich position:absolute; setze bewegt sich das Navi gar nicht mehr
so sieht die css jetzt aus

<style>
        #wrappAll {
            border:1px solid black;
            position:relative;
        }

        #t1 {
            width:75%;
			background-image:url(images/tab_m.png);
        }
	    #t2 {
            
			background-image:url(images/tab_m.png);
			width:20%;
			position:absolute;
}

    </style>

Vllt liegt es auch an meiner html?
Diese sieht inzwischen so aus. Inhalte mach ich raus.

    <div id="wrappAll">
        <div id="tabelle">
            <table id="t1">
            <tr>
.....
......
</tr>
</table>
</div>
<div id="tab2">
<table id="t2">
<tr>
......
......
</tr>
</table>
</div>
</div>

 

[Maik]

Wie muss ich meine Tabelle einbinden damit mir beide Tabellen nebeneinander angezeigt werden und nicht alles auf der Seite gesprengt wird? mit float:xxx; schon versucht. Damit wird aber nur alles gesprengt.

Keine Ahnung, was du da versucht hast, aber so lassen sich beide Tabellen problemlos nebeneinander ausrichten:

#tabelle {
                 width:75%;
                 float:left;
        }
#tab2 {
                  width:25%;
                  float:right;
        }

mfg Maik

 

[goto;]

Hab vergessen ein Container zu Schließen. Somit war alles wieder verschoben, jetzt klappt es. Danke