✔ Horizontales Menü (ohne JS/htc) ?

Status
Nicht offen für weitere Antworten.
Ich glaub da kommt viel arbeit auf mich zu:

So sieht es momentan aus, leider nur in IE7 und Mozilla erträglich:
Menu


Was ich schonmal nicht verstehe ist, warum da 1 Pixel mehr Rahmen um die Links angezeigt wird, obwohl ich nur 1px definiert hab. Naja egal, ich geh ins Kino ... schönes WE den Rest.
 
Zuletzt bearbeitet:
Da ich am Abend etwas Luft hatte (und heute der 2. Advent ist ;)), hab ich mich mal drangesetzt die entsprechende Grafik zu erzeugen (7*7px mit orangenem Hintergrund u. dunkelgrauem Rahmen) und das Stylesheet zu überarbeiten, damit die Links der ersten Menüebene nun ein Hintergrundbild als Bullet-Zeichen besitzen. Bitte nicht erschrecken, der CSS-Code weicht jetzt von deiner Fassung "etwas" ab :)

Im Zuge dessen wurde auch gleich der Darstellungsfehler im IE behoben.

Hierbei handelte es sich nicht, wie von dir vermutet, um eine doppelte Rahmendicke, sondern um eine Lücke zwischen den Links, durch die der schwarze Seitenhintergrund sichtbar wurde. Der Grund hierfür war die Schriftformatierung (font:8pt verdana) für die Links, die ich nun für das DIV #menu definiert habe.

Das Demo enthält zusätzlich eine JS-gestützte Variante, damit du das Dropdown-Menü in den IE-Versionen <7 zumindest mal betrachten kannst. ;)
 

Anhänge

  • 27314attachment.zip
    2,2 KB · Aufrufe: 21
Guten Morgen ... Danke für deine Mühe, werd ich mir gleich mal anschaun.

Aber erstma muss ich was zu Mittag machen.
 
Das sieht schonmal nicht schlecht aus. Vielen Dank.

Ich werd meins erstmal jetzt anpassen, da ich es ja sonst auch nicht lerne wenn ich es einfach kopiere. Nochmals Danke und ich meld mich später sicherlich noch einmal ^^ .
 
Klar, wenn du den Quellcode "nur" kopierst, wäre der Lerneffekt gleich null.

So hast du aber nun eine Vorlage zum Experimentieren und Studieren, die zudem in den unterschiedlichen Browsern einheitlich dargestellt wird.
 
Hab eben etwas weiter gemacht. Es ist vollbracht ^^ .

Ich hab mir die Menus auf http://www.cssplay.co.uk mal genauer angeschaut und habe jetzt mit Hilfe von Conditonal Comments auch für ältere InternetExplorer Versionen funktionfähig gemacht.

Ich danke auf jeden Fall erstmal Michael, der mit mit guten Informationsquellen und eigenen guten Ideen echt super geholfen hatt.

Später werde ich mal hier alles reinstellen, ich will aber erstmal nochmal alles durchschauen, was eventuell überflüssig ist, weil es doch jede Menge an Code geworden ist.
 
HTML
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
  <head>
    <title>menu</title>
    <link rel="stylesheet" media="all" type="text/css" href="menu.css">
    <!--[if lte IE 6]>
	<link rel="stylesheet" media="all" type="text/css" href="menu_ie.css" />
	<![endif]-->
  </head>
  <body>
    <div id="menu">
      <ul id="nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li>
          <a href="#" class="hide">Link 3 »</a>
          <!--[if lte IE 6]>
          <a href="#" style="line-height:12px">Link 3 »
          <table><tr><td>
	  <![endif]-->
          <ul>
            <li><a href="#">Link 3.1</a></li>
            <li><a href="#">Link 3.2</a></li>
          </ul>
          <!--[if lte IE 6]>
          <td></tr></table></a>
          <![endif]-->
        </li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li>
          <a href="#" class="hide">Link 6 »</a>
          <!--[if lte IE 6]>
          <a href="#" style="line-height:12px">Link 6 »
          <table><tr><td>
		  <![endif]-->
          <ul>
            <li><a href="#">Link 6.1</a></li>
            <li><a href="#">Link 6.2</a></li>
            <li>
              <a class="hide" href="#">Link 6.3 »</a>
              <!--[if lte IE 6]>
              <a href="#" style="line-height:12px">Link 6.3 »
              <table><tr><td>
		      <![endif]-->
          	  <ul>
                <li><a href="#">Link 6.3.1</a></li>
            	<li><a href="#">Link 6.3.2</a></li>
          	  </ul>
          	  <!--[if lte IE 6]>
		      </td></tr></table></a>
		      <![endif]-->
        	</li>
          </ul>
          <!--[if lte IE 6]>
		  </td></tr></table></a>
		  <![endif]-->
        </li>
      </ul>
    </div>
  </body>
</html>

menu.css
HTML: 
body {
  background: #000;
  margin: 0px;
}

#menu {
  position: absolute;
  top: 100px;
  left: 75px;
  z-index: 2;
  font: 8pt verdana;
}

#nav,
#nav ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  float: left;
  width: 106px;
}

#nav li {
  position: relative;
  float: left;
  line-height: 16px;
  width: 106px;
}
#nav li ul {
  position: absolute;
  left: -999px;
  margin-left: 107px;
  margin-top: -20px;
}

#nav a:link,
#nav a:visited {
  color: #fff;
  font: 8pt verdana;
  text-decoration:none;
  border-bottom: 1px solid #000;
  display:block;
}

#nav li a:link,
#nav li a:visited {
  background: #44444f url(dot.png) 5px 50% no-repeat;
  padding: 3px 3px 3px 16px;
  width: 106px; /* IE 5.01 & 5.5 */
  voice-family:"\"}\"";  /* ab hier ignoriert IE 5.01 & 5.5 nachfolgende Deklarationen */
  voice-family: inherit;
  width: 87px;
}

#nav li a:hover {
  background: #55555f url(dot.png) 5px 50% no-repeat;
}

#nav ul li a:link,
#nav ul li a:visited,
#nav ul ul li a:link,
#nav ul ul li a:visited {
  background: #44444f none;
  padding: 3px;
  width: 106px; /* IE 5.01 & 5.5 */
  voice-family:"\"}\"";  /* ab hier ignoriert IE 5.01 & 5.5 nachfolgende Deklarationen */
  voice-family: inherit;
  width: 100px;
}

#menu ul :hover ul,
#menu ul :hover ul :hover ul {
  left: auto;
}

#menu ul ul,
#menu ul ul ul,
#menu ul :hover ul ul {
  left: -999px;
}

menu_ie.css
HTML: 
#nav table {
  border-collapse:collapse;
  border:0;
  margin:0;
  padding:0;
}
#nav li ul {
  position: absolute;
  left: -999px;
  margin-left: 90px;
  margin-top: -16px;
}

#nav li a.hide,
#nav li a:visited.hide {
  display:none;
}

#nav li a:hover ul li a.hide {
  display:none;
}

#nav ul li a:link,
#nav ul li a:visited,
#nav ul ul li a:link,
#nav ul ul li a:visited {
  background: #44444f none;
  padding: 3px;
  width: 106px; /* IE 5.01 & 5.5 */
  voice-family:"\"}\"";  /* ab hier ignoriert IE 5.01 & 5.5 nachfolgende Deklarationen */
  voice-family: inherit;
  width: 87px;
}

Danke nochmal Michael ;)
 
Hat Spaß gemacht, dir bei der Entwicklung beratend zur Seite zu stehen, und das Ergebnis sieht doch richtig lecker aus ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück