FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Zur Registrierung

Thema: simple javascript accordian menu - menü soll offen bleiben vom 10.08.2009

	MGi Foren-Übersicht -> Programmierung -> simple javascript accordian menu - menü soll offen bleiben

Autor

Nachricht

Constantin
Threadersteller

Dabei seit: 03.11.2005
Ort: -
Alter: -
Geschlecht: Männlich

Verfasst Mo 10.08.2009 22:48
Titel

simple javascript accordian menu - menü soll offen bleiben

Hallo Jungs und Mädels,

ich habe seit längerem ein Problem. Hab bei einer Seite eines Freundes ein Javascript Accordion Menü eingebaut. Jetzt will ich aber das die Hauptpunkte offenbleiben wenn ich mich im Untermenü befinde und da rumklicken will. hat einer vielleicht auch schon die erfahrungen damit gemacht und hat die lösung? such da schon ewig nach einer lösung. hoffe es kann mir einer helfen.
vielen dank im voraus,
grüße consti

Ihr könnt es euch gerne hier einmal anschauen:

>>>> hier das Problem <<<<<

anbei eine beispielseite und mein css, js.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Praxis für Akupunktur, Otto-Hahn-Straße 8, 97204 Höchberg, Telefon: 0931 / 7809420" />
<meta name="keywords" content="TCM,Körperakupunktur,Ohrakupunktur,japanische Akupunktur,Kinderakupunktur" />
<meta name="robots" content="index, follow" />
<meta name="date" content="2008" />
<meta name="author" content="Dr. phil. Volker Hargutt, Diplom-Psychologe und Heilpraktiker" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="accordian.pack.js"></script>
<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<title>A k u p u n k t u r - Praxis für Akupunktur und Asiatische Medizin Würzburg/Höchberg</title>

</head>

<body onload="new Accordian('basic-accordian',5,'header_highlight');">

<div class="schatten">
<div class="inhalt">
<div class="header"><a href="http://www.akupunkturpraxis-hargutt.de" /></div>
<div class="content_2">
   <div class="navi">
      <div id="basic-accordian">
      <div class="accordion_child_header header_highlight"><a href="index.html">HOME</a></div>
         <div id="test2-header" class="accordion_headings header_highlight">MEDIZINISCHER ANSATZ</div>
            <div id="test2-content">
            <div class="accordion_child"><a href="asiatische_medizin.html">Asiatische Medizin</a></div>
         <div class="accordion_child"><a href="qi.html">Qi</a></div>
         <div class="accordion_child"><a href="krankheit.html">Krankheit</a></div>
               <div class="accordion_child"><a href="akupunktur.html">Akupunktur</a></div>
         <div class="accordion_child"><a href="geistige_klarheit.html">Geistige Klarheit</a></div>
         <div class="accordion_child"><a href="mikro_makrokosmos.html">Mikro- & Makrokosmos</a></div>
         <div class="accordion_child"><a href="kreislaeufe_dynamik.html">Kreisläufe & Dynamik</a></div>
         <div class="accordion_child header_highlight"><a href="die_fuenf_wandlungsphasen.html">Die 5 Wandlungsphasen</a></div>
         </div>
         <div id="test3-header" class="accordion_headings">DIE BEHANDLUNG</div>
         <div id="test3-content">
         <div class="accordion_child"><a href="therapiemethoden.html">Therapiemethoden</a></div>
         <div class="accordion_child"><a href="qualitaetsanspruch.html">Qualitätsanspruch</a></div>
         <div class="accordion_child"><a href="anwendungsgebiete.html">Anwendungsgebiete</a></div>
      </div>
      <div id="test4-header" class="accordion_headings">IHR THERAPEUT</div>
            <div id="test4-content">
            <div class="accordion_child"><a href="zur_person.html">Zur Person</a></div>
            <div class="accordion_child"><a href="qualifikationen.html">Qualifikationen</a></div>
            </div>
      <div id="test5-header" class="accordion_headings">ORGANISATORISCHES</div>
         <div id="test5-content">
         <div class="accordion_child"><a href="dauer_kosten.html">Dauer & Kosten</a></div>
         <div class="accordion_child"><a href="anfahrt.html">Anfahrt</a></div>
      </div>
      <div id="test6-header" class="accordion_child_header_2"><a href="kontakt.html">KONTAKT</a></div>
   </div>
   </div>
   <div class="context">
      <h1>DIE 5 WANDLUNGSPHASEN</h1>
      
      
      <div id="slider1" class="sliderwrapper">
         <div class="contentdiv">
            Die 5 Wandlungsphasen, die eine daoistische Beschreibung natürlicher Zyklen symboli- sieren, werden mit verschiedenen Elementen in Verbindung gebracht. Wiederum dienen die Elemente nur als Symbole der dahinter verborgenen Energie. Sie repräsentieren unterschiedliche <b>Qualitäten von Energie</b>. Dies soll am Beispiel des Holzes verdeutlicht werden, das dem „Startimpuls“, der Jahreszeit Frühling und den Funktionskreisen Leber und Gallenblase zugeordnet ist.
            <p>Die grundlegende Energie des Holzes ist das <b>Wachsen nach oben gegen die Schwerkraft</b>, wie ein junger Sprössling, der ungeahnte Kräfte entfaltet und den Beton durchbricht. Notwendig sind die <b>Qualitäten eines Generals</b>, der langfristig strategisch aber auch kurzfristig taktisch denken muss. Eine gesunde Leber gibt <b>einerseits Struktur</b>, ist aber <b>andererseits flexibel und anpassungsfähig</b>. Daher wundert es nicht, wenn als Körperstruktur die <b>Muskeln und Sehnen</b> der Leber zugeordnet sind. Sie geben einerseits Halt, andererseits müssen sie Bewegung ermöglichen.</p>
            <p>Wird diese gesunde Dynamik der Leber eingeschränkt folgt <b>Explosion nach Außen</b> (z.B. Wut, Zorn, Reizbarkeit) oder <b>Implosion nach Innen</b> (z.B. Bluthochdruck, Tinnitus, vorüber- gehende Sehstörungen, oder Migräneanfälle mit Übelkeit), da die dynamische, kraftvolle Leberenergie dann zu stark nach oben strebt (zum Kopf) und sogar die Magenenergie mitreißen kann (Übelkeit, Erbrechen).</p>
         </div>
         <div class="contentdiv">
            <p>So hat jede Wandlungsphase ihre eigene <b>Energiebewegung</b> und <b>jede Wandlungsphase nährt die folgende</b>. Das <b>Holz</b> nährt das Feuer. Durch <b>Feuer</b> Verbranntes wird zu Asche und damit zur fruchtbaren Erde. Aus der <b>Erde</b> kristallisiert sich durch Absinken das Feinste und Schwerste zu Metall. Und aus dem <b>Metall</b> (oder Erz) kommt dann dass <b>Wasser</b>, das wiederum das Holz ernährt. Jede Phase braucht die vorhergehende, um gut arbeiten zu können, und jede Wandlungsphase muss abgeschlossen werden, damit die nächste folgen kann.</p>
            <p>So ist auch in einem Projekt blinder Aktionismus (Beschleunigung bzw. Feuerphase) ohne vorherige Ideensammlung (Startimpuls bzw. Holzphase) ebenso kontraproduktiv wie ein zu langes Auswerten und Nachdenken über Vergangenes (Stillstand, Wasserphase) ohne eine neue Aktion zu beginnen (Startimpuls, Holzphase).</p>
         </div>
      </div>
      <div id="paginate-slider1" class="pagination"></div>
      <script type="text/javascript">
         featuredcontentslider.init({
         id: "slider1", //id of main slider DIV
         contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
         toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
         nextprev: ["<", ">"], //labels for "prev" and "next" links. Set to "" to hide.
         revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
         enablefade: [true, 0.2], //[true/false, fadedegree]
         autorotate: [false], //[true, 3000 true/false, pausetime]
         onChange: function(previndex2, curindex1){ //event handler fired whenever script changes slide
         //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
         //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
         }
         })
      </script>
   </div>
   <div class="right"><img src="links/die_fuenf_wandlungsphasen.png" alt="" title="" border="0" /></div>
   <div class="footer"><a href="links.html" target="_self">Links</a> | <a href="impressum.html" target="_self">Impressum</a></div>
<div style="clear:both"></div>
</div>
</div>
</div>

</body>
</html>

Code:

body {
background-color: #ffffff;
margin: 0px;
padding: 0px;
}

.schatten {
width: 950px;
height: 700px;
background-image: url(links/schatten.jpg);
background-repeat: no-repeat;
background-position: center;
margin: 50px auto;
padding: 15px;
}

.inhalt {
width: 920px;
height: 670px;
background-color: #ffffff;
/* margin: 50px auto;*/
padding: 15px;
}

.header {
width: 920px;
height: 175px;
background-image: url(links/header.jpg);
margin-bottom: 15px;
}

.header a {
width: 920px;
height: 175px;
background-color: transparent;
display: block;
}

.content {
width: 920px;
height: 480px;
background-color: #d7d7d7;
background-image: url(links/hg_1.jpg);
background-position: right bottom;
background-repeat: no-repeat;
}

.content_2 {
width: 920px;
height: 480px;
background-color: #d7d7d7;
}

.content_3 {
width: 920px;
height: 480px;
background-color: #d7d7d7;
background-image: url(links/hg_3.png);
background-position: right bottom;
background-repeat: no-repeat;
}

.navi {
width: 160px;
height: 414px;
background-color: transparent;
float: left;
margin-top: 21px;
margin-left: 15px;
}

.context {
width: 491px;
height: 405px;
background-color: transparent;
margin-top: 30px;
margin-left: 30px;
float: left;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
text-align: justify;
line-height: 19px;
}

.context a{
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
text-decoration: underline;
}
.context a:hover{
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
text-decoration: none;
}

.right {
background-color: transparent;
width: 194px;
height: 403px;
float: right;
margin-left: 15px;
margin-right: 15px;
margin-top: 32px;
}

.footer {
width: 905px;
height: 8px;
margin-bottom: 15px;
background-color: transparent;
float: left;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
margin-left: 15px;
padding-top: 23px;
}

.footer a{
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
text-decoration: none;
}
.footer a:hover{
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
font-weight: bold;
text-decoration: none;
}

h1 {
font-family: arial, helvetica, verdana;
font-size: 16px;
color: #666666;
text-transform: uppercase;
padding: 0px;
margin: 0px;
text-align: left;
text-decoration: none;
font-weight: normal;
margin-bottom: 16px;
}

b {
font-weight: strong;
}

p {
margin-top: 9px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}

li {
text-indent: -0.9em;
padding-left: 0.9em;
}

/* accordion */

* {
margin:0;
padding:0;
list-style:none;
}

#basic-accordian{
padding:5px;
width:160px;
}

.accordion_headings{
background: transparent;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
border-top:1px solid #828282;
cursor:pointer;
font-weight:normal;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 4px;
}

.accordion_headings:hover{
background: transparent;
font-weight: bold;
}

.accordion_child{
padding-top: 3px;
padding-bottom: 3px;
background: transparent;
}

.accordion_child_header{
background: transparent;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
border-bottom:1px solid #828282;
cursor:pointer;
font-weight:normal;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 4px;
}

.accordion_child_header a{
background: transparent;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
font-weight:normal;
text-decoration: none;
display: block;
}
.accordion_child_header a:hover{
background: transparent;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
font-weight:bold;
text-decoration: none;
display: block;
}

.accordion_child_header_2{
background: transparent;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
border-top:1px solid #828282;
cursor:pointer;
font-weight:normal;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 4px;
}
.accordion_child_header_2 a{
background: transparent;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
font-weight:normal;
text-decoration: none;
display: block;
}

.header_highlight{
background: transparent;
font-weight: bold;
border-bottom: 0px;
}

.header_open {
overflow: auto;
height: auto;
}

.accordion_child a{
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
text-decoration: none;
}

.accordion_child a:hover{
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
text-decoration: none;
font-weight: bold;
}

/* content */

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width: 491px; /*width of featured content slider*/
height: 385px;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
text-align: justify;
line-height: 19px;
}

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
background: transparent;
width: 491px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
text-align: justify;
line-height: 19px;
}

.pagination{
width: 491px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: transparent;
padding-top: 5px;
}

.pagination a{
padding: 0 5px;
text-decoration: none;
background: transparent;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
text-align: justify;
line-height: 19px;
display: block;
width: 10px;
height: auto;
display: inline;
}

.pagination a:hover, .pagination a.selected{
background-color: transparent;
font-weight: bold;
font-family: arial, helvetica, verdana;
font-size: 12px;
color: #666666;
text-align: justify;
line-height: 19px;
display: block;
width: 10px;
height: auto;
display: inline;}

Code:

//by dezinerfolio.com
eval((function(){a=" {3document5ByIdOgvv=8E!&&E!K32}o=E;E;v=parseInt(2E=o;3vdheight=vHpx}Oofvgvv=v/d.h;dDv;dfilterKalpha(D+v*100H)Obz>0z#-1:z-v90E;%eE;z<x(x-z)#+1:v+z9x%Accordians,fl=5sByTagName(diva=[]d=S;QQ,Q)=={a.push}}xL((hc=h0,hc6==hcMc+;c;coverflowKhidden;c.h=g(cc.s=(s=8)?7:s;h.f=f;h.c=a;h.match4fHH))x=h}hC=(Rj=0;j<F.c;j++n=F.c[j];n=n0,ndMn6nMn+;s=dJt4sH)Rp=0;p<s;p++s[p]=KGsJce(p,1d=s.join( break}}clearn.tQ==FPg(n,0@ed+K GP@b}}}}})(S)}x!LxC()}}",b=49;while(b>=0)a=a.replace(new RegExp("#%2345689@CDEFGHJKLMOPQRS".charAt(b),"g"),("\\\042\044.style.displayfunctionInterval(.className.length.indexOf(-)(d)if(-content).id){.style.=none{d=;z=g;x=d.h;(d,;for(i=0;i<l;i++);}else{('+n+')',9)}.substr(=blockv=Math.round(/d.sv=(v<1)?zcleard.t)}} d.offsetHeightreturn (new RegExp(.getElement+-header=undefined;ofv)gn.t=set'.onclickopacity=dthis+d.f+.spli==null=(} n=dfor(l[i]".split(""))[b--]);return a})())

(zeigts wohl nicht an *Schnief*

)

pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich

Verfasst Di 11.08.2009 13:16 Titel

dann musste nachm seiteaufruf das derzeit aktuelle untermenü mit display: block versehen. die seite läd sich neu, und das menü weiß ohne deine hilfe nicht, wo es ist.


	MGi Foren-Übersicht -> Programmierung

Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.