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.

Downloads:

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<?php include "wsX5Obj/Obj27_0/menu_inc.html"; ?>

alternative Einbindung:

<ul class="Obj27">

<li class="top"><a href="#" class="top_link">Hauptmenü 1</a></li>
<li class="top"><a href="#" class="top_link">Hauptmenü 2 langer Text</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">Hauptmenü 3</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">Hauptmenü 4</a></li>
<li class="top"><a href="#" class="top_link">Hauptmenü 5</a></li>

</ul>

</div>

Nach dem <BODY> Tag

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 ""

Kein Kommentar

Vielen Dank für Dein Feedback.