Floating Box als Menü

Beitrag von **Hape** » Sa 23. Mai 2020, 14:49

Hier der CSS-Teil:

<style type="text/css">
<!--

body {
margin:0px;
padding:0px;
background-color: #FFFFFF;
font-family:Verdana,Arial,Helvetica;
color:#000000;
overflow-y:scroll;
}


#floatingBox {
position:absolute;
visibility:hidden;
width:100%;
border:none;
text-align:center;
}

#floatingContent {

font-family:Verdana,sans-serif;
font-size:12px;
color:#FFFFFF;
width:100%;
border: none;
text-align:center;
padding:4px;
}


/* für evtl. Textlinks innerhalb floatingContent */

#floatingContent a:link {
font-family:Verdana,sans-serif;
color:#0000FF;
font-size:12px;
text-decoration: none;
}

#floatingContent a:visited {
font-family:Verdana,sans-serif;
color:#000000;
font-size:12px;
text-decoration: none;
}

#floatingContent a:hover {
font-family:Verdana,sans-serif;
color:#FFFFFF;
font-size:12px;
text-decoration: none;
}

/* Formatierung der Tabelle */
table.liste {
        border: 3px solid #0080FF;
        background-color:#FFFFFF;
        }
table.liste td {
        padding: 2px;
        color: black;
        font-size:12px;
        }
table.liste tr.d0 td {
        background-color: #FFFFFF;
}
table.liste tr.d1 td {
        background-color: #E6F2AC;
}

-->

</style>

Hier das Script:

Code: Alles auswählen

<script type="text/javascript" language="JavaScript">
<!--
<!-- zur Browserunterscheidung -->
(document.getElementById) ? dom = true : dom = false;

function Ausblenden() {
  if (dom) {document.getElementById("floatingBox").style.visibility='hidden';}
  if (document.layers) {document.layers["floatingBox"].visibility='hide';}
  }
function Einblenden() {
  if (dom) {document.getElementById("floatingBox").style.visibility='visible';}
  if (document.layers) {document.layers["floatingBox"].visibility='show';}
  Positionieren();
  }
function Positionieren() {

if (dom && !document.all)
{
document.getElementById("floatingBox").style.top = window.pageYOffset ;
document.getElementById("floatingBox").style.left = window.pageXOffset;
}

if (document.layers)
{
document.layers["floatingBox"].top = window.pageYOffset;
document.layers["floatingBox"].left = window.pageXOffset;
}

if (document.all) {
document.all["floatingBox"].style.top = document.body.scrollTop ;
document.all["floatingBox"].style.left = document.body.scrollLeft;
}
// aktualisiert die Zentrierung bei Gr&ouml;&szlig;en&auml;nderung des Fensters + scrollen
window.setTimeout("Positionieren()", 10);
onResize="window.location.href = window.location.href"
}

setTimeout("Einblenden()",1000);

//-->
</script>

Hier der Code für die Darstellung

Code: Alles auswählen

<!-- Anfang DIV 100% Breite -->
<div id="floatingBox" style="width:100%">
<!--Anfang Inhalt-->
<div id="floatingContent">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center">

<table class="liste"  width="850" border="0" cellspacing="0" cellpadding="3">

<tr><td height="25" align="left"><a href="URL zur Homepage" rel="nofollow">Homepage-Forum</a></td><td><a href="URL zur Homepage" rel="nofollow">Meine Webseiten</a></td><td><a href="URL zur Homepage" rel="nofollow">Mein Banner</a></td><td><a href="URL zur Homepage" rel="nofollow">Tell a Friend</a></td><td><a href="URL zur Homepage" rel="nofollow">Kontakt</a></td><td><a href="URL zur Homepage" rel="nofollow">Impressum</a></td><td align="left"><a href="URL zur Homepage" rel="nofollow">G&auml;stebuch</a></td><td align="left"><a href="URL zur Homepage" rel="nofollow">Linkliste</a>
</td><td></tr>
</table>
</td></tr></table>
</div>
<!--Ende Inhalt -->
</div>
<!-- Ende DIV  100% Breite -->
<!-- Anfang Seiteninhalt -->

Hier eine Demoseite: https://hapes-javascript-demo-page.hpag ... g-box.html