Suche

[Franky]

Hier mal ein kleines aber feines Navi-Menü, das man komplett in einen Block einbauen kann. Wenn man den Blocks noch Sprachen zuordnet, kann man auch eine feine mehrsprachige Navigation machen.

http://www.danielkay.de/diverses/menu.htm

Hier der Code (kann leicht angepasst werden):

Code Auswählen Erweitern

<style>
/* ======================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_4level.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
========================================================= */
.menu { margin: 4px; height: 100px; font-size: 8pt; font-family: verdana; }
.menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 6em; }
.menu li { background-color: #f4f4f4; float: left; }
.menu li.sub { background-color: #f4f4f4; }
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
.menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 11em; color: #2f385f; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 5px; }
* html .menu a, * html .menu a:visited { width: 11em; }
* html .menu a:hover { color: #2F385F; background-color: #ccffff; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { color: #2F385F; background-color: #ccffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { color: #2F385F; background-color: #ccffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 7em; background-color: transparent; }
.menu li:hover > ul { visibility: visible; }
.menu ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }

</style>

<div class="menu">
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="#">
<b>&#187;</b>Menu<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="http://www.deineurl.de/modules.php?name=hik-kurzbesch">Über uns</a>
</li>
<li>
<a href="http://www.deineurl.de/modules.php?name=E3">e3</a>
</li>
<li>
<a href="http://www.deineurl.de/modules.php?name=iso-d">ISO-Zertifikat</a>
</li>
<li>
<a href="http://www.deineurl.de/modules.php?name=jobs">Karriere</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">
<b>&#187;</b>Kontakt<!--[if IE 7]>
<!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
<li>
<a href="http://www.deineurl.de/modules.php?name=anschrift">Anschrift</a>
</li>
<li>
<a href="http://www.deineurl.de/modules.php?name=a-partner">Kontakt</a>
</li>
<li>
<a href="http://www.deineurl.de/modules.php?name=anfahrt">Anfahrt</a>
</li>
<li>
<a href="http://www.deineurl.de/modules.php?name=impressum">Impressum</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="modules.php?name=news">News</a>
</li>
</ul>
</div>

ciao
Frank 

[goodssale]

hallo franky,

super danke für das menü, nur habe ich kleines problem damit.

habe es mit seiten bestückt, doch nun schaut es aus den block raus.
ich habe es einmal als html block gemacht und einmal als block datei
abgespeichert doch bei beiden varianten past es nicht in den block.

habe mal einen screenshot in den anhang.
im firefox geht es doch im internet explorer hängt es unten raus.

grüße heinz

[Franky]

du musst es natürlich an deine Bedürfnisse anpassen. Schau mal auf den Part mit den CSS-Angaben.

Also das hier:

Code Auswählen Erweitern

========================================================= */
.menu { margin: 4px; height: 100px; font-size: 8pt; font-family: verdana; }

Spiel da mal mit "height:", das ist die Höhe des Menüs. Stell mal 150 oder 200 ein, dann passts auch.

ciao

[goodssale]

hi franky,

ja so geht es, danke.

grüße heinz