Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it L'avatar di Kahm
    Registrato dal
    Dec 2004
    residenza
    Rome
    Messaggi
    3,451

    visualizzare menu orizzontale in Device e PC

    salve a tutti
    ho un menu orizzontale, il quale per averlo compatibile con i cellulari ho nascosto la scrollbar orizzontale, purtroppo il cliente la vuole vedere quando utilizza il PC!
    non so cosa inventarmi, in quanto su PC non si riesce a tascinare
    consigli?

    codice HTML:
    
    .parent {
      width: 100%;
      height: 30px;
      border: 1px solid #AAA;
      white-space: nowrap;
      overflow-y: hidden;
    }
    
    .child {
      height: 45px;
      overflow-x: auto;
    }<div class="parent">
      <div class="child">
        <table id="ctl00_ContentPlaceHolder1_DataList1" cellspacing="0" border="0" style="border-collapse:collapse;">
          <tbody>
            <tr>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl00_hypCateg" href="Index.aspx?CodCateg=19">cat 1</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl01_hypCateg" href="Index.aspx?CodCateg=22">cat 2</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl02_hypCateg" href="Index.aspx?CodCateg=17">cat 3</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl03_hypCateg" href="Index.aspx?CodCateg=9">cat 23</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl04_hypCateg" href="Index.aspx?CodCateg=12">cat 5</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl05_hypCateg" href="Index.aspx?CodCateg=7">FARINA DA GRANI ANTICHI</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl06_hypCateg" href="Index.aspx?CodCateg=13">FRUTTA</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl07_hypCateg" href="Index.aspx?CodCateg=15">FUNGHI NATURALI</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl08_hypCateg" href="Index.aspx?CodCateg=16">MAIALE</a> &nbsp;
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div> 
    NN vi diro mai chi sono in realta,
    tutti i miei 3D sono orfani, non insistete per farmi rispondere ai 3D aperti da me

  2. #2
    Utente di HTML.it L'avatar di neo1976
    Registrato dal
    Mar 2015
    Messaggi
    311
    ciao Kahm prova così:
    Ultima modifica di neo1976; 11-04-2021 a 03:17

  3. #3
    Utente di HTML.it L'avatar di neo1976
    Registrato dal
    Mar 2015
    Messaggi
    311
    Ciao Kahm prova così:

    codice:
    .parent {
      width: 100%;
      height: 30px;
      border: 1px solid #AAA;
      white-space: nowrap;
      overflow-y: hidden;
    }
    
    
    @media(max-width:768px){ .child {height: 30px;
      overflow-x: hidden;
    }}
    @media(min-width:769px){ .child {height: 45px;
      overflow-x: auto !important;
    }}
    <div class="parent">
      <div class="child">
        <table id="ctl00_ContentPlaceHolder1_DataList1" cellspacing="0" border="0" style="border-collapse:collapse;">
          <tbody>
            <tr>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl00_hypCateg" href="Index.aspx?CodCateg=19">cat 1</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl01_hypCateg" href="Index.aspx?CodCateg=22">cat 2</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl02_hypCateg" href="Index.aspx?CodCateg=17">cat 3</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl03_hypCateg" href="Index.aspx?CodCateg=9">cat 23</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl04_hypCateg" href="Index.aspx?CodCateg=12">cat 5</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl05_hypCateg" href="Index.aspx?CodCateg=7">FARINA DA GRANI ANTICHI</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl06_hypCateg" href="Index.aspx?CodCateg=13">FRUTTA</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl07_hypCateg" href="Index.aspx?CodCateg=15">FUNGHI NATURALI</a> &nbsp;
              </td>
              <td>
                &nbsp;
                <a id="ctl00_ContentPlaceHolder1_DataList1_ctl08_hypCateg" href="Index.aspx?CodCateg=16">MAIALE</a> &nbsp;
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    Ultima modifica di neo1976; 11-04-2021 a 03:23

  4. #4
    Utente di HTML.it L'avatar di neo1976
    Registrato dal
    Mar 2015
    Messaggi
    311
    ciao Kahm ecco la soluzione, l'ho testata:

    .parent {
    width: 100%;
    height: 30px;
    border: 1px solid #AAA;
    white-space: nowrap;
    overflow-y: hidden;
    }


    @media(max-width:768px){ .child {height: 30px;
    overflow-x: hidden;
    }}
    @media(min-width:769px){ .child {height: 45px;
    overflow-x: auto !important;display: inline-block;
    }}
    <div class="parent">
    <div class="child">
    <table id="ctl00_ContentPlaceHolder1_DataList1" cellspacing="0" border="0" style="border-collapse:collapse;">
    <tbody>
    <tr>
    <td>
    &nbsp;
    <a id="ctl00_ContentPlaceHolder1_DataList1_ctl00_hypC ateg" href="Index.aspx?CodCateg=19">cat 1</a> &nbsp;
    </td>
    <td>
    &nbsp;
    <a id="ctl00_ContentPlaceHolder1_DataList1_ctl01_hypC ateg" href="Index.aspx?CodCateg=22">cat 2</a> &nbsp;
    </td>
    <td>
    &nbsp;
    <a id="ctl00_ContentPlaceHolder1_DataList1_ctl02_hypC ateg" href="Index.aspx?CodCateg=17">cat 3</a> &nbsp;
    </td>
    <td>
    &nbsp;
    <a id="ctl00_ContentPlaceHolder1_DataList1_ctl03_hypC ateg" href="Index.aspx?CodCateg=9">cat 23</a> &nbsp;
    </td>
    <td>
    &nbsp;
    <a id="ctl00_ContentPlaceHolder1_DataList1_ctl04_hypC ateg" href="Index.aspx?CodCateg=12">cat 5</a> &nbsp;
    </td>
    <td>
    &nbsp;
    <a id="ctl00_ContentPlaceHolder1_DataList1_ctl05_hypC ateg" href="Index.aspx?CodCateg=7">FARINA DA GRANI ANTICHI</a> &nbsp;
    </td>
    <td>
    &nbsp;
    <a id="ctl00_ContentPlaceHolder1_DataList1_ctl06_hypC ateg" href="Index.aspx?CodCateg=13">FRUTTA</a> &nbsp;
    </td>
    <td>
    &nbsp;
    <a id="ctl00_ContentPlaceHolder1_DataList1_ctl07_hypC ateg" href="Index.aspx?CodCateg=15">FUNGHI NATURALI</a> &nbsp;
    </td>
    <td>
    &nbsp;
    <a id="ctl00_ContentPlaceHolder1_DataList1_ctl08_hypC ateg" href="Index.aspx?CodCateg=16">MAIALE</a> &nbsp;
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    Ultima modifica di neo1976; 13-04-2021 a 11:45

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 © 2021 vBulletin Solutions, Inc. All rights reserved.