Menu che si apre al click

di
Kisati
il
3 risposte
K
Kisati
Pochi posts
Iscritto da
ago, 2012
Messaggi:
1

Menu che si apre al click

Ciao a tutti sono qui con un altro problema xD (sta volta non riguarda il pc)
volevo sapere come faccio a far aprire un menu cliccando su una scritta o su un immagine
ps. di javascript e altri linguaggi io sto a 0 xD io so programmare solo in c++ php html e css quindi se trovate una soluzione in javascript o altri linguaggi potreste spiegarmi tutto chiaramente al posto di darmi solo il codice?
vorrei fare una cosa cosi

spero di essere stato abbastanza chiaro

3 Risposte

  • E
    elle0087
    Utente Attivo
    Iscritto da
    ott, 2010
    Messaggi:
    173

    Re: Menu che si apre al click

    Ciao,
    ti allego il codice html e il javascript e css....

    pagina HTML
    
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" media="screen" href="css/css.css" />
<script type="text/javascript" src="jq.js"></script>

<body>
<div id="menu">
    <ul>
        <li>
            <a href="#nogo">Link 1</a>
            <ul>
                <li><a href="#nogo">Link 1-1</a></li>
                <li><a href="#nogo">Link 1-2</a></li>
                <li><a href="#nogo">Link 1-3</a></li>
            </ul>
        </li>
        <li>
            <a href="#nogo">Link 2</a>
            <ul>
                <li><a href="#nogo">Link 2-1</a></li>
                <li><a href="#nogo">Link 2-2</a></li>
                <li><a href="#nogo">Link 2-3</a></li>
            </ul>
        </li>
        <li>
            <a href="#nogo">Link 3</a>
            <ul>
                <li><a href="#nogo">Link 3-1</a></li>
                <li><a href="#nogo">Link 3-2</a></li>
                <li><a href="#nogo">Link 3-3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
    JS 
    
$(document).ready(function () {
      $('#nav li').hover(
		function () {
			//mostra sottomenu
			$('ul', this).stop(true, true).delay(50).slideDown(100);
 
		}, 
		function () {
			//nascondi sottomenu
			$('ul', this).stop(true, true).slideUp(200);		
		}
	);
});

    

#menu{padding:0;margin:0;}
#menu ul{padding:0;margin:0;}
#menu li{position: relative;float: left;list-style: none;margin: 0;padding:0;}

/*
Posso adesso dare un pò di stile ai links:

    larghezza width:100px;
    altezza height:30px;
    dichiaro come blocco display:block;
    tolgo la sotto lineatura dei links text-decoration:none;
    allineo il testo sia orizzontalmente text-align: center; che verticalmente line-height:30px;
    colore di sfondo nero background-color:black; e un colore di testo bianco color:white;
*/

#menu li a{width:100px;height: 30px;display: block;text-decoration:none;text-align: center;line-height: 30px;background-color: black;color: white;}

/*
Per avere un minimo d’effetto visivo, cambio il colore di sfondo (da nero a rosso) allo stato :hover del link contenuti negli items della lista (li):

*/


#menu li a:hover{background-color: red;}

/*
Adesso, posiziono i sub elementi:

Uso la proprietà  css position:absolute; per rimuovere i ‘sub’ ul del flusso della pagina, li sposto di 30px partendo dalla parte superiore in maniera che si ritrovano sotto
il primo elemento con top:30px; (30px essendo l’altezza impostata per prima)
*/

#menu ul ul{position: absolute;top: 30px;
/*
Uso la proprietà css visibility:hidden; (visibilita nascosta) per nasconderli:
*/
            visibility: hidden;}

/*
Finalemente, finisco il nostro menu css dropdown, facendo il modo che on :hover, i ‘sub’ ul sono visibile, cambiando semplicemente la sua proprietà  visibility a visible (visibile) invece di hidden (nascosto):
*/

#menu ul li:hover ul{visibility:visible;}
    ci stò studiando anchio...
    cmq il codice html pure non fa altro che creare un menu standard, mentre il js crea l effetto di ritardo e il css la grafica orrizontale e di mostra/nascondi...
    questo è un esempio trovato sul web cmq, che ho preso per studiarci sopra.

    spero di esserti stato utile!
  • L
    Lysz210
    Utente Attivo
    Iscritto da
    mar, 2012
    Messaggi:
    266

    Re: Menu che si apre al click

    Quello che chiede kisati e' leggermente diverso dall'effetto dato ha hover
    io ho provato a completare un po con questa soluzione 
    
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>menu</title>
		<meta name="description" content="" />
		<meta name="author" content="win_1" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<script type="text/javascript" src="js/jQuery/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('.voce').click(
					function(ev) {
						ev.stopPropagation();
						$('ul', this).toggleClass('hide');
					}
				)
				$(document).click(function() {
					$('.sottomenu').addClass('hide');
				})
			})
		</script>
		<style type="text/css">
			.hide {
				display: none;
			}
			.red {
				background-color: red;
			}
			.sottomenu {
				width: 200px;
				background-color: aqua;
			}
			#menu {
				width: 400px;
				background-color: blue;
			}
		</style>
	</head>

	<body>
		<div>
			<header>
				<h1>menu</h1>
			</header>
			<nav>
				<ul id="menu">
					<li class="voce">
						<p>Home</p>
						<ul class="sottomenu hide">
							<li>voce1</li>
							<li>voce2</li>
						</ul>
					</li>
					<li class="voce">
						<p>Contact</p>
						<ul class="sottomenu hide">
							<li>voce1</li>
							<li>voce2</li>
						</ul>
					</li>
				</ul>
			</nav>

			<div>

			</div>

			<footer>
				<p>
					&copy; Copyright  by win_1
				</p>
			</footer>
		</div>
	</body>
</html>
    questo e' il codice completo,
    al click sulla voce del menu fa il toggle della classe hide che nasconde l'elemento, il ev.stopPropagation serve a fermare la propagazione dell'evento fino alla radice.
    il click in un qualunque punto del documento grazie alla propagazione invece aggiunge a la classe hide a tutti i sottomenu.
    questo documento e' semplice ma nel caso di gestioni piu complicati si dovrebe richiamare manualmente il gestore d'evento del click su document ne caso si abbia molti elementi annidati che hanno eventi di click differenti ed evitare di innescarli tutti.
    Scusate per il pessimo layout dell'esempio.
    Immagino che sia piu o meno questo quello che intendevi come soluzione, ho cercato di ricreare l'effetto che di solito si ha con i menu dei programmi dei pc.
  • R
    raffux3
    Pochi posts
    Iscritto da
    giu, 2013
    Messaggi:
    1

    Re: Menu che si apre al click

    Ciao, ho cercato di usare questi codici per un blog, il problema è che funziona solo la prima parte, mi puoi aiutare per favore?
Devi accedere o registrarti per scrivere nel forum
3 risposte