+ Rispondi alla Discussione
Risultati da 1 a 8 di 8

Domanda su un menu sito web

Ultimo Messaggio di Dani9 il:
  1. #1
    User
    Data Registrazione
    Dec 2011
    LocalitÓ
    Siracusa
    Messaggi
    10

    Domanda su un menu sito web

    Buonasera a tutti ho una domanda.

    Ho trovato in giro sul web un menu orizzontale fatto con CSS, HTML.


    visibile qui:
    Codice:
    loasidelweb. netsons.org/proof/proof.html

    il codice HTML di questo menu Ŕ:


    Codice:
    <nav class="nav">
        <ul>
             <li class="nav li"><a href="#"><div>Home</div></a></li>
             <li class="nav li"><a href="#"><div><i class="fa fa-database"></i></div><div>Last sample</div></a></li>
             <li class="nav li"><a href="#"><div><i class="fa fa-table"></i></div><div>Last sample</div></a></li>
             <li class="nav li"><a href="#"><div><i class="fa fa-history"></i></div><div>Last sample</div></a></li>
             <li class="nav li"><a href="#"><div><i class="fa fa-info"></i></div><div>Last sample</div></a></li>
             <li class="nav li"><a href="#"><div ><i class="fa fa-folder"></i></div><div>Last sample</div></a>
             <ul>
               <li class="nav ul"><a href="#"><div><i class="fa fa-desktop fa-1x"></i></div><div>Design</div></a></li>
               <li class="nav ul"><a href="#"><div><i class="fa fa-cog fa-1x"></i></div><div>Development</div></a></li>
               <li class="nav ul"><a href="#"><div><i class="fa fa-code fa-1x"></i></div><div>Graphics</div></a></li>
            </ul>
            </li>
             <li class="nav li"><a href="#"><div><i class="fa fa-clock-o"></i></div><div>Last sample</div></a></li>
                    
        </ul>
    </nav>

    il CSS:


    Codice:
    .nav {
        background-color:#39C;
        width:auto;
        }
     
    .nav ul {
        margin:0;
        padding:0;
        }
     
    .nav ul li {
        list-style:none;
        display:inline-block;
        margin:0;
        }
     
    .nav ul li a {
        display:block;
        text-decoration:none;
        text-align:center;
        padding:10px 30px 10px 30px;
        color:#333;
        font-size:18px;
        font-family:Arial, Helvetica, sans-serif;
        transition: color 0.5s, background 0.5s;
        -webkit-transition: color 0.5s, background 0.5s; /* Safari */
        }   
         
    .nav ul li:hover a {    
        color:#efefef;
        padding-bottom:10px;
        background-color:#105476;
        transition: color 0.5s, background 0.5s;
        -webkit-transition: color 0.5s, background 0.5s; /* Safari */
        }
        .nav ul li ul {
        display:none;
        }   
         
    .nav ul li:hover ul {
        z-index:4;
        position:absolute;
        display:block;
    }   
     
    .nav ul li ul
    {
        position:relative;       
        -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
           -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    .nav ul li ul:before, .nav ul li ul:after
    {
        content:"";
        position:absolute; 
        z-index:2;
        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
        box-shadow:0 0 20px rgba(0,0,0,0.8);
        top:50%;
        bottom:0;
        left:10px;
        right:10px;
        -moz-border-radius:100px / 10px;
        border-radius:100px / 10px;
    }
     
    .nav ul li ul li {
        list-style:none;
        display:block;
        float:none;
        }
     
    .nav ul li ul li:hover a {  
        color:#105476;
        padding-bottom:10px;
        background-color:#efefef;
        transition: color 0.5s, background 0.5s;
        -webkit-transition: color 0.5s, background 0.5s; /* Safari */
        }
     
    .nav ul li ul li {}
     
    .nav ul li ul li a {
        padding:5px 15px 5px 15px;
        text-align:left;
        }
     
    .nav ul li ul li a i {
        min-width:20px;
        padding-right:10px;
        }
    .nav li > a:after { content: ' >'; }
     
       
    .nav > li > a:after {content: ' ╗'; } 
     
      
    .nav li > a:only-child:after {content: ''; }
    
    
      .fa{
                font-size: 40px;
                line-height: 70px;
            }
            .fa-bars{
                color: #3498db;
                }



    Vorrei sapere se Ŕ possibile fare in modo che le voci di sottomenu vengano visualizzate solo quando io clicco alla voce principale e non al passaggio del mouse.
    Voglio ottenere questo perchÚ quando inserisco il menu nel sito passando il mouse le voci di sottomenu compaiono ma se tento di cliccarne una scompaiono velocemente.
    Cosa che non fa nel link che vi ho inserito sopra.


    Grazie

  2. #2
    User
    Data Registrazione
    Jul 2014
    LocalitÓ
    Milano
    Messaggi
    253
    Ciao Jumpy83,

    Le voci che vedi nei sotto men¨ vengono per forza visualizzate quando ci passi sopra con il mouse, anche perchŔ sono state create proprio per questo e poi non Ŕ possibile anche per un altro motivo, se tu clicchi sulla voce principale andrai alla pagina che hai cliccato

  3. #3
    User
    Data Registrazione
    Dec 2011
    LocalitÓ
    Siracusa
    Messaggi
    10
    Citazione Originariamente Scritto da Dani9 Visualizza Messaggio
    Ciao Jumpy83,

    Le voci che vedi nei sotto men¨ vengono per forza visualizzate quando ci passi sopra con il mouse, anche perchŔ sono state create proprio per questo e poi non Ŕ possibile anche per un altro motivo, se tu clicchi sulla voce principale andrai alla pagina che hai cliccato
    uhm...effettivamente ...

    oggi ho voluto fare una prova cominciando da zero e seguendo una guida. Per˛ ho il problema che le voci di sottomenu sono visualizzate verso l'alto e non verso il basso.
    Ecco i codici:

    Codice:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    
    /* Solo per il men├╣ principale (quello orizzontale) */
    #navbar {
    	height: 70px;
    }
    .navbar > li,
    .navbar > li > a
    
    
    /* Solo per i sotto-men├╣ */
    #navbar ul {
    	position: absolute; /* Necessario affinch├ę i sotto-men├╣ siano indipendenti, per quanto riguarda le dimensioni, dal <li> che li contiene */
    }
    
    
    /* Per tutti i men├╣ (quelli orizzontale ed eventuali sotto-men├╣) */
    #navbar, #navbar ul {
    	.background {color:orange;}
    	
    }
    
    
    /* Tutti i <li> */
    #navbar li {
    	float: left;
    	list-style: none;
    	line-height: 25px;
    	display: inline;
    }
    
    
    
    
    /* Solo i <li> dei sotto-men├╣ (riscrive precedenti regole) */
    #navbar ul li {
    	display: inline-block;
    	float: none;
    }
    #navbar li ul {
    
    
    	display: none;
    }
    #navbar li ul li {
    	list-style:none;
    	margin:0;
    	padding:0;
    }
    
    
    
    
    
    
    /* Tutti gli <a> */
    #navbar a {
    	color: black;
    	display: block;
    	font-size: 20px;
    	padding: 0 10px;
    	text-decoration: none;
    	list-style: none; /*list-style e float mi rendono il menu orizzontale*/
    	float: left;
    }
    
    
    /* Tutti gli <a> al passaggio del mouse sul <li> che li contiene
    	(il > ├Ę necessario affinch├ę venga applicato solo al primo figlio <a>, altrimenti avrebbe effetto anche sui sotto-men├╣
    	al passaggio del mouse sul <li> che contiene il sottomen├╣) */
    #navbar li:hover > a {
    	background: red;
    }
    #navbar a:visited{
    display: block;
    padding: 4px 16px;
    color: #fff;
    text-decoration: none;
    }
    #navbar a:focus
    #navbar a:hover
    
    
    #navbar a:active{
    background-color: #D76120;
    color: #FFFFFF;
    text-decoration: none;
    }
    #navbar li:hover ul{
    	display: block;
    	position: absolute;
    	width:130px;
    	padding: 0;
    	margin: 0 0 0 -1px;
    	border:1px solid #D76120;
    	background: #2D4E6C;
    	font-size:.8em;
    }
    
    
    #navbar li li {
    	border-bottom:1px solid #D76120;
    	width: 130px;
    }
    
    
    .fa{
                font-size: 40px;
                line-height: 70px;
            }
    .fa-bars{
                color: #3498db;
            }

    Codice:
    <div id="navbar">
    	<ul>
    	<li><a href="pagina1.html"><i class="fa fa-home"></i><div>Home</div></a></li>
    	<li><a href="pagina1.html"><i class="fa fa-home"></i><div>ciao</div></a>
    	 <ul>
       <li><a href="#">Roma</a></li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Torino</a></li>
     </ul>
     </li>
    	<li><a href="pagina4.html"><i class="fa fa-home"></i><div>ciao</div></a></li>
    	<li><a href="pagina5.html"><i class="fa fa-home"></i><div>ciao</div></a></li>
    	</ul>
    	
    </div>

    come mai questo fatto?

    grazie per la risposta

  4. #4
    User
    Data Registrazione
    Jul 2014
    LocalitÓ
    Milano
    Messaggi
    253
    Strano, questo di solito capita quando sotto al men¨ c'Ŕ qualcosa che impedisce alla sottolista di essere rivolta verso il basso, e quindi per mancanza di spazio la lista Ŕ rivolta verso l'alto

  5. #5
    User
    Data Registrazione
    Dec 2011
    LocalitÓ
    Siracusa
    Messaggi
    10
    Posto la soluzione al secondo problema che mi Ŕ stata data in un altro forum (in lingua inglese)
    Praticamente mi hanno detto di aggiungere questo

    Codice:
    #navbar li{   position: relative;  }
    #navbar li:hover ul {    top:100%;    }

  6. #6
    User
    Data Registrazione
    Jul 2014
    LocalitÓ
    Milano
    Messaggi
    253
    Risolto il problema ?

  7. #7
    User
    Data Registrazione
    Dec 2011
    LocalitÓ
    Siracusa
    Messaggi
    10
    Citazione Originariamente Scritto da Dani9 Visualizza Messaggio
    Risolto il problema ?

    solo il secondo.
    il primo (cioŔ come riuscire a cliccare i menu che si nascondono troppo presto) no.

    Per˛ sono riuscito a capire che il fatto Ŕ dovuto ad un'area widget che ho sotto il menu. infatti togliendo questa area il problema si risolve.

    Purtroppo l'area Ŕ proprio il fulcro del mio progetto.. lunedý ci studier˛ ancora su...

  8. #8
    User
    Data Registrazione
    Jul 2014
    LocalitÓ
    Milano
    Messaggi
    253
    Quindi il problema era come avevo indicato io e che quindi c'era qualcosa sotto il men¨ che impediva al sottomen¨ di essere visualizzato verso il basso ?

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB Ŕ Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] Ŕ Attivato
  • Il codice [VIDEO] Ŕ Attivato
  • Il codice HTML Ŕ Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.