Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Menù a tendina con Box

    Salve a tutti, avrei bisogno di una mano. Dovrei creare un menù come questo:
    menu.jpg
    (qui si vede meglio: https://drive.google.com/file/d/0B95...lVN3ozN1U/view )
    Al posto della classica tendina deve scendere un box dove inserire alcuni elenchi. Sto procedendo per tentativi ma nulla. In rete non ho trovato nessun suggerimento, qualcuno può aiutarmi?
    Grazie in anticipo
    Damiano
    Ps. questo è il mio primo post, sperò di non infrangere nessuna regola!
    Ultima modifica di DamianoXX; 08-03-2016 a 11:50

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2007
    Messaggi
    69
    i passaggi principali sono due:

    1) costruire il box con il tuo menu di navigazione e tutti gli stili associati;

    2) definire gli eventi per farlo apparire e scomparire;

    In quale dei due passaggi sei in difficoltà?

  3. #3
    Entrambi? Diciamo che la struttura HTML c'è ma non riesco a farlo scendere in modo che sia visualizzato correttamente.

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2007
    Messaggi
    69
    Puoi gestire in maniera semplice con il selettore css "hover".

    ipotizzo una struttura html semplicissima per farmi capire:

    codice:
    <div class="mymenu">
      <div>mostra menu</div>
      <ul class="mymenu_content">
        <li><a href="#">item menu 1</a></li>
        <li><a href="#">item menu 2</a></li>
        <li><a href="#">item menu 3</a></li>
      </ul>
    </div>

    e utilizzo il selettore :hover in questo modo nel css associato:

    codice:
    /*nascondo il contenuto del menu*/
    
    .mymenu_content {
      display:none;
    }
    
    /*associo all'evento hover applicato 
    al box principale del menu una modifica 
    del display del contenuto del menu*/
    
    .mymenu:hover  .mymenu_content {
      display:block;
    }

    Naturalmente esistono metodi che ti permettono di avere maggiore controllo con effetti di transizione in entrata e in uscita. Ma qui c'è una base di partenza su cui puoi ragionare.
    Ultima modifica di tecinese; 08-03-2016 a 12:56

  5. #5
    Ci provo! Grazie!

  6. #6
    Ci sono quasi riuscito ma ho un problema. Quando vado con il puntatore nel punto dove scende il box, anziché scendere soltanto, sposta anche tutto il menù.
    HTML
    codice HTML:
    <html>
    <head>
    <title>Menu AGT</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css.css" media="screen">
    </head>
    <body>
    <nav> 
    <ul class="mymenu">
    <li class="inline"><a href="#">Home</a></li>
    <li id="itinerari" class="inline"><a href="#">Catalogo</a>
    <ul class="mymenu_content">
    <li class="float">
    <ul>
    <p>Bevande<p>
    <li>Vini</li>
    <li>Vinsanto e Grappa</li>
    <li>Spumanti</li>
    <li>Birre Artigianali</li>
    <li>Succhi di frutta</li>
    <li>Caffè e Orzo</li>
    <li>Tè e tisane</li>
    </ul>
    </li>
    <li class="float">
    <ul>
    <p>Dispensa</p>
    <li>Olio</li>
    <li>Sott’olio e salamoia</li>
    <li>Aceto Balsamico</li>
    <li>Composte all’Aceto Balsamico</li>
    <li>Aromi</li>
    <li>Gelatine</li>
    <li>Sughi, ragù e pesto</li>
    <li>Patè e creme</li>
    <li>Confetture e Marmellate</li>
    <li>Miele</li>
    <li>Minestre e contorni</li>
    <li>Creme spalmabili</li>
    <li>Prodotti da forno</li>
    </ul>
    </li>
    <li class="float">
    <ul>
    <p>Cereali</p>
    <li>Pasta di grano duro</li>
    <li>Pasta e Farina di farro</li>
    <li>Riso, Farro e Orzo</li>
    <li>Gallette e farro soffiato</li>
    </ul>
    </li>
    <li class="float">
    <ul>
    <p>Dolci</p>
    <li>Biscotti</li>
    <li>Pasticceria</li>
    <li>Caramelle</li>
    </ul>
    </li>
    <li class="float">
    <ul>
    <p>Benessere</p>
    <li>Cosmesi</li>
    <li>Monaci di Vallombrosa</li>
    <li>Estratti di erbe</li>
    </ul>
    </li>
    <li class="float">
    <ul>
    <p>Idee regalo</p>
    <li>Gift Card</li>
    <li>Confezioni bottiglie</li>
    <li>Sacchetti regalo</li>
    <li>Scatole regalo</li>
    <li>Cesti regalo</li>
    <li>Oggetti per la casa</li>
    <li>Magliette</li>
    <li>Ceramica</li>
    </ul>
    </li>
    </ul>
    </li>
    <li class="inline"><a href="#">Contatti</a></li>
    <li class="inline"><a href="#">Dove siamo</a></li>
    </ul> 
    </nav>
    </body>
    </html>
    CSS
    codice:
    .mymenu_content{
    display:none;
    font-family: 'Open Sans', sans-serif;
    background: #ffffff;
    border: 1px solid #ebebeb;
    
    }
    
    
    .mymenu {
    list-style-type: none!important;
    float: right!important;
    }
    
    
    #itinerari:hover .mymenu_content {
    display:block;
    }
    #itinerari:hover .mymenu_content ul{
    list-style-type:none;
    display: block;
    }
    #itinerari:hover .mymenu_content li{
    list-style-type:none;
    
    }
    .float {
    float:left;
    width:15%;
    }
    .inline{
    display:inline-block;
    }
    .float ul{
    text-align:left;
    
    }
    Non capisco dov'è l'errore. Scusate ma sono un principiante...

  7. #7
    Utente di HTML.it
    Registrato dal
    Feb 2007
    Messaggi
    69
    Succede perché ".mymenu_content" è molto grande e quando imposti il display a block anche il tag genitore riadatta la sua larghezza al contenuto.
    Per risolvere la questione puoi la vorare sulla proprietà "position" e rendere indipendente la dimensione del contenuto dal contenitore:

    codice:
    .mymenu_content {
      position:absolute;
    
      /*
      devi anche assegnare una larghezza adeguata
      per le dimensioni del menu
      e assegnare la proprietà right visto che il menu nella versione che proponi è collocato a destra
      */
      width: 100%;
      right:0;
    }

  8. #8
    Ci sono riuscito!! Grazie!!!!

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