Willkommen auf dem Portal für Mediengestalter
|
|
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 |
|
|
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
|
|
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Do 23.02.2006 11:18
Titel
|
|
|
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
|
|
|
mahzell
Dabei seit: 16.06.2003
Ort: bochum
Alter: 43
Geschlecht:
|
|
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Do 23.02.2006 12:22
Titel
|
|
|
Boah heut wird mir aber der Bauch gepinselt...
is wie mit den Frauen, je assiger man sich anstellt, desto geiler wird man....
|
|
|
|
|
mahzell
Dabei seit: 16.06.2003
Ort: bochum
Alter: 43
Geschlecht:
|
Verfasst Do 23.02.2006 12:25
Titel
|
|
|
|
|
|
|
|
|
|
|
Ä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?
CSS Menu
Zweistufiges Menu
|
|
|
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.
|
|