mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 10.12.2016 04:31 Benutzername: Passwort: Auto-Login

Thema: Probleme beim umgestalten eines Menüs vom 03.07.2006


Neues Thema eröffnen   Neue Antwort erstellen 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 01:43
Titel

Probleme beim umgestalten eines Menüs

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
chrikle

Dabei seit: 02.05.2002
Ort: NRW
Alter: 40
Geschlecht: Männlich
Verfasst Mo 03.07.2006 05:54
Titel

Re: Probleme beim umgestalten eines Menüs

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
dsool
Threadersteller

Dabei seit: 03.07.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 03.07.2006 11:44
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
 
Ähnliche Themen dhtml menüs
Klappende Menüs
[JavaScript] 2 Dropdown Menüs
Pulldown-Menüs seitenverkehrt
(Gelöst) - Joomla - Menüs
Cinema 4D - Menüs verloren
Neues Thema eröffnen   Neue Antwort erstellen
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.