diedVIPs

html knowhow

Menüs für die Homepage












Aufklappbares Hover-Menü

Mit dem hier unten abgebildeten Frame binden Sie einen fremden Bewertungsframe auf Ihre Seite ein. Was Sie da sehen, ist meiner. Sie können sich eine eigene Bewertungsseite anlegen unter: webwiki.de.

Probieren Sie es aus und bewerten Sie uns.

So sieht´s aus
Quellcode
Download Button   Laden Sie die .html-Datei runter
 




Aufklappbares Klick-Menü

Mit dem hier unten abgebildeten Frame binden Sie einen fremden Bewertungsframe auf Ihre Seite ein. Was Sie da sehen, ist meiner. Sie können sich eine eigene Bewertungsseite anlegen unter: webwiki.de.

Probieren Sie es aus und bewerten Sie uns.

So sieht´s aus



Quellcode
Download Button   Laden Sie die .html-Datei runter


Horizontales Aufklapp-Menü

Mit dem hier unten abgebildeten Frame binden Sie eine eigene Seite auf Ihre Seite ein. Wenn Sie Scrolling auf YES setzen, wird die Scrollingleiste angezeigt. Auf NO nicht. Mit WIDTH bestimmen Sie die Breite des Frames und mit HEIGHT die Höhe.
So sieht´s aus
Quellcode
Download Button   Laden Sie die .html-Datei runter


Numererisches Menüe

Wenn Sie eine Website mit vielen Seiten haben, möchten Sie möglicherweise jeder Seite eine Art Nummerierung hinzufügen.
So sieht´s aus
Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.pagination {display: inline-block;}
.pagination a {color: black;float: left;padding: 8px 16px;text-decoration: none;}
</style>
<head>

<body >
<div class="pagination">
<a href="index.html">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="Impressum.html">6</a>
<a href="#">&raquo;</a>
</div>

</body>

</html>



Seitliches, feststehendes Menü

So sieht´s aus
Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.div.banner {margin: 0;font-size: 80% /*kleiner*/;font-weight: bold;line-height: 1.1;text-align: center;position: fixed;top: 2em;left: auto;width: 8.5em;right: 2em;}
div.banner p {margin: 0;padding: 0.3em 0.4em;font-family: Arial, sans-serif;background: #900;border: thin outset #900;color: white;}
div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }
div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }
</style>
<head>

<body >
<div class="banner">
<p>
<a href="#"><img style="width:30%" alt="W3C" src="../bilder/HKHlogo.png" /></a>
<a href="#">Aktivitäten</a>
<a href="#">Tech.&nbsp;Berichte</a>
<a href="#">Seiten Index</a>
<a href="#">übersetzungen</a>
<a href="#">Software</a>
<a href="#">Suche</a>
</div>
</body>

</html>



Dreh-Menü

So sieht´s aus
Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
Hier nichts.
</style>
<head>

<body >
<script type="text/javascript">
eye.isVertical = 0; //0=vertical or 1=horizontal]
eye.x = 500; // Abstand von links
eye.y = 100; // Abstand von oben
eye.w = 200; // Größe der Textfelder
eye.h = 100; // height
eye.r = 200; // menu's radius
eye.v = 100; // Drehgeschwindigkeit
eye.s = 5; // Zusammendrücken)
eye.color = '#ffffff'; // normal text color
eye.colorover = '#ffffff'; // mouseover text color
eye.backgroundcolor = '#0099ff'; // normal background color
eye.backgroundcolorover = '#990000'; // mouseover background color
eye.bordercolor = '#000000'; //border color
eye.fontsize = 22; // font size
eye.fontfamily = 'Arial'; //font family
if (document.getElementById){
document.write('<div id="spinanchor" style="height:'+eval(eye.h+20)+'"></div>')
eye.anchor=document.getElementById('spinanchor')
eye.spinmenu();
eye.x+=getposOffset(eye.anchor, "left") //relatively position it
eye.y+=getposOffset(eye.anchor, "top") //relatively position it

//menuitem: eye.spinmenuitem(text, link, target)
eye.spinmenuitem("Startseite","../index.html");
eye.spinmenuitem("WebInfo","#");
eye.spinmenuitem("SoftInfo","#");
eye.spinmenuitem("Anwendungen","#");
eye.spinmenuitem("META-tags","#");
eye.spinmenuitem("CSS-tags","#");
eye.spinmenuclose();
}
</script>

</body>

</html>










Kontakt    Datenschutz    Impressum