I) JAVASCRIPT nav.js
====================
| Code: |
sfHover = function() {
var sfEls = document.getElementById(”hauptnav”).getElementsByTagName(”LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
}
}
}if (window.attachEvent) window.attachEvent(”onload”, sfHover); |
II) TYPOSCRIPT
===========
1) Javascript und CSS-Stylesheets einbinden
———————————————————
| Code: |
page.headerData.10000 = TEXT
page.headerData.10000.value (
<script type=”text/javascript” language=”JavaScript” src=”fileadmin/js/nav.js”></script>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style.css” media=”screen” />
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/ie-style.css” media=”screen” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style-print.css” media=”print” />
) |
2) Das Menü aufbauen
———————————————————
| Code: |
lib.MainNav = HMENU
lib.MainNav {
wrap = <ul id=”hauptnav”>|</ul>
#wrap = <ul>|</ul>
special = directory
special.value = 21 = TMENU
1.expAll = 1
1.NO = 1
1.NO.ATagParams = class=”navilink”
1.NO.wrapItemAndSub = <li>|</li>1.ACT = 2
1.ACT.ATagParams = class=”navilink”
1.ACT.wrapItemAndSub = <li class=”active”>|</li>
1.ACT.wrapItemAndSub = <li>|</li>
1.ACT.expAll = 1
2 < .1
2.wrap = <ul>|</ul>
2.ACT.wrapItemAndSub = <li class=”active”>|</li>
2.ACT.wrapItemAndSub = <li>|</li>
# 2. Ebene: falls Einträge auf dritter Ebene vorhanden
# den Linktext mit Pfeilspize markieren
2.IFSUB = 1
2.IFSUB.ATagParams = class=”navilink”
2.IFSUB.stdWrap.wrap = | >
2.IFSUB.wrapItemAndSub = <li>|</li>
# 2. Ebene, aktiver Zustand: falls Einträge auf dritter Ebene vorhanden
# den Linktext mit Pfeilspize markieren
2.ACTIFSUB = 1
2.ACTIFSUB.ATagParams = class=”navilink”
2.ACTIFSUB.stdWrap.wrap = | >
2.ACTIFSUB.wrapItemAndSub = <li>|</li>
3 < .2
3.wrap = <ul>|</ul>
3.ACT.wrapItemAndSub = <li class=”active”>|</li>
3.ACT.wrapItemAndSub = <li>|</li>
} |
III) CSS
======
A) Hauptstylesheet style.css
——————————————–
wirkt für alle Browser, sofern die Definitionen nicht im Spezialstyleheet (siehe III B) für Internet Explorer überschrieben werden.
Hinweis: die richtige Reihenfolge der CSS-Definitionen ist wichtig
| Code: |
/* = = = = = = = = = = ALLGEMEINE DEFINITIONEN S T A R T = = = = = = = = = = */
a:link, a:visited, a:hover {
text-decoration : none;
}/* = = = = = = = = = = ALLGEMEINE DEFINITIONEN E N D E = = = = = = = = = = */ |
| Code: |
| /* = = = = = = = = NAVIGATION ANFANG = = = = = = = = */ |
Den DIV- Container formatieren, der das Menü enthält
| Code: |
.navi {
background: url(/fileadmin/templates/images/menubg.gif) repeat-x;
width: 932px;
border-left: 2px solid white;
border-bottom: 2px solid white;
height: 30px;
font-weight: bold;
margin: 0px;
padding: 0px;
text-transform: uppercase;
} |
Grundlegende Einstellungen für die waagrechte Hauptmenüzeile
height := Höhe Hauptmenüzeile
| Code: |
#hauptnav, #hauptnav ul {
padding: 0;
margin: 0;
list-style: none;
height: 30px;
font-size: 10px;
}#hauptnav li:hover a, #hauptnav li.active a, #hauptnav li.sfhover a {
background: url(/fileadmin/templates/images/menubgaktiv.gif) repeat-x;
}#hauptnav li {
float: left;
margin: 0;
padding: 0;
} |
submenus ab Ebene1 ausblenden
border-top := Abstand und Rand oben, der einzelnen Einträge
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2
margin 30px . . . := unter das waagrechte Menü mit Höhe 30 Pixel setzen
margin . . . -1px := Positionskorrektur
| Code: |
#hauptnav li ul {
clear: both;
position: absolute;
width: 155px;
left: -999em;
margin: 30px 0 0 -1px;
padding: 0;
border-top: 2px solid #fff;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0px 0 2px 0;
} |
submenus ab Ebene1 einblenden
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2
| Code: |
#hauptnav li:hover ul, #hauptnav li.sfhover ul {
left: auto;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0 0 2px 0;
} |
wenn submenu Ebene1 eingeblendet dann untergeordnete Ebenen ausblenden
| Code: |
#hauptnav li:hover ul li ul, #hauptnav li.sfhover ul li ul {
position: absolute;
width: 155px;
left: -999em;
margin: -1px 0 0 -1px;
padding: 0;
border-top: 1px solid #fff;
} |
wenn submenu Ebene1 eingeblendet dann untergeordnete Ebene des aktiven Eintrags einblenden
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2
| Code: |
#hauptnav li ul li:hover ul, #hauptnav li ul li.sfhover ul {
left: 151px;
top: auto;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0 0 2px 0;
} |
Abstände Menüs auf 3. Ebene
margin-left := angepasst an Breite Ebene 2
margin-top := vertikale Positionskorrektur
| Code: |
#hauptnav li ul li ul {
margin-top: 5px;
margin-left: 144px;
} |
Hintergrundfarbe hovernder Link in Untermenüs hier einstellen
width := Breite Ebene 2
height := Zeilenhöhe Ebene 2
| Code: |
#hauptnav li:hover ul li a:hover, #hauptnav li.sfhover ul li a:hover {
background: #678BBF;
font-size: 11px;
height: 14px;
width: 137px;
padding: 0 0 2px 0;
} |
Formatierung horizontale Menuehauptzeile
border-right := horizontale Abstände der einzelnen Einträge
| Code: |
#hauptnav li a.navilink:link, #hauptnav li a.navilink:visited {
display : inline;
color: white;
font-size: 12px;
border-right: 2px solid white;
height: 22px;
float: left;
padding : 8px 0 0 12px;
width: 219px;
}#hauptnav li a.navilink:hover {
background: url(/fileadmin/templates/images/menubgaktiv.gif) repeat-x;
display : inline;
color: white;
font-size: 12px;
border-right: 2px solid white;
height: 22px;
float: left;
padding : 8px 0 0 12px;
width: 219px;
}#hauptnav li a.navilinkaktiv:link, #hauptnav li a.navilinkaktiv:visited, #hauptnav li a.navilinkaktiv:hover {
background: url(/fileadmin/templates/images/menubgaktiv.gif) repeat-x;
display : inline;
color: white;
height: 22px;
font-size: 12px;
border-right: 2px solid white;
float: left;
padding : 8px 0 0 12px;
width: 219px;
}
/* ENDE Formatierung horizontale Menuehauptzeile */ |
Submenuetexte Schriftformattierung
| Code: |
#hauptnav li ul li a.navilink:link, #hauptnav li ul li a.navilink:visited, #hauptnav li ul li a.navilink:hover,
#hauptnav li ul li a.navilinkaktiv:link, #hauptnav li ul li a.navilinkaktiv:visited, #hauptnav li ul li a.navilinkaktiv:hover {
padding: 0 0 2px 12px;
font-size: 11px;
font-weight: normal;
text-transform: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
height: 14px;
width: 137px;
} |
Hintergrundfarbe Menüeintrag 2. Ebene falls Mauszeiger in untergeordnetem Menü auf 3. Ebene unterwegs ist.
| Code: |
#hauptnav li ul li:hover a, #hauptnav li ul li.sfhover a {
background: #678BBF;
} |
Hintergrundfarbe Menüs
| Code: |
#hauptnav li ul li:hover ul li a, #hauptnav li ul li.sfhover ul li a {
background: #8cb2dd;
} |
| Code: |
| /* = = = = = = = = NAVIGATION ENDE = = = = = = = = */ |
III) CSS
======
A) Spezialstylesheet ie-style.css
——————————————–
Überschreibt Einstellungen aus dem Hauptstylesheet um Unterschiede, die aus der unterschiedlichen Handhabung des Boxmodels bei MS IE Browsern resultieren, zu kompensieren
| Code: |
#hauptnav li ul {
margin: 0px 0 0 -1px;
font-size: 11px;
}
#hauptnav li ul li:hover ul, #hauptnav li ul li.sfhover ul {
margin: -18px 0 0 0;
left: 150px;
font-size: 11px;
}
* html #hauptnav li ul li:hover ul, * html #hauptnav li ul li.sfhover ul {
margin: -19px 0 0 0;
} |
IV) HTML index.html
================
1) Javascript und CSS- Stylesheet im Seitenkopf einbinden
| Code: |
<script type=”text/javascript” language=”JavaScript” src=”fileadmin/js/nav.js”></script>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style.css” media=”screen” />
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/ie-style.css” media=”screen” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/css/style-print.css” media=”print” /> |
2) Menücode im body
| Code: |
<div class=”navi”>
<ul id=”hauptnav”>
<li><a href=”index.php?id=8″ onfocus=”blurLink(this);” class=”navilink”>Technische Dokumentation</a>
<ul>
<li><a href=”index.php?id=22″ onfocus=”blurLink(this);” class=”navilink”>Redaktion ></a>
<ul>
<li><a href=”index.php?id=30″ onfocus=”blurLink(this);” class=”navilink”>SPEC 1000D</a></li>
<li><a href=”index.php?id=29″ onfocus=”blurLink(this);” class=”navilink”>Online-Dokumentation</a></li>
<li><a href=”index.php?id=28″ onfocus=”blurLink(this);” class=”navilink”>Tools</a></li>
</ul></li>
<li><a href=”index.php?id=21″ onfocus=”blurLink(this);” class=”navilink”>Ersatzteilkataloge ></a>
<ul>
<li><a href=”index.php?id=32″ onfocus=”blurLink(this);” class=”navilink”>B007</a></li>
<li><a href=”index.php?id=31″ onfocus=”blurLink(this);” class=”navilink”>SPEC 2000M</a></li>
</ul></li>
<li><a href=”index.php?id=20″ onfocus=”blurLink(this);” class=”navilink”>Grafik / Design</a></li>
<li><a href=”index.php?id=19″ onfocus=”blurLink(this);” class=”navilink”>Multimedia</a></li>
<li><a href=”index.php?id=18″ onfocus=”blurLink(this);” class=”navilink”>Qualitätssicherung</a></li>
<li><a href=”index.php?id=17″ onfocus=”blurLink(this);” class=”navilink”>Tools</a></li>
</ul></li>
<li><a href=”index.php?id=7″ onfocus=”blurLink(this);” class=”navilink”>Schulung</a>
<ul>
<li><a href=”index.php?id=26″ onfocus=”blurLink(this);” class=”navilink”>CBT / CUA</a></li>
<li><a href=”index.php?id=25″ onfocus=”blurLink(this);” class=”navilink”>DUH</a></li>
<li><a href=”index.php?id=24″ onfocus=”blurLink(this);” class=”navilink”>klassisch</a></li>
<li><a href=”index.php?id=23″ onfocus=”blurLink(this);” class=”navilink”>Tools</a></li>
</ul></li>
<li><a href=”index.php?id=6″ onfocus=”blurLink(this);” class=”navilink”>Logistische Analysen</a></li>
<li><a href=”index.php?id=5″ onfocus=”blurLink(this);” class=”navilink”>Software-Entwicklung</a></li>
</ul>
</div> |
|
Verfasst am: 13.12.2007, 09:49 Titel: Dynamische Menüs mit CSS und Javascript