CSS-Beispielcode mit Suchnavigationsleiste

Dieser Artikel zeigt Ihnen, wie Sie mit CSS eine Navigationsleiste mit Suchfunktion erstellen.

Die folgenden Beispiele sind alle responsiv.

Sie können sich zunächst das Wirkungsdiagramm ansehen:

Erstellen einer Suchleiste

<div Klasse="topnav">
  <a class="active" href="#home">Startseite</a>
  <a href="#about">Über</a>
  <a href="#contact">Kontaktieren Sie uns</a>
  <input type="text" placeholder="Suchen..">
</div>

/* Schwarze Hintergrundfarbe zur oberen Navigationsleiste hinzufügen */
.topnav {
    Überlauf: versteckt;
    Hintergrundfarbe: #e9e9e9;
}
 
/* Linkstil der Navigationsleiste festlegen */
.topnav ein {
    schweben: links;
    Anzeige: Block;
    Farbe: Schwarz;
    Textausrichtung: zentriert;
    Polsterung: 14px 16px;
    Textdekoration: keine;
    Schriftgröße: 17px;
}
 
/* Ändere die Farbe des Links beim Hovern */
.topnav a:hover {
    Hintergrundfarbe: #ddd;
    Farbe: Schwarz;
}
 
/*Das aktuell ausgewählte Element hervorheben*/
.topnav ein.aktiv {
    Hintergrundfarbe: #2196F3;
    Farbe: weiß;
}
 
/* Suchfeldstil der Navigationsleiste festlegen*/
.topnav Eingabe[Typ=Text] {
    schweben: rechts;
    Polsterung: 6px;
    Rand: keiner;
    Rand oben: 8px;
    Rand rechts: 16px;
    Schriftgröße: 17px;
}
 
/* Wenn die Bildschirmbreite weniger als 600 Pixel beträgt, werden die Menüoptionen und das Suchfeld vertikal gestapelt angezeigt*/
@media screen und (max-width: 600px) {
    .topnav a, .topnav Eingabe[Typ=Text] {
        Schwimmer: keiner;
        Anzeige: Block;
        Textausrichtung: links;
        Breite: 100 %;
        Rand: 0;
        Polsterung: 14px;
    }
    .topnav Eingabe[Typ=Text] {
        Rand: 1px durchgezogen #ccc;
    }
}

CSS-Suchnavigationsleiste – mit Senden-Schaltfläche

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Anleitung für Anfänger (runoob.com)</title>
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
<Stil>
* {Boxgröße: Rahmenbox;}

Körper {
  Rand: 0;
  Schriftfamilie: Arial, Helvetica, serifenlos;
}

.topnav {
  Überlauf: versteckt;
  Hintergrundfarbe: #e9e9e9;
}

.topnav ein {
  schweben: links;
  Anzeige: Block;
  Farbe: Schwarz;
  Textausrichtung: zentriert;
  Polsterung: 14px 16px;
  Textdekoration: keine;
  Schriftgröße: 17px;
}

.topnav a:hover {
  Hintergrundfarbe: #ddd;
  Farbe: Schwarz;
}

.topnav ein.aktiv {
  Hintergrundfarbe: #2196F3;
  Farbe: weiß;
}

.topnav .Suchcontainer {
  schweben: rechts;
}

.topnav Eingabe[Typ=Text] {
  Polsterung: 8px;
  Rand oben: 8px;
  Schriftgröße: 17px;
  Rand: keiner;
}

.topnav .search-container-Schaltfläche {
  schweben: rechts;
  Polsterung: 6px;
  Rand oben: 8px;
  Rand rechts: 16px;
  Hintergrund: #ddd;
  Schriftgröße: 17px;
  Rand: keiner;
  Cursor: Zeiger;
}

.topnav .search-container Schaltfläche:Hover {
  Hintergrund: #ccc;
}

@media screen und (max-width: 600px) {
  .topnav .Suchcontainer {
    Schwimmer: keiner;
  }
  .topnav a, .topnav Eingabe[Typ=Text], .topnav .search-container Schaltfläche {
    Schwimmer: keiner;
    Anzeige: Block;
    Textausrichtung: links;
    Breite: 100 %;
    Rand: 0;
    Polsterung: 14px;
  }
  .topnav Eingabe[Typ=Text] {
    Rand: 1px durchgezogen #ccc;  
  }
}
</Stil>
</Kopf>
<Text>

<div Klasse="topnav">
  <a class="active" href="#home">Startseite</a>
  <a href="#about">Über</a>
  <a href="#contact">Kontaktieren Sie uns</a>
  <div Klasse="Suchcontainer">
    <form action="/aktionsseite.php">
      <input type="text" placeholder="Suchen.." name="search">
      <button type="submit">Senden</button>
    </form>
  </div>
</div>

<div Stil="padding-left:16px">
   <h2>Responsives Suchmenü</h2>
   <p>In der Navigationsleiste befindet sich ein Suchfeld. </p>
   <p>Ändern Sie die Größe Ihres Browserfensters, um den Effekt zu sehen. </p>
</div>

</body>
</html>

CSS-Suchnavigationsleiste – mit Suchsymbol

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Anleitung für Anfänger (runoob.com)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<Stil>
* {Boxgröße: Rahmenbox;}

Körper {
  Rand: 0;
  Schriftfamilie: Arial, Helvetica, serifenlos;
}

.topnav {
  Überlauf: versteckt;
  Hintergrundfarbe: #e9e9e9;
}

.topnav ein {
  schweben: links;
  Anzeige: Block;
  Farbe: Schwarz;
  Textausrichtung: zentriert;
  Polsterung: 14px 16px;
  Textdekoration: keine;
  Schriftgröße: 17px;
}

.topnav a:hover {
  Hintergrundfarbe: #ddd;
  Farbe: Schwarz;
}

.topnav ein.aktiv {
  Hintergrundfarbe: #2196F3;
  Farbe: weiß;
}

.topnav .Suchcontainer {
  schweben: rechts;
}

.topnav Eingabe[Typ=Text] {
  Polsterung: 6px;
  Rand oben: 8px;
  Schriftgröße: 17px;
  Rand: keiner;
}

.topnav .search-container-Schaltfläche {
  schweben: rechts;
  Polsterung: 6px 10px;
  Rand oben: 8px;
  Rand rechts: 16px;
  Hintergrund: #ddd;
  Schriftgröße: 17px;
  Rand: keiner;
  Cursor: Zeiger;
}

.topnav .search-container Schaltfläche:Hover {
  Hintergrund: #ccc;
}

@media screen und (max-width: 600px) {
  .topnav .Suchcontainer {
    Schwimmer: keiner;
  }
  .topnav a, .topnav Eingabe[Typ=Text], .topnav .search-container Schaltfläche {
    Schwimmer: keiner;
    Anzeige: Block;
    Textausrichtung: links;
    Breite: 100 %;
    Rand: 0;
    Polsterung: 14px;
  }
  .topnav Eingabe[Typ=Text] {
    Rand: 1px durchgezogen #ccc;  
  }
}
</Stil>
</Kopf>
<Text>

<div Klasse="topnav">
  <a class="active" href="#home">Startseite</a>
  <a href="#about">Über</a>
  <a href="#contact">Kontaktieren Sie uns</a>
  <div Klasse="Suchcontainer">
    <form action="/aktionsseite.php">
      <input type="text" placeholder="Suchen.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<div Stil="padding-left:16px">
  <h2>Responsives Suchmenü</h2>
  <p>In der Navigationsleiste befindet sich ein Suchfeld. </p>
  <p>Ändern Sie die Größe Ihres Browserfensters, um den Effekt zu sehen. </p>
</div>

</body>
</html>

Dies ist das Ende dieses Artikels über den Beispielcode von CSS mit Suchnavigationsleiste. Weitere relevante Inhalte zur CSS-Suchnavigationsleiste finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: JavaScript-Funktion kapselt zufälligen Farbüberprüfungscode (vollständiger Code)

>>: OpenSSL-Zertifikate in der Linux-Umgebung generieren