• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigationsleiste erstellen mit Strichen

kaepten

kaepten

Mitglied
Hallo Leute,

Ich wollte meine alte Navigationsleiste in eine etwas bessers um ändern.
http://behen1941.wix.com/hfhdsfhdshf

unbenannt72lihgqany.png


Hier sehen wir die Navigationsleiste. Ich würde ganz gerne diese 1:1 übernehmen.
Doch mein Problem ist wie stelle ich das da?
Ihr sieht das Blaue Rechteck in diesem Bereich wenn ich mit der Maus drüber gehe soll der Strich sich von dünn in dick ändern. Aber wie mache ich diesen Bereich?

Und desweitern wie schaffe ich das der Strich über den Sachen ist ?
Muss ich das mit einer Tabelle angehen?

Und wie kann ich den Strich von Dick in Dünn ändern?

Wäre nett wenn ihr helfen könntet :)
 
Werbung:
Definiere per CSS einen border der per hover-Pseudoelement größer (dicker) wird.

Moderation: Verschoben von HTML zu CSS, da es mit Gestaltung zu tun hat.
 
Werbung:
Sowas wird nicht mit mouseover (also JavaScript) gemacht sondern mittels CSS. CSS bremst den Browser nichs so aus wie JavaScript und kann von den Usern auch nicht blockiert werden.

Deshalb sollte JavaScript nur verwendet werden wenn es keine gleichwertige CSS-Lösung gibt.

Mit CSS können die Striche z. B. folgendermaßen erstellt werden:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Navi Layout</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="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      nav {
         display: flex;
      }
      a {
         display: block;
         padding: 0.5rem;
         border-top: 0.1rem solid black;
         margin: 0.5rem;
      }
      a:hover {
         padding-top: 0.4rem;
         border-top: 0.2rem solid black;
      }
   </style>
</head>
<body>
   <nav>
      <a href="#">Banane</a>
      <a href="#">Kirsche</a>
      <a href="#">Birne</a>
      <a href="#">Kiwi</a>
   </nav>
</body>
</html>
 
Vielen,vielen Dank! :)
Hast mir den Tag gerettet! :D
Es ist immer wieder schön neue Sachen zu lernen!

Aber eine Frage habe ich was bedeutet <nav>?

Und sobald ich meine class mache die alles zentriert wird die Navileisteuntereinander?:(
 
Zuletzt bearbeitet:
nav ist ein container wie div, hat aber zusätzlich eine Bedeutung. Nämlich das sich innerhalb des nav-Containers die Haupt-Navigation der Seite befindet.

Zu weiteren Info kannst du ja mal nach "html nav" googeln. Dann erhälst du z. B. folgenden Link:

http://html5-webdesign.de/nav.html

Und sobald ich meine class mache die alles zentriert wird die Navileisteuntereinander?
Zum Vergrößern anklicken....

Um dir konkret zu helfen brauchen wir einen Link zu deiner Seite oder zumindest den relevanten Quelltext.

In meinem Beispiel kannst du zum Zentrieren dem nav-container z. B. die Eigenschaft "justify-content: center;" hinzufügen, also

Code: 
      nav {
         display: flex;
         justify-content: center;
      }
 
Werbung:
Oh,sorry. Habe ich jetzt voll vergessen. Aber justify-content: center; klappt es super!!
Habe jetzt nur noch eine Frage wie kann ich machen das die aktuelle Seite,
auf der Seite wo man sich gerade befindet das der Strich dann dauerhaft dick ist und eine andere Farbe hat. Damit man weiß auf auf welcher Seite man gerade sich befindet.
 
Werbung:
Habe es jetzt mal mit dem Code probiert:

Code: 
a:active
    {
     padding-top: 0.4rem;
         border-top: 0.2rem solid black;
    }

Leider ändert sich nichts
 
Nicht a:active sondern a.active, und die Zuweisung von .active - analog zur URL - kann per PHP oder JS, respektive dem entsprechenden Framework, vorgenommen werden. Aber die notwendigen Basics musst du dir schon selber anlesen.
 
@MrMurphy

Vielleicht könntest du mir nochmal helfen und sagen wie ich das machen kann das ich auf der Seite wo ich mich befinde das da die Striche auch so dick werden wie wenn man drüber geht? Habe schon alles erdenkliche probiert.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben