FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Zur Registrierung

Thema: Probleme beim umgestalten eines Menüs vom 03.07.2006

	MGi Foren-Übersicht -> Allgemeines - Nonprint -> Probleme beim umgestalten eines Menüs

Autor

Nachricht

dsool
Threadersteller

Dabei seit: 03.07.2006
Ort: -
Alter: -
Geschlecht: -

Verfasst Mo 03.07.2006 02:43
Titel

Probleme beim umgestalten eines Menüs

Als Grundlage habe ich das Tutorial von A List Apart.

Code:

body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border-bottom: 0px none;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

Code:

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

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>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>

</ul>
</body>
</html>

Momentan sind alle Ebenen vertikal angeordnet. Ich möchte es allerdings soweit abändern das die zweite Menüebene horizontal angeordnet ist und die dritte Ebene dann wiederum vertikal unter den horizontalen Menüpunkten erscheint.

Ich habe keine große Erfahrung mit html/css und entdecke daher leider nicht den Fehler warum ein einfaches abändern von den <li> Tags nach <ul> nicht den gewünschten Effekt mit sich bringt.

BsP:

Code:

<li><a href="#">About</a>
<ul>
<ul><a href="#">History</a></ul>
<ul><a href="#">Team</a></ul>
<li><a href="#">Offices</a></li>
</ul>
</li>

Es sollte dann in etwa so aussehen:

Menu1

Menu2 ----> Submenu1 | Submenu2 | Submenu3
. . . . . . . . . . . . . . . . . . SubSubMenu2-1
. . . . . . . . . . . . . . . . . . SubSubMenu2-2
. . . . . . . . . . . . . . . . . . SubSubMenu2-3

Bin für jegliche Art von Hilfe dankbar Lächel

chrikle

Dabei seit: 02.05.2002
Ort: NRW
Alter: 47
Geschlecht: Männlich

Verfasst Mo 03.07.2006 06:54
Titel

Re: Probleme beim umgestalten eines Menüs

Moin!

dsool hat geschrieben:

Ich habe keine große Erfahrung mit html/css und entdecke daher leider nicht den Fehler warum ein einfaches abändern von den <li> Tags nach <ul> nicht den gewünschten Effekt mit sich bringt.

BsP:

Code:

<li><a href="#">About</a>
<ul>
<ul><a href="#">History</a></ul>
<ul><a href="#">Team</a></ul>
<li><a href="#">Offices</a></li>
</ul>
</li>

Das liegt daran, das du keine Liste mehr hast, sondern ein TAG-Wirrwarr *zwinker*

Hier etwas Lektüre zum lesen.
Das sollte dir das Problem verständlich machen *zwinker*

Gruß
Chris

dsool
Threadersteller

Dabei seit: 03.07.2006
Ort: -
Alter: -
Geschlecht: -

Verfasst Mo 03.07.2006 12:44
Titel

Stimmt, da ist etwas durcheinander geraten *zwinker*

Habe jetzt mal die CSS Datei auskommentiert und es dann so getestet wie die Struktur (Siehe Eingangspost) sein sollte.

Code:

<li><a href="#">Menu2</a>
<ul>
<li><a href="#">Submenu1</a></li>
</ul>
<ul>
<li><a href="#">Submenu2</a></li>
<ul>
<li><a href="#">SubSubMenu2-1</a></li>
<li><a href="#">SubSubMenu2-2</a></li>
<li><a href="#">SubSubMenu2-3</a></li>
</ul>
</ul>
<ul>
<li><a href="#">Submenu3</a></li>
</ul>
</li>

Ohne CSS ist die Struktur korrekt. Mit CSS werden SubMenu 1 und 2 nicht angezeigt? Und die SubSubMenus werden direkt angezeigt. Also zu früh.

Kann es sein, dass die CSS nun an meine Wünsche angepasst werden muss?


	MGi Foren-Übersicht -> Allgemeines - Nonprint

Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.