Menú Navegador

Bloc CSS que defineix el menú de navegació per a escriptori, amb estil net, flexible i interactiu. Aquest menú és ideal per a pàgines modernes que volen mantenir una navegació clara i accessible.

🧭 Estils del menú de navegació (versió escriptori)

1. Contenidor de navegació (nav)

/* Estils addicionals per a la navegació */
        nav { /* Estils per a la barra de navegació */
            margin: 20px 0; /* Margen vertical */
        }

Afegeix espai vertical abans i després del menú.

• Separa visualment la navegació del contingut principal.

2. Llista d’enllaços (.nav-links)

.nav-links { /* Estils per a la llista de navegació */
            display: flex; /* Utilitza Flexbox per al layout */
            list-style: none; /* Elimina els punts de la llista */
            background: white; /* Fons blanc */
            border-radius: 8px; /* Cantonades arrodonides */
            overflow: hidden; /* Evita que els elements sobresurtin */
            box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Ombra suau */
        }

Utilitza Flexbox per col·locar els enllaços en línia horitzontal.

• Elimina els punts de llista amb list-style: none.
• Fons blanc, cantonades arrodonides i ombra suau per donar un aspecte elegant.
• overflow: hidden evita que el contingut surti del contenidor, especialment útil si hi ha efectes hover.

3. Cada element de la llista (.nav-links li)

 .nav-links li { /* Estils per a cada element de la llista */
            flex: 1; /* Cada element ocupa la mateixa amplada */
        }

Cada element ocupa la mateixa amplada, gràcies a flex: 1.

• Això fa que el menú sigui equilibrat i simètric, independentment del nombre d’enllaços.

4. Enllaços (.nav-links a)

.nav-links a { /* Estils per als enllaços de navegació */
            display: block; /* Mostra com a bloc */
            padding: 15px; /* Espaiat intern */
            text-align: center; /* Centra el text */
            text-decoration: none; /* Elimina la subratllada */
            color: #2c3e50; /* Color blau fosc */
            font-weight: 500; /* Text semi-negreta */
            transition: background 0.3s; /* Transició suau per al fons */
        }

Els enllaços ocupen tot l’espai del seu contenidor amb display: block.

• padding: 15px dona espai intern per facilitar el clic.
• El text es centra i s’elimina el subratllat (text-decoration: none).
• Color blau fosc per mantenir la coherència cromàtica amb el disseny.
• transition suavitza el canvi de fons quan l’usuari passa el cursor.

5. Efecte hover (.nav-links a:hover)

 .nav-links a:hover { /* Efecte hover per als enllaços de navegació */
            background: #e9ecef; /* Fons gris clar */
        }

Canvia el fons a gris clar quan l’usuari passa el cursor.

• Dona feedback visual i millora la interactivitat.

Aquest menú és perfecte per a escriptori, i pots adaptar-lo fàcilment a mòbil amb un menú hamburguesa o una versió vertical.