mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 04.12.2016 01:21 Benutzername: Passwort: Auto-Login

Thema: Beim laden gleich in ein offenes Expanding Menu verweisen vom 23.02.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Beim laden gleich in ein offenes Expanding Menu verweisen
Autor Nachricht
Vertigo01
Threadersteller

Dabei seit: 22.02.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 23.02.2006 09:44
Titel

Beim laden gleich in ein offenes Expanding Menu verweisen

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

ich hab da leider wieder ein problem.

Ich möchte, wenn ich auf die Seite gehe, das sofort das entsprechende menü schon aufgeklappt ist. So als wäre ich schon vorher fraufgegangen und hätte es angeklickt. Bei der folgenden Seite soll das menü "Home" aufgeklappt sein, und es soll aussehen, als hätte man zuvor auf "unternehmen geklickt.


JavaScript:
Code:

<script type="text/javascript">

if(!window.Node){
   var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
   return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
   var result = new Array();
   var children = node.childNodes;
   for(var i = 0; i < children.length; i++){
      if(checkNode(children[i], filter)) result[result.length] = children[i];
   }
   return result;
}
function getChildrenByElement(node){
   return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
   var child;
   var children = node.childNodes;
   for(var i = 0; i < children.length; i++){
      child = children[i];
      if(checkNode(child, filter)) return child;
   }
   return null;
}
function getFirstChildByText(node){
   return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
   for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
      if(checkNode(sibling, filter)) return sibling;
   }
   return null;
}
function getNextSiblingByElement(node){
   return getNextSibling(node, "ELEMENT_NODE");
}


var activeMenu = null;

function showMenu(){
   if(activeMenu){
      activeMenu.className = "";
      getNextSiblingByElement(activeMenu).style.display = "none";
   }
   if(this == activeMenu){
      activeMenu = null;
   }else{
      this.className = "active";
      getNextSiblingByElement(this).style.display = "block";
      activeMenu = this;
   }
   return false;
}
function initMenu(){
   var menus, menu, text, a, i;
   menus = getChildrenByElement(document.getElementById("menu"));
   for(i = 0; i < menus.length; i++){
      menu = menus[i];
      text = getFirstChildByText(menu);
      a = document.createElement("a");
      menu.replaceChild(a, text);
      a.appendChild(text);
      a.href = "#";
      a.onclick = showMenu;
      a.onfocus = function(){this.blur()};
   }
}

if(document.createElement) window.onload = initMenu;

</script>



HTML:
Code:

<div id="navi">
<ul id="menu">
<li><br />Home
<ol>
   <li><a href="index.html" class="sub"><p class="hide">Unternehmen</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Leistungen</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Was ist Factoring?</p></a></li>
</ol>
</li>   
<li><br />Leistungen
<ol>
   <li><a href="index.html" class="sub"><p class="hide">Liquidität</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Sicherheit</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Service</p></a></li>   
</ol>
</li>
<li><br />Erfolgreich mit CrefoFactoring
<ol>
   <li><a href="index.html" class="sub"><p class="hide">Vorteile</p></a></li>
</ol>
</li>
<li><br />Factoring Checkliste
<ol>
   <li><a href="index.html" class="sub"><p class="hide">Factoring-Eignung</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Factoring-Anfrage</p></a></li>
</ol>
</li>
<li><br />Kontakt
<ol>
   <li><a href="index.html" class="sub"><p class="hide">Anschrifft</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">So finden Sie uns!</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Impressum</p></a></li>   
</ol>
</li>
</ul>
</div>



CSS:
Code:

#navi
{
float: left;
width: 190px;
height: 460px;
background-color: #4D93C5;
padding: 0px;
margin: 0px;
background-image: url(images/streifen_1.jpg);
background-repeat: no-repeat;
background-position: bottom;
}

#navi ul
{
list-style: none;
margin: 0px;
padding: 0px;
}

#navi ul li
{
margin: 0px;
}

#navi ul li a
{
display: block;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 13px;
text-decoration: none;
font-size : 8pt;
font-family : Tahoma;
width: 177px;
font-weight: bold;
}

html>body #navi ul li a
{
width: auto;
}

li.active
{
background-color: 0E2953;
}

#######################################################

ul#menu
{
list-style-type: none;
margin: 0;
padding: 0;
}

ul#menu ol
{
display: none;
text-align: left;
list-style-type: none;
margin: 0;
}

ul#menu li,
ul#menu a
{
font-family: verdana, sans-serif;
font-size: 11px;
color: #FFFFFF
}

ul#menu li
{
border-bottom: none;
line-height: 15px;
}

ul#menu li.active
{
border-bottom: none;
line-height: 15px;
background-color: #0E2953;
}

ul#menu ol li:before
{
content: "- ";
}

ul#menu a
{
text-decoration: none;
outline: none;
}

ul#menu a.sub
{
background-color: #DBE9F3;
color: #0E2953;
}

ul#menu a:hover
{
background-color: #0E2953;
color: #FFFFFF;
}

ul#menu a:link
{
background-color: #0E2953;
color: #FFFFFF;
}

ul#menu a.active
{
background-color: #0E2953;
color: #FFFFFF;
}



Ich danke euch jetzt schonmal für eure Hilfe!

LG Vertigo01
  View user's profile Private Nachricht senden
Account gelöscht


Ort: -
Alter: -
Verfasst Do 23.02.2006 11:18
Titel

Antworten mit Zitat Zum Seitenanfang

Versuchs mal damit:

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

if(!window.Node){
   var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
   return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
   var result = new Array();
   var children = node.childNodes;
   for(var i = 0; i < children.length; i++){
      if(checkNode(children[i], filter)) result[result.length] = children[i];
   }
   return result;
}
function getChildrenByElement(node){
   return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
   var child;
   var children = node.childNodes;
   for(var i = 0; i < children.length; i++){
      child = children[i];
      if(checkNode(child, filter)) return child;
   }
   return null;
}
function getFirstChildByText(node){
   return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
   for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
      if(checkNode(sibling, filter)) return sibling;
   }
   return null;
}
function getNextSiblingByElement(node){
   return getNextSibling(node, "ELEMENT_NODE");
}


var activeMenu = null;

function showMenu(){
   
   
   if(activeMenu){
      activeMenu.className = "";
      getNextSiblingByElement(activeMenu).style.display = "none";
   }
   if(this == activeMenu){
      activeMenu = null;
   }else{
      this.className = "active";
      getNextSiblingByElement(this).style.display = "block";
      activeMenu = this;
   }
   return false;
}

function initMenu(){
   var menus, menu, text, a, i, isActive;
   
   menus = getChildrenByElement(document.getElementById("menu"));
   
   for(i = 0; i < menus.length; i++){
     
     
      menu = menus[i];
     
      isActive = null;
      isActive = menu.style.display;
     
      text = getFirstChildByText(menu);
     
      a = document.createElement("a");
     
      menu.replaceChild(a, text);
      a.appendChild(text);
      a.href = "#";
      a.onclick = showMenu;
     
      a.onfocus = function(){ this.blur() };
     
      if (isActive == "block") {
      a.className = "active";
      getNextSiblingByElement(a).style.display = "block";
      activeMenu = a;
      }
   }
}

if(document.createElement) window.onload = initMenu;

</script>
<style type="text/css">
#navi
{
float: left;
width: 190px;
height: 460px;
background-color: #4D93C5;
padding: 0px;
margin: 0px;
background-image: url(images/streifen_1.jpg);
background-repeat: no-repeat;
background-position: bottom;
}

#navi ul
{
list-style: none;
margin: 0px;
padding: 0px;
}

#navi ul li
{
margin: 0px;
}

#navi ul li a
{
display: block;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 13px;
text-decoration: none;
font-size : 8pt;
font-family : Tahoma;
width: 177px;
font-weight: bold;
}

html>body #navi ul li a
{
width: auto;
}

li.active
{
background-color: 0E2953;
}

#######################################################

ul#menu
{
list-style-type: none;
margin: 0;
padding: 0;
}

ul#menu ol
{
display: none;
text-align: left;
list-style-type: none;
margin: 0;
}

ul#menu li,
ul#menu a
{
font-family: verdana, sans-serif;
font-size: 11px;
color: #FFFFFF
}

ul#menu li
{
border-bottom: none;
line-height: 15px;
}

ul#menu li.active
{
border-bottom: none;
line-height: 15px;
background-color: #0E2953;
}

ul#menu ol li:before
{
content: "- ";
}

ul#menu a
{
text-decoration: none;
outline: none;
}

ul#menu a.sub
{
background-color: #DBE9F3;
color: #0E2953;
}

ul#menu a:hover
{
background-color: #0E2953;
color: #FFFFFF;
}

ul#menu a:link
{
background-color: #0E2953;
color: #FFFFFF;
}

ul#menu a.active
{
background-color: #0E2953;
color: #FFFFFF;
}
</style>
</head>
<body>

<div id="navi">
<ul id="menu">
<li><br />Home
<ol>
   <li><a href="index.html" class="sub"><p class="hide">Unternehmen</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Leistungen</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Was ist Factoring?</p></a></li>
</ol>
</li>   
<li style="display:block;"><br />Leistungen
<ol>
   <li><a href="index.html" class="sub"><p class="hide">Liquidität</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Sicherheit</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Service</p></a></li>   
</ol>
</li>
<li><br />Erfolgreich mit CrefoFactoring
<ol>
   <li><a href="index.html" class="sub"><p class="hide">Vorteile</p></a></li>
</ol>
</li>
<li><br />Factoring Checkliste
<ol>
   <li><a href="index.html" class="sub"><p class="hide">Factoring-Eignung</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Factoring-Anfrage</p></a></li>
</ol>
</li>
<li><br />Kontakt
<ol>
   <li><a href="index.html" class="sub"><p class="hide">Anschrifft</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">So finden Sie uns!</p></a></li>
   <li><a href="index.html" class="sub"><p class="hide">Impressum</p></a></li>   
</ol>
</li>
</ul>
</div>
</body>
</html>


Macht aber nicht soo viel Sinn, weil das Menu erst springt, dann die Seite lädt, und du dann eh den aktiven Menupunkt wiederum per clientseitiger Scriptsprache markieren musst (ich hab zur Markierung jetzt mal das style-Attribut zweckentfremdet).

Aber ich liebe diese Dom-Style Menus...


Zuletzt bearbeitet von am Do 23.02.2006 11:22, insgesamt 1-mal bearbeitet
 
Anzeige
Anzeige
mahzell

Dabei seit: 16.06.2003
Ort: bochum
Alter: 36
Geschlecht: Weiblich
Verfasst Do 23.02.2006 11:44
Titel

Antworten mit Zitat Zum Seitenanfang

na toll, hatte damals auch shcon angefragt *Schnief*
http://www.mediengestalter.info/forum/10/javascript-menue-anpassen-50311-1.html

aber itt lüppt *Thumbs up!*

schinken wenn du hier abhaust hinterlass mir ne emailadresse Grins
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Account gelöscht


Ort: -
Alter: -
Verfasst Do 23.02.2006 12:22
Titel

Antworten mit Zitat Zum Seitenanfang

Boah heut wird mir aber der Bauch gepinselt...

is wie mit den Frauen, je assiger man sich anstellt, desto geiler wird man....












Mädchen!
 
mahzell

Dabei seit: 16.06.2003
Ort: bochum
Alter: 36
Geschlecht: Weiblich
Verfasst Do 23.02.2006 12:25
Titel

Antworten mit Zitat Zum Seitenanfang





*ha ha* * Ich bin ja schon still... *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Expanding Menu mit Timeout?
expanding banner / expanding wallpaper
PHP Formular erstellt...wie auf meine Email verweisen?
Hilfe: Offenes Auge in ein Geschlossenes ändern?
rollover im js menu
javascript menu II
Neues Thema eröffnen   Neue Antwort erstellen
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.