DropDown Automatic Menü
Scripte > Menü Navigation
Ein ganz einfaches Drop'n'Down Menü auf CSS-Basis
Das ist ein einfaches horizontales Menü mit einem Image-Hintergrundbalken. Das Menü selbst benötigt auch Image-Dateien, die im Unterverzeichnis "img" für das Menü hinterlegt sind. Die Anpassung des Menüs an die Homepage erfolgt dann in der Datei "menu_style.css" im Hauptverzeichnis und/oder den Austausch der Image-Dateien.
Es sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per
<?php include "...."; ?> , um Textänderungen des Menüs nur in einer Datei durchführen zu müssen. Dann muss die ausführende Datei die Dateiendung .php aufweisen.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
x runter geladen
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj27_0/menu_style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj27_0/menu_inc.html"; ?>
alternative Einbindung:
<div style="z-index:99999;">
<ul class="Obj27">
<li class="top"><a href="#" class="top_link"><span>Hauptmenü 1</span></a></li><li class="top"><a href="#" class="top_link"><span>Hauptmenü 2 langer Text</span></a>
<ul class="sub">
<li><a href="#">Untermenü 1.1 langer Text</a></li><li><a href="#">Untermenü 1.2</a></li><li><a href="#">Untermenü 1.3</a></li><li><a href="#">Untermenü 1.4</a></li><li><a href="#">Untermenü 1.5</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Hauptmenü 3</span></a>
<ul class="sub">
<li><a href="#">Untermenü 3.1 langer Text</a></li><li><a href="#">Untermenü 3.2</a></li><li><a href="#">Untermenü 3.3</a></li><li><a href="#">Untermenü 3.4</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Hauptmenü 4</span></a></li><li class="top"><a href="#" class="top_link"><span>Hauptmenü 5</span></a></li>
</ul>
</div>
Code Datei "menu_style.css"
.Obj27 {
padding: 0 0 0 32px;margin: 0;list-style: none;height: 40px;background: #fff url(img/menu_background.gif) repeat-x;position: relative;font-family: arial, verdana, sans-serif;}
.Obj27 li.top { display: block; float: left; position: relative; }
.Obj27 li a.top_link {
display: block;float: left;height: 40px;line-height: 33px;color: #bbb;text-decoration: none;font-size: 11px;font-weight: bold;padding: 0 0 0 12px;cursor: pointer;}
.Obj27 li a.top_link span {
float: left;font-weight: bold;display: block;padding: 0 24px 0 12px;height: 40px;}
.Obj27 li a.top_link span.down {
float: left;display: block;padding: 0 24px 0 12px;height: 40px;background: url(img/menu_arrow-down.gif) no-repeat right top;}
.Obj27 li a.top_link:hover { color: #000; background: url(img/menu_button-b.gif) no-repeat; }
.Obj27 li a.top_link:hover span { background: url(img/menu_button-b.gif) no-repeat right top; }
.Obj27 li a.top_link:hover span.down { background: url(img/menu_button-a.gif) no-repeat right top; }
.Obj27 li:hover > a.top_link { color: #000; background: url(img/menu_button-b.gif) no-repeat; }
.Obj27 li:hover > a.top_link span { background: url(img/menu_button-b.gif) no-repeat right top; }
.Obj27 li:hover > a.top_link span.down { background: url(img/menu_button-a.gif) no-repeat right top; }
.Obj27 table { border-collapse: collapse; width: 0; height: 0; position: absolute; top: 0; left: 0; }
.Obj27 a:hover { visibility: visible; }
.Obj27 li:hover { position: relative; z-index: 200; }
.Obj27 ul,
.Obj27 :hover ul ul,
.Obj27 :hover ul :hover ul ul,
.Obj27 :hover ul :hover ul :hover ul ul,
.Obj27 :hover ul :hover ul :hover ul :hover ul ul {
position: absolute;left: -9999px;top: -9999px;width: 0;height: 0;margin: 0;padding: 0;list-style: none;}
.Obj27 :hover ul.sub {
left: 2px;top: 40px;right: 2px;background: #fff;padding: 3px 0;border: 1px solid #999999;white-space: nowrap;width: 200px;height: auto;}
.Obj27 :hover ul.sub li { display: block; height: 20px; position: relative; float: left; width: 250px; }
.Obj27 :hover ul.sub li a {
font-weight: normal;display: block;font-size: 11px;height: 20px;width: 192px;line-height: 20px;text-indent: 5px;color: #000;text-decoration: none;border: 3px solid #fff;border-width: 0 0 0 3px;}
.Obj27 :hover ul.sub li a.fly { background: #fff url(img/menu_arrow-right.gif) 80px 7px no-repeat; }
.Obj27 :hover ul.sub li a:hover { background: #999999; color: #fff; }
.Obj27 :hover ul.sub li a.fly:hover {
background: #999999 url(img/menu_arrow-over.gif) 80px 7px no-repeat;color: #fff;}
.Obj27 :hover ul li:hover > a.fly {
background: #999999 url(img/menu_arrow-over.gif) 80px 7px no-repeat;color: #fff;}
.Obj27 :hover ul :hover ul,
.Obj27 :hover ul :hover ul :hover ul,
.Obj27 :hover ul :hover ul :hover ul :hover ul,
.Obj27 :hover ul :hover ul :hover ul :hover ul :hover ul {
left: 90px;top: -4px;background: #fff;padding: 3px 0;border: 1px solid 999999;white-space: nowrap;width: 93px;z-index: 200;height: auto;}
Feedbacks zu ""
Es gibt noch keine Rezension.
Vielen Dank für Dein Feedback.