Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    358

    Menù a tendina orizzontale a comparsa CSS

    Prendendo spunto dal menù di questo sito
    http://www.selvanova.com/vini/ita/
    sto tentando di ricreare il menu a tendina a comparsa.

    Ho visto un po il codice tramite la sorgente pagina e ho impostato in questo modo il mio codice HTML

    codice:
    <div  id="menu">
    
    <ul>
    [*]L'azienda
    <ul>[*]La storia[*]Le persone[*]Mission e Vision[/list]
    
    [*]Prodotti e Marchi
    <ul>[*]Categoria1[*]Categoria2[*]Categoria3[*]Categoria4[*]Categoria5[*]Categoria6[*]Categoria7[*]Categoria8[*]Categoria9[*]Categoria10[/list]
    
    [*]Servizi e Tecnologie
    <ul>[*]Servizi[*]Tecnologie[/list]
    
    [*]Gallery
    <ul>[*]Gallery[*]Case study[/list]
    
    
    [*]Testimonials
    <ul>[/list]
    
    [*]Contatti
    <ul>[*]Dove siamo[*]Calcola il percorso[*]Richiedi Info[/list]
    
    [/list]
    </div>





    Poi ho provato a scrivere qualche riga di CSS

    codice:
    /*------------------------------Inizio menu*/
    	
    #menu{
    	     background:url(../img/menu.png);
    	     height:66px;
    	     width:100%;
    	      }
    
    #menu ul{
    }
    
    #menu li{
            position: relative;
            float: left;
            list-style: none;
    } 
    
    #menu li a{
    width:184px;
    height: 30px;
    display: block;
    text-decoration:none;
    text-align: center;
    line-height: 30px;
    color:#CCC;
    } 
    
    #menu li a:hover{
    background-color: red;
    } 
    
    
    
    #menu ul ul{
    position: absolute;
    top: 30px; 
    visibility: hidden;
    } 
    
    #menu ul li:hover ul{
    visibility:visible;
    } 
    		  
    		  	  
    		  
    /*------------------------------fine menu*/


    Il menù funziona l'unica cosa che non mi riesce è quella di mettere le sottovoci in orizzontale.
    P.S l'effetto con cui compaiono le sottovoci nel sito che ho linkato sopra si tratta di JS?
    Nel sorgente mi sembra di vedere solo due js (jcarousel e Fancybox) che non sembrano per quell'effetto

  2. #2
    cio che li fa orizzontali nel sito da te indicato dovrebbbe essere il
    display:inline-block
    sui tag li del sotto menu ossia nei css :

    ul#menu li.item ul li {
    background:url("../img/bull.gif") no-repeat scroll right center transparent;
    display:inline-block;
    font-size:13px;
    font-style:italic;
    font-weight:bold;
    height:17px;
    line-height:17px;
    margin-right:7px;
    padding-right:15px;
    }


    prova ad inserire qualcosa di corrispondente nei tuoi css
    OUTSHINE '84

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    358
    Avevo gia provato qualcosa di simile ma non riesco a farlo funzionare.
    Il massimo che sono riuscito a fare è dando display:inline-table o position:inherit al menu li le voci si dipongono in orizzontale ma non sono selezionabili.

  4. #4
    cosa intendi per non sono selezionabili? essendo dei link dovresti riuscire a catturare col javascript tutti gli eventi che vuoi. Dovranno pur essere cliccabili . Tu catturi l'onclick e fai un redirect alla pagina che ti interessa oppure metti direttamente il link della pagina nell'href.
    se poi vuoi che cambino aspetto quando il mouse va sopra o ci clicca quello si può fare senza problemi coi css
    OUTSHINE '84

  5. #5
    Utente di HTML.it
    Registrato dal
    Mar 2009
    Messaggi
    358
    No vabbè era per dire che stavo provando varie soluzioni.
    Per esmpio ora ho provato a fare questo

    #menu li ul li {
    position:absolute;
    }

    Le voci presenti nei sotto menu si dispongono tutte sotto la voce genitore una sopra l'altra e non riesco a distanziarle le une dalle altre.
    Ho provato a dare i padding-right e left e soluzioni elementari simili ma non ottengo nulla.
    Non conosco più di tanti truchetti anche perchè è solo un anno che uso con costanza CSS e HTML ed è la prima volta che provo a fare un menu di questo tipo.

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.