suche Hilfe für eine Navi – eine Vergleichbare im Google nicht gefunden –

**kami** · 10.06.2010 13:39

Hallo Forum,

benötige eine kleine Nachhilfe zum Bau einer Navi. Habe sie soweit aufgebaut. Leider weiß ich nicht mehr weiter. Den zweiten UL würde ich gerne erst bei Hover des entsprechenden links einblenden.
Zu sehen ist das unter: http://big.rkami.de/test_einfach.php
Der Code ist:

Code:

@charset "utf-8";
#Navigation {
    width: 140px;
}
#Tmenu {
    background-color: #CCCCCC;
    padding: 0.7em;
    width: 11.2em;
    position: absolute;
    height: 300px;
}
ul#Navigation {
    margin:    0;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    list-style-type: none;
    z-index: 100;
}
#Navigation li {
    background-image: url(../images/Button.jpg);
    margin-bottom: 5px;
    height: 21px;
    line-height: 21px;
}
ul#Navigation li a {
    text-decoration: none;
    display: block;
    padding-left: 10px;
    padding-top: 0px;
}
ul#Navigation li:hover {
    background-image: url(../images/Button.jpg);
    background-repeat: no-repeat;
    background-position: 10px -22px;
    background-color: #FF0000;
}
#Navigation ul {
    margin-left: -5px;
}
ul#Navigation ul li {
    background-image: none;
    height: 15px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 1px;
    margin-left: -10px;
    list-style-type: none;
    list-style-image: url(../images/listen_zeichen.gif);
    width: auto;
    background-position: 0px 0px;
}
ul#Navigation ul li a {
    font-size: 12px;
    line-height: 14px;
    display: block;
    margin-left: -10px;
}
ul#Navigation ul li:hover {
    background-image: none;
    background-color: #CCFF33;
    padding-left: -5px;
    background-position: -5px 0px;
}

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test navi</title>
<link href="css/test_einfach.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Tmenu">
  <ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>
    <ul>
      <li><a href="#Beispiel">Seite 1a</a></li>
      <li><a href="#Beispiel">Seite 1b</a></li>
      <li><a href="#Beispiel">Seite 1c</a></li>
      <li><a href="#Beispiel">Seite 1d</a></li>
    </ul>
    <li><a href="#Beispiel">Seite 2</a></li>
    <li><a href="#Beispiel">Seite 3</a></li>
    <ul>
      <li><a href="#Beispiel">Seite 3a</a></li>
      <li><a href="#Beispiel">Seite 3b</a></li>
      <li><a href="#Beispiel">Seite 3c</a></li>
    </ul>
    <li><a href="#Beispiel">Seite 4</a></li>
  </ul>
</div>
</body>
</html>

Kann ich auf Eure Hilfe rechnen

**Rinaldo** · 11.06.2010 01:12

Schon hier geschaut?

**kami** · 11.06.2010 03:41

Hallo Rinaldo,

das ist eine sehr schöne Auswahl. Habe eine gefunden: http://www.cssplay.co.uk/menus/slide_definition.html
Leider finde ich dazu keine Beschreibung zu dem Aufbau so eines Menüs.

**sejuma** · 11.06.2010 07:04

Du musst das Untermenü (den zweiten ul) innerhalb eines li setzen.
Siehe auch Vertikale Ausklapp-Navi

**kami** · 11.06.2010 10:32

Hallo sejuma,

danke für die Tipps. Leider ist das vertikale Ausklapp-Navi nicht das was ich gerne hätte.
In meinem dritten Beitrag habe ich einen Link auf meine Wunsch-Navi gegeben. Meinen Code habe ich jetzt geändert.
CSS:

Code:

@charset "utf-8";
span {
	margin-left: 0;
}
#Navigation {
	width: 400px;
}
#Tmenu {
	background-color: #CCCCCC;
	padding: 0.7em;
	width: auto;
	position: absolute;
	height: 400px;
}
ul#Navigation {
	margin:	0;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	list-style-type: none;
	width: 140px;
}
ul#Navigation li {
	background-image: url(../images/Button.jpg);
	margin-bottom: 5px;
	height: 21px;
	line-height: 21px;
}
ul#Navigation ul li {
	background-image: none;
	list-style-image: url(../images/listen_zeichen.gif);
	list-style-type: none;
	height: 12px;
	width: auto;
	margin: 0px;
	padding: 3px;
}
ul#Navigation ul li a {
	line-height: 12px;
	text-decoration: none;
	background-color: #FFCC00;
	display: block;
	margin-left: -10px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

HTML:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test navi</title>
<link href="css/test_einfach.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Tmenu">
  <ul id="Navigation">
    <li><a name="Beispiel" id="Beispiel"><span>Seite 1</span></a>
  <ul>
    <li><a href="#Beispiel">Seite 1a</a></li>
    <li><a href="#Beispiel">Seite 1b</a></li>
    <li><a href="#Beispiel">Seite 1c</a></li>
    <li><a href="#Beispiel">Seite 1d</a></li>
  </ul>  
  </li>
    <li><a href="#Beispiel">Seite 2</a></li>
    <li><a href="#Beispiel">Seite 3</a>
  <ul>
    <li><a href="#Beispiel">Seite 3a</a></li>
    <li><a href="#Beispiel">Seite 3b</a></li>
    <li><a href="#Beispiel">Seite 3c</a></li>
  </ul></li>
    <li><a href="#Beispiel">Seite 4</a></li>
  </ul>
</div>
</body>
</html>

Leider ist das Ergebniss niederschmetternd. Kannst es sehen unter: http://big.rkami.de/test_einfach.php
Die in LI eingeschlossene UL schiebt die anderen LI's nicht weiter nach unten.

**sejuma** · 11.06.2010 11:40

Wenn du dir den Quelltext deiner Demoseite ansiehst, kannst du daraus auch den HTML- und CSS-Code erkennen.

**kami** · 11.06.2010 12:46

Hallo sejuma,

beim deaktivieren des CSS-Codes sieht das alles normal aus. Sobald ich aber den LI-Hintergrund einbaue hat es diesen Effekt, daß das eingeschlossene UL den Platz nicht bekommt. Ich komme nicht dahinter woher das kommt.

**kami** · 12.06.2010 14:46

Hallo Forum,

habe doch nach einigem Suchen und Ausprobierens eine Möglichkeit, die meinen Vorstellungen entspricht, gefunden.
Ihr könnt es Euch unter http://big.rkami.de/Demo_test.php ansehen.
Das schönste dabei ist: kein Javascript dabei notwendig.

zur Startseite vom TP

Thema: suche Hilfe für eine Navi – eine Vergleichbare im Google nicht gefunden –

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

suche Hilfe für eine Navi – eine Vergleichbare im Google nicht gefunden –

Ähnliche Themen

wie kann man so eine Navi-Leiste erstellen

Wer hat eine Google-Suche auf seiner Website?

Mal wieder eine Navi....

Hilfe ! Ich werde nicht gefunden bei Google & Co

habe auch eine klasse seite gefunden ...

Aktive Benutzer

Aktive Benutzer