Untermenüpunkte bei Bedarf ausblenden

LuvShining · 21. März 2005

Hallo,

man nehme an, ich habe Menüpunkte "Über uns" und "News". Beide Bereiche verfügen über diverse Unterseiten.
Die Seite an sich habe ich ohne Frameset gelöst (siehe http://www.tutorials.de/tutorials196954.html). Da ich aber nicht möchte, dass immer wenn man einen Untermenüpunkt der Hauptauswahl "Über uns" oder "News" anklickt sich direkt immer die gesamte Seite neu läd, kann man wohl Unterseiten ausblenden (quasi immer die linke Seite) und nur bei Auswahl (anklicken) der Unterpunkte einblenden zu lassen?

Das Prinzip wäre dann also wie bei einem Frameset mit einem "Menü-Frame" und einem "Content-Frame". Bei Auswahl der Hauptpunkte "Über uns" und "News" soll ruhig die gesamte Seite neu geladen (ganzes Frameset) werden, aber bei Auswahl von "Über uns - Punkt 1" oder "Über uns - Punkt 2" nur der Content DIV-Tag (Content-Frame).

Ich hoffe, es ist verständlich erklärt....

Ist das möglich? Wenn ja, wie?

Über eure Hilfe würde ich mich sehr freuen.

Viele Grüße
Nadine

Maik · 22. März 2005

Hallo LuvShining,

basierend auf meinem letzten DIV-Modell poste ich dir mal eine Script-Lösung, die versteckte DIV-Bereiche in der Seite nachträglich einblendet:

HTML:

<html>
<head>
<title>:::div.layout::: | switchTo</title>

<script type="text/javascript">
<!--
// switchTo DIV-Layer
var activeLayer = null;

function switchTo(obj)

{  if (activeLayer != null) {activeLayer.visibility = 'hidden'};

 if(document.all || document.layers || document.getElementById)

 { activeLayer=document.all ?

document.all[obj].style :
document.layers ? document[obj] : document.getElementById(obj).style;

activeLayer.visibility = 'visible'  }
}
//-->
</script>

<style type="text/css">
<!--
body
{
margin: 0;
padding: 0;
overflow: hidden;
}

#centerDiv
{
position: absolute;
left: 50%;
width: 720px;
margin-left: -360px;
top: 50%;
height: 480px;
margin-top: -240px;
border: 1px solid #dfdfdf;
}

#navDiv
{
position: absolute;
left: 20px;
top: 20px;
width: 210px;
height: 440px;
background: #dfdfdf;
}

#startDiv /* sichtbarer Seiten-Inhalt */
{
visibility: visible;
position: absolute;
left: 250px;
top: 20px;
width: 450px;
height: 440px;
background: #dfdfdf;
overflow: auto;
}

div.clSub /* versteckter Seiten-Inhalt */
{
visibility: hidden;
position: absolute;
left: 250px;
top: 20px;
width: 450px;
height: 440px;
background: #dfdfdf;
overflow: auto;
}
-->
</style>

</head>
<body>

<div id="centerDiv">

   <div id="navDiv">
   <a href="javascript:void(switchTo('startDiv'))">switchTo startDiv</a><br>
   &nbsp;&nbsp;&raquo; <a href="javascript:void(switchTo('sub1Div'))">switchTo sub1Div</a><br>
   &nbsp;&nbsp;&raquo; <a href="javascript:void(switchTo('sub2Div'))">switchTo sub2Div</a><br>
   </div>

   <div id="startDiv"><!-- sichtbarer Seiten-Inhalt -->
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
           <p>startDiv with some dummy text</p>
   </div>

   <div id="sub1Div" class="clSub"><!-- versteckter Seiten-Inhalt -->
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
           <p>sub1Div with some dummy text</p>
   </div>

   <div id="sub2Div" class="clSub"><!-- versteckter Seiten-Inhalt -->
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
           <p>sub2Div with some dummy text</p>
   </div>

</div><!-- END centerDiv -->

</body>
</html>

[ Browsercheck: IE 5.5, Moz 1.6, NN 7.0, Opera 7.23 ]

Hoffe, dass dieses Modell deinen Vorstellungen entspricht?

greez, maik.l

Untermenüpunkte bei Bedarf ausblenden

LuvShining

Erfahrenes Mitglied

Maik

Neue Beiträge