• J
    User •

    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: ```
    loasidelweb. netsons.org/proof/proof.html

    

il codice HTML di questo menu è:

    <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:

    .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
    0
  • D
    User Attivo •

    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

    0
  • J
    User •

    @Dani9 said:

    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:

    * {
	margin: 0;
	padding: 0;
}


/* Solo per il menù principale (quello orizzontale) */
#navbar {
	height: 70px;
}
.navbar > li,
.navbar > li > a


/* Solo per i sotto-menù */ 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ù) */, ul {
	.background {color:orange;}
	
}


/* Tutti i <li> */ li {
	float: left;
	list-style: none;
	line-height: 25px;
	display: inline;
}




/* Solo i <li> dei sotto-menù (riscrive precedenti regole) */ ul li {
	display: inline-block;
	float: none;
} li ul {


	display: none;
} li ul li {
	list-style:none;
	margin:0;
	padding:0;
}






/* Tutti gli <a> */ 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ù) */ li:hover > a {
	background: red;
} a:visited{
display: block;
padding: 4px 16px;
color: #fff;
text-decoration: none;
} a:focus a:hover

 a:active{
background-color: #D76120;
color: #FFFFFF;
text-decoration: none;
} li:hover ul{
	display: block;
	position: absolute;
	width:130px;
	padding: 0;
	margin: 0 0 0 -1px;
	border:1px solid;
	background: #2D4E6C;
	font-size:.8em;
}

 li li {
	border-bottom:1px solid;
	width: 130px;
}


.fa{
            font-size: 40px;
            line-height: 70px;
        }
.fa-bars{
            color: #3498db;
        }




    <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 :smile5:

    0
  • D
    User Attivo •

    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

    0
  • J
    User •

    Posto la soluzione al secondo problema che mi è stata data in un altro forum (in lingua inglese)
    Praticamente mi hanno detto di aggiungere questo

    #navbar li{   position: relative;  } li:hover ul {    top:100%;    }
    0
  • D
    User Attivo •

    Risolto il problema ?

    0
  • J
    User •

    @Dani9 said:

    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...

    0
  • D
    User Attivo •

    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 ?

    0
Effettua l'accesso per rispondere