DropDown Automatic Menü - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.
Download Button
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;
}

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt