Tech

Programmazione Web, un semplice menu con HTML e CSS

Pubblicato

2 mesi fa

29 Marzo 2023

Carmine Sgariglia

Ecco il codice take-away per poter creare un efficace e semplicissimo menu con HTML e CSS interno

Un menu semplice scritto con HTML e CSS interno per poter gestire al meglio un efficace header di un sito web? Ecco di seguito un codice già pronto per l’uso per potervi divertire:

<!DOCTYPE html>
<html>
<head>
  <title>Menu HTML e CSS</title>
  <style>
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #F44336;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      height: 60px;
    }

    nav li {
      margin: 0;
      padding: 0;
    }

    nav a {
      display: block;
      padding: 20px;
      color: #fff;
      text-decoration: none;
    }

    nav a:hover {
      background-color: #E53935;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Chi siamo</a></li>
      <li><a href="#">Servizi</a></li>
      <li><a href="#">Dove siamo</a></li>
      <li><a href="#">Contatti</a></li>
    </ul>
  </nav>
</body>
</html>

Questo codice HTML e CSS crea un menu con sfondo sul rosso e testo bianco. Il menu utilizza il layout flexbox per allineare gli elementi orizzontalmente. Il colore di sfondo dell’elemento attivo viene evidenziato con un leggero cambio di colore al passaggio del mouse. Puoi personalizzare ulteriormente il codice CSS per adattarlo al tuo design. Magari con una paletta dei colori.

Per poterlo utilizzare basta copia il codice ed inserirlo all’interno di un file che dovrai rinominare ad esempio con “home.html” (l’estensione del file come vedi è .html) ed aprilo con un browser. Buon divertimento e alla prossima!

Conosci Linux e il protocollo FTP? Ti consiglio di leggere anche questo altro mio pezzo: Vediamo come collegarsi da Shell Linux in Ftp verso un server e conosciamo i comandi principali per poter agire dopo una volta sul server

Se ti va lascia un like alla nostra pagina Facebook e seguici su Twitter