CSS: Dropdown Menü

C

CoiBoi

0
Hey Leute,

ich würde gerne ein Dropdown Menü in meine Seite per CSS einbauen so wie hier: Stu Nicholls | CSSplay | A sliding definition list menu

Allerdings ist der Seitenquelltext auf diese Weise zu verstehen recht schwer und bei mir wills auf biegen und brechen net funktionieren. Deswegen hab ich die Frage ob jmd vil n gutes Tutorial kennt wo sowas gescheit erklärt wird. Über Google hab ich auch kein gescheites Tutorial gefunden und schon garnet eins über n Menü wie ich es haben will.

Danke schonmal im Voraus!

PS: mein Englisch ist nicht so der burner also lieber n Tutorial auf deutsch ;)
 
Du solltest Dir generell erst mal HTML und CSS aneignen, bevor Du Dich mit Drop-Down Animationen befasst. Andernfalls wirst Du recht schnell an Deine Grenzen stoßen.

Sieh mal hier:
Tips und Tricks
 
ja also wenn ich mir noch net html und css angeeignet hätte wäre es ja blöd nach nem dropdownmenu zu fragen oder?? naja aber danke für den link ;)
 
CoiBoi hat gesagt.:
ja also wenn ich mir noch net html und css angeeignet hätte wäre es ja blöd nach nem dropdownmenu zu fragen oder??
Zum Vergrößern anklicken....
Nein, es ist genau andersherum:
Wenn jemand behauptet CSS zu können, dann wird er an einem Dropdown-Menü nicht scheitern.

Du hast in Deinem initialen Posting geschrieben Du kannst den Sourcecode nicht lesen. Dies impliziert, dass Du kein HTML/CSS kannst.

Im Nachhinein zu behaupten dies doch zu können steht in einem irrationalen Verhältnis Deiner initialen Aussage:
Allerdings ist der Seitenquelltext auf diese Weise zu verstehen recht schwer und bei mir wills auf biegen und brechen net funktionieren
Zum Vergrößern anklicken....
Wie weit bist Du denn mit dem Dropdown-Menü? Wo hakt's denn?
 
Code: 
/* ================================================================ 
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/drop_definition.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#dlmenu {height:10em; margin:20px 0 300px 10px;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}

Code: 
<div id="dlmenu">
  <ul id="menu">
    <li>
      <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
      <dl class="gallery">
        <dt>
          <a href="../menu/index.html">DEMOS</a>
        </dt>
        <dd>
          <a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a>
        </dd>
        <dd>
          <a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a>
        </dd>
        <dd>
          <a href="../menu/form.html" title="Styling forms">styled form</a>
        </dd>
        <dd>
          <a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a>
        </dd>
        <dd>
          <a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a>
        </dd>
        <dd>
          <a href="../menu/old_master.html" title="Image Map for detailed information">image map</a>
        </dd>
        <dd>
          <a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a>
        </dd>
        <dd>
          <a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a>
        </dd>
        <dd>
          <a href="../menu/em_images.html" title="em size images compared">em sized images</a>
        </dd>
      </dl>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
      <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
      <dl class="gallery">
        <dt>
          <a href="index.html">MENUS</a>
        </dt>
        <dd>
          <a href="spies.html" title="a coded list of spies">spies menu</a>
        </dd>
        <dd>
          <a href="vertical.html" title="a horizontal vertical menu">vertical menu</a>
        </dd>
        <dd>
          <a href="expand.html" title="an enlarging unordered list">enlarging list</a>
        </dd>
        <dd>
          <a href="enlarge.html" title="an unordered list with link images">link images</a>
        </dd>
        <dd>
          <a href="cross.html" title="non-rectangular links">non-rectangular links</a>
        </dd>
        <dd>
          <a href="jigsaw.html" title="jigsaw links">jigsaw links</a>
        </dd>
        <dd>
          <a href="circles.html" title="circular links">circular links</a>
        </dd>
      </dl>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
      <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
      <dl class="gallery">
        <dt>
          <a href="../layouts/index.html">LAYOUTS</a>
        </dt>
        <dd>
          <a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a>
        </dd>
        <dd>
          <a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a>
        </dd>
        <dd>
          <a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a>
        </dd>
        <dd>
          <a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a>
        </dd>
        <dd>
          <a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a>
        </dd>
      </dl>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
      <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
      <dl class="gallery">
        <dt>
          <a href="../mozilla/index.html">MOZILLA</a>
        </dt>
        <dd>
          <a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a>
        </dd>
        <dd>
          <a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a>
        </dd>
        <dd>
          <a href="../mozilla/content.html" title="Using content:">content:</a>
        </dd>
        <dd>
          <a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a>
        </dd>
        <dd>
          <a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a>
        </dd>
        <dd>
          <a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a>
        </dd>
        <dd>
          <a href="../mozilla/target.html" title="Target Practise">target practise</a>
        </dd>
      </dl>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
  </ul>
</div>

Wo liegt das Problem?
 
@Hackse

junge junge, ich geb zu ich bin noch nicht lange mit html und css vertraut. dennoch verstehe ich schon worum es geht. ich wollts halt n bissel einfacher haben mittels eines tutorials (wenns nähmlich erklärt wird versteht man es eben besser. genau so wie beim lernen einer sportart ist es einfacher es irgentwo beibringen zu lassen als es abzugucken).
und bisher dachte ich dass ich in diesem forum nur nette und hilfsbereite menschen treffe. tja hab mich wohl geirrt.

PS: es ist meines erachtens sehr kindisch leute dumm darzustellen und anzumachen weil sie eine frage/bitte haben...

jetzt is es halt bei mir soweit dass ich dropdownmenüs machen will weil das genau in meinem schwierigkeitsgrad ist so wie ich es brauche. also plz schreib net so n aggressiven kram in n forum. wenn du streit willst dann geh lieber in ne kneipe und top dich da mal so richtig schön aus, k?

PPS: deine eigenen angaben
Motivation
Wissen teilen - is n Witz oder??

Hochachtungsvoll CoiBoi
 
Zuletzt bearbeitet:
So wenn ich die Frage erneut stellen dürfte, dass auch wirklich alle sie verstanden haben:

Ich würde gerne ein Dropdown Menü in meine Seite per CSS einbauen so wie hier: Stu Nicholls | CSSplay | A sliding definition list menu

Allerdings ist der Seitenquelltext auf diese Weise zu verstehen recht schwer und bei mir wills auf biegen und brechen net funktionieren. Deswegen hab ich die Frage ob jmd vil n gutes Tutorial kennt wo sowas gescheit erklärt wird. Über Google hab ich auch kein gescheites Tutorial gefunden und schon garnet eins über n Menü wie ich es haben will.

Danke schonmal im Voraus!

PS: mein Englisch ist nicht so der burner also lieber n Tutorial auf deutsch
 
CoiBoi hat gesagt.:
PPS: deine eigenen angaben
Motivation
Wissen teilen - is n Witz oder??
Hochachtungsvoll CoiBoi
Zum Vergrößern anklicken....
Zum Teilen von Wissen gehört auch immer jemand dazu, der wissen wollen möchte und bereit ist dazuzulernen.

Du musst zugeben, Du machst es einem nicht leicht. Du möchtest ein Tutorial, das haben wir verstanden, aber auf unsere Postings/Gegenfragen gehst Du nicht ein. Wissen und lernen wollen ist etwas anderes als einfach Quelltext zu kopieren. Und dennoch:

1.) habe ich Dir in meinem ersten Posting Beispiele zu Drop-Downs zugesendet.
2.) Ich habe Dich in meinem 2. Posting gefragt wo es hakt und wie weit Du bist.
3.) enkore hat Dir ebenfalls Sourcecodes zugesendet.

Wir haben Dich nun drei Mal gefragt und drei Mal kein Feedback bekommen. Stattdessen postest Du Deine initiale Anfrage erneut und ignorierst dabei unsere Code-Beispiele.

Da stellen sich mir die Fragen wie:
- Liest Du unsere Antworten überhaupt?
- Hast Du die Beispiele mal versucht nachzubilden?

Sorry, aber "gebt mir mal ein Tutorial" ist nicht immer zweckmäßig und auch ungerechtfertigt einen auf "ihr seid ja so aggressiv" machen, obwohl man bemüht ist Dir zu helfen, ist auch nicht zielführend. Du musst uns schon ein Feedback geben was genau an den Drop-Downs nicht funktioniert oder welchen Part Du nicht verstanden hast, damit man Dich unterstützen kann.
 
Naja ein ultimatives Tutorial wirst nicht finden glaub ich. Und auch wenn du den Quelltext ( dein Posting weiter vorn ) so einbaust kanns gut sein das er nicht funktioniert ( Fehler beim einbaun, dein Browser interpretiert was anders, ... ). Wenns nicht klappt dann poste doch einfach mal deinen Quelltext ( entsprechend formatiert ) und beschreib was genau nicht klappt, dann wird dir sicher geholfen.

Ansonsten einfach deinen Beispielquelltext der Reihe nach durchgehen ( z.B. mit SELFHTML: Stylesheets (CSS) ) und falls du einen bestimmten Eintrag nicht verstehst einfach nach diesem hier fragen ;)
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben