Wie so eine Navigation erstellen ?

Mit HTML und CSS.

Das wäre wohl die korrekte Antwort auf die Frage.

Eine HTML-Liste erstellen in welcher du die Links verpackst, die "aufploppenden" Elemente sind dann wieder Listen die ausgeblendet sind und eingeblendet werden wenn man mit der Maus auf dem entsprechenden Element ist.

Wichtige HTML Elemente sind: ul, li, a
Wichtige CSS Elemente sind: float, display, position, overflow

Fertigen Code musst du bei Google suchen, individuelle Hilfe bekommst du hier wenn du zumindest den Ansatz versucht hast, etwas Code zeigen kannst und ein spezielles Problem hast.

Hallo

Zitat

Kann mir jemand sagen wie ich so eine Navigation erstellen kann ?

Das kann niemand einfach so nachvollziehen.

Du kannst zum Beispiel die Seite erst mal in ein leeres Verzeichnis speichern. Das geht mit dem Firefox recht gut.

Anschließend schnappst du dir den HTML-Quelltext und löscht alles, was mit der Navigation nichts zu tun hat.

Anschließend machst du das gleiche mit dem CSS-Dateien.

Nach jedem Löschvorgang kontrollieren, ob die Navigation noch funktioniert.

Übrig bleibt dann der notwendige HTML- und CSS-Quelltext.

Im Inspektor (bei Firefox: Element untersuchen) kann vor dem Löschen schon mal nachgeschaut werden, was wahrscheinlich gelöscht werden kann.

Das ist natürlich Fleißarbeit, aber anders können wir auch nicht vorgehen, wenn wir nicht grade eine sehr ähnliche Navigation kennen.

Gruss

MrMurphy

Das von MrMurphy ist aber Illegal, wenn du es nicht auszeichnest als eine Kopie..

Hallo

Zitat

Das von MrMurphy ist aber Illegal

Nein, deine Aussage ist so absolut ausgedrückt nicht richtig.

Im Internet verbreiteten Quellcode darf sich jeder anschauen und ihn dazu speichern.

Geschützt sind zweifelsfrei die Bilder. Um die geht es aber überhaupt nicht. Die gehören nicht zur Navigation und werden gelöscht. Ich bin davon ausgegangen, dass das jedem bekannt ist.

Die Farbgestaltung der Navigation kann geschützt sein, wenn sie einen nicht unerheblichen schöpferischen Anteil besitzt. Das sehe ich nicht, hier ist nur eine Farbe und etwas Box-Shadow wie in hunderten Lehrbüchern und Internetartikeln nachzulesen verwendet worden.

Bleibt noch der HTML- und CSS-Quelltext selbst. Aber bei genauerem Hinschauen kannst du nachvollziehen, dass nur schlichter Lehrbuchquelltext verwendet wurde, dazu noch veraltet.

Die ganze Navigation befindet sich bei genauerem Hinschauen in einem nav-Element = keine schöpfersiche Leistung

Innerhalb des nav-Elements befindet sich eine ungeordnete Liste = keine schöpferische Leistung

Innerhalb des ul-Elements befindet sich für jeden Hauptmenüpunkt ein li-Element = keine schöpferische Leistung

Innerhalb der 6 li-Elemente befindet sich eine Tabelle mit einem weiteren ul-Element mit den Untermenüpunkten = Tabelle wird zum Layouten mißbraucht, ansonsten ein ganz normales Aufklappmenü = keine schöpferische Leistung

Die 6 Bilder sind per "position: absolute" positioniert = keine schöpferische Leistung

Auch die Gesamtkonzeption ist aus tausenden Artikeln zum Thema Aufklappnavigation mit hover-Effekt bekannt.

Entsprechendes gilt für das CSS, das sind Standardangaben. Da ist weder einzeln noch in dem Zusammenspiel aller CSS-Anweisungen irgendetwas außergewöhnlich.

Von daher ist an dieser Navigation selbst (also ohne die Bilder) nichts geschützt.

Gruss

MrMurphy

Programmcode ist tatsächlich nicht urheberrechtlich schützbar. Man kann höchstens Patente anmelden und das macht bei HTML/CSS Quellcode keinen Sinn. Wo da eventuelle Grenzen liegen ist schon wieder nirgends definiert (yippie) und wird im Zweifel vom zuständigen Gericht entschieden.

Katy Perry Songs sind auch keine schöpferische Leistung, sind trotzdem geschützt. Komisches Argument.

Desweiteren Frage ich mich: Wenn der ganze Kram keine schöpferische Leistung fordert, warum empfiehlst du den Code zu kopieren und so lange auszuschlachten bis alles funktioniert? Was sind das für neue Lehrmethoden? Da war ja selbst mein Beitrag hilfreicher und der war schon recht kurz und knapp...

Wenn du eine Frage hast möchtest du auch eine hilfreiche Antwort und keinen Hinweis darauf, dass du doch bereits Code hast. Den sicher nicht jeder versteht.

Hallo,

ich hatte das so verstanden, dass steve wissen wollte, wie die spezielle Navigation erstellt wurde. Und das kann halt erst nach Durchsicht des Quelltextes beurteilt werden. Das dann nur eine schlichte, schulmäßige Navigation übrigbleibt ist nicht direkt erkennbar.

Wenn es nur um die Funktion geht würde ich eine viel schlichtere Grundstruktur bevorzugen. Die könnte so aufgebaut sein:

<nav id="zbv">
   <article>
      <p>Menüpunkt</p>
      <div>
         <h2>Bezeichnungen</h2>
         <p>Inhalt: Text, Container, Listen u.s.w.</p>
         <img src="http://..." alt="Beispielbild">
      </div>   
   </article>
</nav>

Ein nav-Element, in dem sich für jeden Menüpunkt ein article-Element befindet.

Die p-Elemente werden durch beliebige Inhalte ersetzt. Durch den umschließenden div-Container gibt es kaum Einschränkungen des Inhalts und seiner Gestaltung.

Das Bild direkt vor dem schließenden div ist absolut positioniert und kann beliebig verschoben werden.

Keine unnötigen id und class. Viel übersichtlicher geht es wohl kaum.

Farben, Rahmen, Schatten, Abstände können flexibel angepasst werden. Ein Resposive Design ist problemlos möglich.

Das CSS ist nicht sehr aufwändig:

nav#zbv {
   padding: 0;
   border: 1px solid silver;
   display: flex;
   justify-content: space-around;
   align-items: flex-start;
}
#zbv>:first-child {
   background-color: Orange;
   flex: 0 0 2rem;
}
#zbv>* {
   display: block;
   text-align: center;
   position: relative;
   padding: 0;
   border: 1px solid orange;
   margin: 0;
   flex: 1 0 auto;
}
#zbv article :nth-child(1) {
   display: block;
   padding: 0.3rem 0;
   margin: 0;
}
#zbv div {
   min-height: 210px; /*Für die Beispielbilder*/
   border: 1px solid silver;
   border-top: 5px solid red;
   display: none;
}
#zbv article:hover div {
   text-align: left;
   display: block;
   position: absolute;
   width: 300%;
}
#zbv article:nth-last-child(-n+3) div {
   right: 0;
}
#zbv div img:last-child {
   position: absolute;
   right: 0;
   bottom: 0;
}

Die gesamte Navigation mit aktuellem HTML/CSS könnte zum Beispiel so erstellt werden:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Navigation 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      nav#zbv {
         padding: 0;
         border: 1px solid silver;
         display: flex;
         justify-content: space-around;
         align-items: flex-start;
      }
      #zbv>:first-child {
         background-color: Orange;
         flex: 0 0 2rem;
      }
      #zbv>* {
         display: block;
         text-align: center;
         position: relative;
         padding: 0;
         border: 1px solid orange;
         margin: 0;
         flex: 1 0 auto;
      }
      #zbv article :nth-child(1) {
         display: block;
         padding: 0.3rem 0;
         margin: 0;
      }
      #zbv div {
         min-height: 210px; /*Für die Beispielbilder*/
         border: 1px solid silver;
         border-top: 5px solid red;
         display: none;
      }
      #zbv article:hover div {
         text-align: left;
         display: block;
         position: absolute;
         width: 300%;
      }
      #zbv article:nth-last-child(-n+3) div {
         right: 0;
      }
      #zbv div img:last-child {
         position: absolute;
         right: 0;
         bottom: 0;
      }
   }
   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <nav id="zbv">
      <article>
         <p>H</p>
      </article>
      <article>
         <p>Obst</p>
         <div>
            <h2>Bezeichnungen</h2>
            <p>Inhalt: Text, Container, Listen u.s.w.</p>
            <img src="http://lorempixel.com/130/200/food" alt="Beispielbild">
         </div>   
      </article>
      <article>
         <p>Auto</p>
         <div>
            <h2>Bezeichnungen</h2>
            <p>Inhalt: Text, Container, Listen u.s.w.</p>
            <img src="http://lorempixel.com/130/200/transport" alt="Beispielbild">
         </div>   
      </article>
      <article>
         <p>Stadt</p>
         <div>
            <h2>Bezeichnungen</h2>
            <p>Inhalt: Text, Container, Listen u.s.w.</p>
            <img src="http://lorempixel.com/130/200/city" alt="Beispielbild">
         </div>   
      </article>
      <article>
         <p>Tier</p>
         <div>
            <h2>Bezeichnungen</h2>
            <p>Inhalt: Text, Container, Listen u.s.w.</p>
            <img src="http://lorempixel.com/130/200/animals" alt="Beispielbild">
         </div>   
      </article>
      <article>
         <p>Vorname</p>
         <div>
            <h2>Bezeichnungen</h2>
            <p>Inhalt: Text, Container, Listen u.s.w.</p>
            <img src="http://lorempixel.com/130/200/people" alt="Beispielbild">
         </div>   
      </article>
      <article>
         <p>Unternehmen</p>
         <div>
            <h2>Bezeichnungen</h2>
            <p>Inhalt: Text, Container, Listen u.s.w.</p>
            <img src="http://lorempixel.com/130/200/technics" alt="Beispielbild">
         </div>   
      </article>
   </nav>
</body>
</html>

Gruss

MrMurphy

Sehr hilfreich, so ein Code ohne Erklärung.

Zitat von MrMurphy

eine viel schlichtere Grundstruktur bevorzugen.

Schlicht und vor Allem semantisch völliger Unfug. HTML Elemente haben schon ihren Sinn. Navigationen sind seit jeher, und bleiben Aufzählungen; folglich Listen.

Hallo,

also ist so eine Konstruktion mit aktuellem HTML nicht zulässig?

<nav>
   <aside class="partner">
      <h1>Partnerunternehmen</h1>
      <a href="#">
         <section>
            <h1>Großautohandel</h1>
            <p>Die besten Fahrzeuge.</p>
            <p>Super Preise.</p>
         </section>
      </a>
      <a href="#">
         <section>
            <h1>Fahrrad-Egon</h1>
            <p>Elektrofahrräder fast geschenkt.</p>
            <p>Kostenpflichtige Lieferung.</p>
         </section>
      </a>
      <a href="#">
         <section>
            <h1>Gurken-Heini</h1>
            <p>Frisch, frischer, frischest.</p>
            <p>Sauber und rein - so soll die Gurke sein.</p>
         </section>
      </a>
      <a href="#">
         <section>
            <h1>Hans Hartbeton</h1>
            <p>Bettwäsche und mehr.</p>
            <p>Wie man sich bettet so liegt man.</p>
         </section>
      </a>
   </aside>      
</nav>

Gruss

MrMurphy

Es ist definitiv nicht verkehrt. Das Anchor Element ist im Content Modell auch als Flow Content angegeben, darf daher auch eine Section enthalten. Nach dem neuen Content Modell von HTML5 ist zwar so gut wie alles erlaubt, das bedeutet aber nicht, dass man auch einfach alles macht. Es ist eher eine Sache von Geschmack und Stil und der gängigste Stil, Menüs umzusetzen, ist der mittels Liste. Es ist ja nun mal auch einfach unabstreitbar eine Liste.

So richtig einen Unterschied macht es zwar nicht, jedoch fehlt dann irgendwo die Logik dahinter.

H1 ist aber definitv nur ein mal pro Seite zu verwenden, zwecks Screenreader. Eben als oberste Überschrift, in dem Fall eigentlich auch auf jeder Seite das Selbe.

Hallo,

Zitat

So richtig einen Unterschied macht es zwar nicht, jedoch fehlt dann irgendwo die Logik dahinter.

Korrekte Lösungen als falsch oder unsinnig darzustellen, nur weil du sie nicht verstehst ist nicht grade das gelbe vom Ei.

Es ist definitiv nicht verkehrt.

Das hört sich doch schon mal ganz anders an als in deinem vorigen Beitrag.

Zitat

H1 ist aber definitv nur ein mal pro Seite zu verwenden,

Komisch nur, das die offiziellen Entwickler vom HTML (WHATWG und W3C) das anders sehen:

Zitat

As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:

und direkt nachfolgend als korrekte Code-Beispiele

<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>




<body>
 <h1>Let's call it a draw(ing surface)</h1>
 <section>
  <h1>Diving in</h1>
 </section>
 <section>
  <h1>Simple shapes</h1>
 </section>
 <section>
  <h1>Canvas coordinates</h1>
  <section>
   <h1>Canvas coordinates diagram</h1>
  </section>
 </section>
 <section>
  <h1>Paths</h1>
 </section>
</body>

Ich finde es traurig, dass du korrekte Lösungen als falsch oder unsinnig darstellst, nur weil du damit überfordert bist.

Gruss

MrMurphy

Es ist falsch (hat auch niemand das Gegenteil behauptet ;)) das das H1 Element nur einmal verwendet werdet darf (unter HTML5), allerdings gibt es eine Regel an die man sich halten sollte bzw. 'muss' (wenn man mehr als eine H1 verwenden möchte) um die usabillity bzw. SEO. nicht zu vernachlässigen..:
Angenommen eine Seite hat im HEADER eine H1, in der der Firmen/Blog Name steht, und im MAIN Element dann noch eine H1 die den Titel der spezifischen 'Unter-' Seite enthält, ist dies Logisch nachvollziehbar.
Allerdings sollte man nicht anfangen, H1 Elemente wie H2 Elemente zu benutzen.

MrMurphy .. das hier könnte interessant sein: http://html5doctor.com/avoiding-common-html5-mistakes/

Zitat von w3c

Warning: Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).

Zitat von w3c

Using only h1 elements in a HTML document results in a flat document outline as heading element semantics are conveyed to users as per the numeric in the heading element tag name.

Wenn wir Empfehlungen des w3c in den Wind schlagen, können wir gleich machen was wir wollen.

Okay, das mit den screenreadern wusste ich nicht, google Suchmaschinen schaffen es allerdings durchaus..

Google ist nicht das Maß aller Dinge.

Da hast du recht..