Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Dropdown menù con sublinks in orizzontale?

  1. #1

    Dropdown menù con sublinks in orizzontale?

    Secondo thread aperto

    Vorrei realizzare un dropdown menù con sublinks orizzontali, al momento sono riuscito a fare questo:

    RfN4jY1.jpg

    questo è l'HTML:

    codice HTML:
            <nav>
                <ul>
                    <li><a href="#">REGIONI</a>
                        <ul>
                            <li><a href="regioni/abruzzo/abruzzo.html">ABRUZZO</a></li>
                            <li><a href="regioni/basilicata/basilicata.html">BASILICATA</a></li>
                            <li><a href="regioni/calabria/calabria.html">CALABRIA</a></li>
                            <li><a href="regioni/campania/campania.html">CAMPANIA</a></li>
                            <li><a href="regioni/emiliaromagna/emiliaromagna.html">EMILIAROMAGNA</a></li>
                            <li><a href="regioni/friuli/friuli.html">FRIULI</a></li>
                            <li><a href="regioni/lazio/lazio.html">LAZIO</a></li>
                            <li><a href="regioni/liguria/liguria.html">LIGURIA</a></li>
                            <li><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></li>
                            <li><a href="regioni/marche/marche.html">MARCHE</a></li>
                            <li><a href="regioni/molise/molise.html">MOLISE</a></li>
                            <li><a href="regioni/piemonte/piemonte.html">PIEMONTE</a></li>
                            <li><a href="regioni/puglia/puglia.html">PUGLIA</a></li>
                            <li><a href="regioni/sardegna/sardegna.html">SARDEGNA</a></li>
                            <li><a href="regioni/sicilia/sicilia.html">SICILIA</a></li>
                            <li><a href="regioni/toscana/toscana.html">TOSCANA</a></li>
                            <li><a href="regioni/trentino/trentino.html">TRENTINO</a></li>
                            <li><a href="regioni/umbria/umbria.html">UMBRIA</a></li>
                            <li><a href="regioni/valledaosta/valledaosta.html">VALLE D'AOSTA</a></li>
                            <li><a href="regioni/veneto/veneto.html">VENETO</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>

    e questo il CSS:

    codice HTML:
    nav {
        border: 1px solid black;
    }
    
    nav ul {
        position: relative;
        background-color: green;
        text-align: center;
        padding: 15px 0;
    }
    
    nav ul li a {
        text-decoration: none;
        font-family: 'Times New Roman', sans-serif;
        color: white;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 5px;
    }
    
    nav ul ul {
        position: absolute;
        display: none;
        background-color: gold;
    }
    
    nav ul ul li {
        display: inline;
    }
    
    nav li:hover ul {
        display: block;
    }

    Diciamo che ci sono quasi, ora vorrei riuscire ad allineare i links e dargli dei bordi. Suggerimenti?
    Devo pensarci...

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,857
    Non so, prova ad aggiungere una cosa del genere per gli elementi a del sottomenu:
    codice:
    display: inline-block;
    width: 12em;
    border: 1px solid green;
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Non so, prova ad aggiungere una cosa del genere per gli elementi a del sottomenu:
    codice:
    display: inline-block;
    width: 12em;
    border: 1px solid green;
    Grazie per il suggerimento Killer!

    Questo è il risultato:

    X0L3vhv.jpg

    Domanda: c'è un modo per unire i bordi, tipo tabella, e ridurre il padding degli elementi a?

    Nel frattempo che tu rispondessi io stavo risolvendo così:

    dhWNJKH.jpg

    HTML:

    codice HTML:
    <nav>
                <ul> 
                    <li><a href="#">REGIONI</a>
                        <table>
                            <tr>
                                <td><a href="regioni/abruzzo/abruzzo.html">ABRUZZO</a></td>
                                <td><a href="regioni/basilicata/basilicata.html">BASILICATA</a></td>
                                <td><a href="regioni/calabria/calabria.html">CALABRIA</a></td>
                                <td><a href="regioni/campania/campania.html">CAMPANIA</a></td>
                                <td><a href="regioni/emiliaromagna/emiliaromagna.html">EMILIAROMAGNA</a></td>
                                <td><a href="regioni/friuli/friuli.html">FRIULI</a></td>
                                <td><a href="regioni/lazio/lazio.html">LAZIO</a></td>
                                <td><a href="regioni/liguria/liguria.html">LIGURIA</a></td>
                                <td><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></td>
                                <td><a href="regioni/marche/marche.html">MARCHE</a></td>
                            </tr>
                            <tr>
                                <td><a href="regioni/molise/molise.html">MOLISE</a></td>
                                <td><a href="regioni/piemonte/piemonte.html">PIEMONTE</a></td>
                                <td><a href="regioni/puglia/puglia.html">PUGLIA</a></td>
                                <td><a href="regioni/sardegna/sardegna.html">SARDEGNA</a></td>
                                <td><a href="regioni/sicilia/sicilia.html">SICILIA</a></td>
                                <td><a href="regioni/toscana/toscana.html">TOSCANA</a></td>
                                <td><a href="regioni/trentino/trentino.html">TRENTINO</a></td>
                                <td><a href="regioni/umbria/umbria.html">UMBRIA</a></td>
                                <td><a href="regioni/valledaosta/valledaosta.html">VALLE D'AOSTA</a></td>
                                <td><a href="regioni/veneto/veneto.html">VENETO</a></td>
                            </tr>
                        </table>                       
                    </li>
                </ul>
            </nav>

    CSS:

    codice HTML:
    nav {
        border: 1px solid black;
    }
    
    nav ul {
        position: relative;
        background-color: green;
        text-align: center;
        padding: 15px 0;
    }
    
    nav ul li a {
        text-decoration: none;
        font-family: 'Times New Roman', sans-serif;
        color: white;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 5px;
    }
    
    nav ul table {
        position: absolute;
        left: 15px;
        display: none;
        background-color: gold;
        padding: 10px;
        border: 1px solid red;
    }
    
    nav ul table td {
        border: 1px solid green;
        padding: 5px 0;
    }
    
    nav ul table td a {
        font-size: 26px;
        letter-spacing: 0;
        padding: 10px;
    }
    
    nav li:hover table {
        display: block;
    }
    Devo pensarci...

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,857
    Domanda: c'è un modo per unire i bordi, tipo tabella, e ridurre il padding degli elementi a?
    Ci sarebbe anche modo di avvicinare i vari elementi così che i bordi risultino adiacenti; ma se vuoi che si collassino, come per una tabella, la cosa diventa più macchinosa. Non c'è alcun padding; lo spazio che vedi è dato dal fatto che quegli elementi hanno dimensione fissa proprio per fare in modo che risultino incolonnati uno sopra l'altro; non c'è modo di mantenere larghezze automatiche ma relative tra gli elementi di una stessa colonna, se non usando appunto una semplice tabella o una struttura (più macchinosa) di elementi che riproduca tali comportamenti.

    Se però hai risolto con una tabella, e ottenuto quello che volevi, può andare bene così, no?
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Se però hai risolto con una tabella, e ottenuto quello che volevi, può andare bene così, no?
    Credo di si, è solo che ho letto che non è consigliabile fare menù o submenù usando una tabella.
    Devo pensarci...

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,857
    è solo che ho letto che non è consigliabile fare menù o submenù usando una tabella
    Direi piuttosto che è sconsigliato usare le tabelle per uno scopo diverso da quello per cui sono state create, cioè la rappresentazione di dati in maniera tabellare. Da evitare quindi il loro uso per uno scopo puramente stilistico, decorativo.

    In questo caso potrei dire che siamo al confine tra i due casi. In effetti non stai facendo altro che rappresentare dei dati, anche se si tratta di voci di un menu; è vero però che il fattore "tabella", in questo caso, non è poi così necessario.

    A mio parere dovresti lasciare le voci libere, anche per permettere una migliore disposizione automatica delle stesse che magari, pensando di affrontare anche un discorso responsive, possano liberamente disporsi su più righe; e magari migliorare giusto l'aspetto grafico, che so, per le voci impostare opportunamente dei bordi (come da tua richiesta), definirne una grafica per l'hover, ecc., cioè tutti elementi che chiaramente servono a migliorare la qualità di interazione col fruitore.
    Se ritieni però che la rappresentazione tabellare possa fornire qualche particolare beneficio in questo particolare caso, usa tranquillamente una tabella (IMHO).

    Soluzioni alternative, per ottenere un layout simile ma senza tabelle, possono essere l'impostazione da css con regole tipo display:table, display:cell, che puoi applicare ad elementi diversi da quelli di una tabella (ma a me sembra una forzatura; dato che comunque si tratta di rappresentare dei dati, a quel punto perché non usare direttamente una tabella?), o ancora, display:grid che però non è pienamente supportata dai vari browser, quindi bisognerebbe eventualmente valutare degli opportuni fallback per i browser che non la supportano.

    Qui un esempio veloce di grid:
    codice:
    <!DOCTYPE HTML>
    <html>
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <style>
          
             nav {
                 border: 1px solid black;
             }
    
             nav ul {
                 position: relative;
                 background-color: green;
                 text-align: center;
                 padding: 15px 0;
             }
    
             nav ul li a {
                 text-decoration: none;
                 font-family: 'Times New Roman', sans-serif;
                 color: white;
                 font-size: 30px;
                 font-weight: bold;
                 letter-spacing: 5px;
             }
    
             nav ul ul {
                 position: relative;
             }
    
             nav ul ul li {
                 display: inline;
             }
    
             nav li:not(:hover)>ul {
                 display: none;
             }
             
             ul.menu-grid {
                 display: grid;
                 grid-template-columns: repeat(10, auto);
                 margin: 0 auto;
                 background-color: gold;
                    border-collapse:collapse;
             }
             
             ul.menu-grid > li{
                border: 1px solid green;
             }
    
             ul.menu-grid > li > a {
                 display: inline-block;
                 width: 100%;
                 font-size: 26px;
                 letter-spacing: 0;
                 padding: 10px;
             }
             
          </style>
       </head>
       <body>
            <nav>
                <ul>
                    <li><a href="#">REGIONI</a>
                        <ul class="menu-grid">
                            <li><a href="regioni/abruzzo/abruzzo.html">ABRUZZO</a></li>
                            <li><a href="regioni/basilicata/basilicata.html">BASILICATA</a></li>
                            <li><a href="regioni/calabria/calabria.html">CALABRIA</a></li>
                            <li><a href="regioni/campania/campania.html">CAMPANIA</a></li>
                            <li><a href="regioni/emiliaromagna/emiliaromagna.html">EMILIAROMAGNA</a></li>
                            <li><a href="regioni/friuli/friuli.html">FRIULI</a></li>
                            <li><a href="regioni/lazio/lazio.html">LAZIO</a></li>
                            <li><a href="regioni/liguria/liguria.html">LIGURIA</a></li>
                            <li><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></li>
                            <li><a href="regioni/marche/marche.html">MARCHE</a></li>
                            <li><a href="regioni/molise/molise.html">MOLISE</a></li>
                            <li><a href="regioni/piemonte/piemonte.html">PIEMONTE</a></li>
                            <li><a href="regioni/puglia/puglia.html">PUGLIA</a></li>
                            <li><a href="regioni/sardegna/sardegna.html">SARDEGNA</a></li>
                            <li><a href="regioni/sicilia/sicilia.html">SICILIA</a></li>
                            <li><a href="regioni/toscana/toscana.html">TOSCANA</a></li>
                            <li><a href="regioni/trentino/trentino.html">TRENTINO</a></li>
                            <li><a href="regioni/umbria/umbria.html">UMBRIA</a></li>
                            <li><a href="regioni/valledaosta/valledaosta.html">VALLE D'AOSTA</a></li>
                            <li><a href="regioni/veneto/veneto.html">VENETO</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
       </body>
    </html>
    Vedi tu che fare.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #7
    Grazie per le dritte Killer. Per ora il menù lo lascierò così com'è altrimenti rischio di fossilizzarmici sopra, lo riprenderò in un secondo momento.
    Devo pensarci...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.