vorschaue wird für zirka eins zwei wochen auf folgender adresse zu finden sein
externer Link
diese code funzt einwandfrei und braucht eigentlich nur angepasst werden
Im Admin Navigationsmenü braucht man jetzt nur noch
in der ersten ebene Menüwahl interneinstellen und die objekte die in der liste sein sollen als ebene 2 einsetzten
Ist bis ebene 4 getestet
Menüüberschriften bleiben natürlich erhalten
Einfach test und mal aufgeben wie es klappt
Css kann nachher auch ausgelagert werden habe nur die tes-datei so probiert.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Dynamische Navigationsleiste</title>
<style type="text/css">
/* Vertikale Navigation */
div#Tmenu {
font-size: 94%;
width: 10em;
padding: 0.8em;
border: 1px solid white;
background-color: #eee;
}
* html div#Tmenu {
width: 11.3em;
w\idth: 10em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li {
margin-right:1.5em; /* Platz fuer Link-Verbreiterung im IE reservieren */
margin-bottom:0;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 0; left: 9.3em;
}
*:first-child+html ul#Navigation li ul {
left: 9em; /* (IE 7 in standards-compliant mode) */
}
ul#Navigation li ul li {
margin: 0; padding-left: 1.4em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 7em;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
padding: 0.2em 1em;
border: 1px solid #900;
border-left-color: #c96; border-top-color: #c96;
color: white; background-color: #c00;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9em;
w\idth: 7em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
border-color: #c96;
border-left-color: #900; border-top-color: #900;
background-color: #e00;
}
li a#aktuell {
border-right-color: #300; border-bottom-color: #300;
background-color: #900;
}
ul#Navigation li ul span {
border-color: #900; border-left-color: #c96;
color: #900; background-color: white;
}
ul#Navigation li a:active {
color: black; background-color: #f00;
}
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover>ul {
display: block;
}
ul#Navigation>li:hover>a {
width: 8.2em;
background: #e00 url(pfeil.gif) no-repeat center right;
}
/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
* html ul#Navigation li.hoverIE {
margin-right:0; /* reservierten Platz freigeben */
margin-bottom:-1.15em; /* Fehlerkorrektur, ggfls. anpassen */
}
* html ul#Navigation li.hoverIE ul {
display: block;
}
* html ul#Navigation li .hoverIE {
width: 10.3em;
w\idth: 8.2em; /* (IE 6 in standards-compliant mode) */
background: #e00 url(pfeil.gif) no-repeat center right;
}
</style>
<!--[if IE]>
<script type="text/javascript">
// <![CDATA[
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
this.className="hoverIE"; this.firstChild.className="hoverIE";
}
function ausblenden() {
this.className=""; this.firstChild.className="";
}
window.onload=hoverIE;
}
// ]]>
</script>
<![endif]-->
</head>
<body>
<div id="Tmenu">
{_list_menunr1@
<b>%1</b>
%2}
<div></div>
</div>
{_boxes_designs}
</body>
</html> <!--
{_list_DDDmenupoint@
<strong><big>·</big></strong>
<a %1 class="box" href="%2">%3</a>
<br />
}
//-->
<!-- beispiel:
[null, '%3', '%2', '%1', null|],|,
-->
<!-- anfang + link |ende |teilende|teilee -->
<!-- horizontaler menupunkt -->
{_list_hmenupoint@<a target="%1" class="box" href="%2">%3</a>|| - |}
<!-- horizontaler menupunkt anfang -->
{_list_hmenubegi@<img src="designs/Darks/img/box_menu_pfeil.gif" alt="Anfang">}
<!-- horizontaler menupunkt ende -->
{_list_hmenuende@<img src="designs/Darks/img/box_menu_pfeil.gif" alt="Anfang">}
<!-- vertikaler menupunkt -->
{_list_vmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<ul><li>|</ul></li>}
<!-- vertikaler menupunkt anfang -->
{_list_vmenubegi@<ul id="Navigation">}
<!-- vertikaler menupunkt ende -->
{_list_vmenuende@</ul>}
Achso Horizontal geht auch geht auch
<style type="text/css">
div#Tmenu {
font-size: 94%;
width: 39.8em;
padding: 0.8em;
border: 1px solid white;
background-color: #eee;
}
* html div#Tmenu {
width: 41.4em;
w\idth: 39.8em; /* IE 6 in standards-compliant mode */
}
div#Tmenu div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li {
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.8em; left: -0.4em;
}
* html ul#Navigation li ul {
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li ul li {
float: none;
display: block;
margin-top: 0.2em; margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 7em;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
padding: 0.23em 0.97em 0.17em 1.03em;
border: 1px solid #600;
border-left-color: #ea0; border-top-color: #ea0;
color: white; background-color: #c00;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9.2em;
w\idth: 7em; /* IE 6 in standards-compliant mode */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
padding: 0.17em 1.03em 0.23em 0.97em;
border-color: #ea0;
border-left-color: #900; border-top-color: #900;
background-color: #e00;
}
ul#Navigation li ul a:hover {
border-color: #900;
}
li a#aktuell {
border-right-color: #300; border-bottom-color: #300;
background-color: #900;
}
ul#Navigation li ul span {
border-right-color: #c96; border-bottom-color: #c96;
color: #900; background-color: white;
}
ul#Navigation li a:active, ul#Navigation li:hover a:active {
color: black; background-color: #f00;
}
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover ul {
display: block;
background: #eee;
}
</style>
die codeschnipsel hab ich mal im Knowware gefunden aber da müsste man evtl mal anpassungsmässig schauen
Zuletzt modifiziert von shadowings am 08.07.2008 - 18:25:12
