|
|
TECHNIKALIA
Pływające menu
Poniżej szablon strony WWW, z "pływającym" menu, takim, jakie możecie
zobaczyć po lewej.
<html>
<head>
<title>Tu
wpisz tytuł strony</title>
<meta
name="Author" content="Tu wpisz
autora
strony">
<meta
name="description" content="Tu wpisz
opis
strony">
<meta
name="keywords" content="Tu, wpisuj,
słowa, kluczowe">
<meta
name="revisit" content="14 days">
<meta
http-equiv="content-type"
content="text/html;
charset=ISO-8859-2">
<script
language="JavaScript">
<!--
Ten skrypt będzie niewidoczny dla starszych przeglądarek.
if
(parent.location != window.location) {
parent.location
= window.location;
}
//
koniec skryptu. -->
</script>
<script
language="JavaScript">
<!-- This script and
many more are available free online at -->
<!-- The JavaScript
Source!! http://javascript.internet.com -->
<!-- Begin
function setVariables() {
if (navigator.appName ==
"Opera") {
v=".top=";
dS="document.";
sD="";
y="window.pageYOffset";
}
else {
v=".pixelTop=";
dS="";
sD=".style";
y="document.body.scrollTop";
}
}
function checkLocation() {
object="object1";
yy=eval(y);
eval(dS+object+sD+v+yy);
setTimeout("checkLocation()",1000);
}
// End -->
</script>
</head>
<body
onload="setVariables();
checkLocation()" style="margin:
0pt;">
<table
style="width: 100%; text-align: left;" border="1" cellpadding="8"
cellspacing="0">
<tbody>
<tr>
<td
style="vertical-align: top; width: 180px;">Logo/tytuł strony<br>
</td>
<td
style="vertical-align: top;">Tu
wstaw ścieżkę nawigacyjną<br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; width: 180px;">
<div
id="object1" style="position: relative; left: 5px; top: 0px; z-index:
2;">
<table
style="position: fixed; width: 100%;
text-align: left;" border="1"
cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td
style="vertical-align: top;">Łącze
menu 1<br>
</td>
</tr>
<tr>
<td
style="vertical-align: top;">Łącze
menu 2<br>
</td>
</tr>
<tr>
<td
style="vertical-align: top;">Łącze
menu 3</td>
</tr>
</tbody>
</table>
</div>
</td>
<td
style="vertical-align: top;">
Tu
wpisz/wstaw treść strony
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Słowo objaśnienia:
Kod wyróżniony na brązowo
potrzebny jest, by menu działało pod Internet Explorerem:
- W sekcji <head></head>
definiowane są funkcje poruszajace menu.
- W znaczniku <body>
funkcje te są uruchamiane (w momencie ładowania strony)
- Tabelka menu ujmowana jest w element <div></div>, który
bedzie przesuwany przez te funkcje (a tabelka menu wraz z nim).
Natomiat
pozostałym przeglądarkom wystarczy dodanie w tabelce menu wyróżnionego na czerwono
atrybutu:
position: fixed;
Drugie rozwiązanie jest oczywiście znacznie prostsze i bardziej
eleganckie, niestety Microsoft kontroluje większość rynku przeglądarek,
stąd też potrzebny jest ten dość długi skrypt.
Fragment kodu (warunku if)
przeznaczony dla przeglądarki Opera
właściwie nic nie robi. Przeglądarka ta stara sie być zgodna ze
standardami Microsoftu i z uniwersalnym standardem do którego stosują
się pozostałe przeglądarki, dlatego trzeba Operę "wpuścić w maliny", by
nie próbowała jednocześnie wykonywać skryptu dla Explorera i używać
atrybutu position:
fixed;
Sławomir Dzieniszewski
|