Come faccio a creare ad esempio un testo che cliccandoci sopra apra sotto dell'altro testo?

**bisco11** · 12-06-2015, 16:06

Vorrei creare dei una voce e vorrei che cliccando esca una sotto voce (solo al click) quindi nascondere visibilmente una parte e far si che appia solo al click.
Potete farmi un esempio con codice html e css?

**CBF2k15** · 12-06-2015, 16:10

solamente con html e css credo sia impossibile, serve javascript, ma non ho capito bene cosa intendi: vuoi una cosa tipo menu a tendina (accordion) o una funzione che tronchi il testo tipo exerpt e al click ti mostri il resto?

**DakJak** · 12-06-2015, 19:06

Ragazzi direi di esprimere meglio le vostre domande, vista la poca chiarezza, non mi è restato altro che interpretarla questa domanda...

Ti mando il codice diviso in 3 parti:

HTML

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

CSS

codice HTML:

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

/*
Cambiare lo 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;}

JS

codice HTML:

$(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);      
      }
   );
});

**bisco11** · 13-06-2015, 20:40

Per CBF"k15...La seconda opzione

**bisco11** · 13-06-2015, 20:48

Per Dak Jak...il tuo esempio è giusto ti ringrazio. L'unica cosa che vorrei che il sotto menù si visualizzasse al click e non andandoci solo sopra con il mouse. Puoi aiutarmi?

**DakJak** · 14-06-2015, 05:45

codice:

$(document).ready(function () {
      $('#nav li').click()(
      function () {
         //mostra sottomenu
         $('ul', this).stop(true, true).delay(50).slideDown(100);


      }, 
      function () {
         //nascondi sottomenu
         $('ul', this).stop(true, true).slideUp(200);      
      }
   );
});

Dovrebbe essere così, non l'ho testato ma dovrebbe andare ^^"

**bisco11** · 15-06-2015, 11:40

Ciao DakJal,
Non funziona rimane sempre l'hover
Forse va modificato qualcosa nei css?

**bisco11** · 16-06-2015, 13:14

Puoi aiutarmi?

**DakJak** · 17-06-2015, 11:47

Ok ho dovuto fare qualche modifica e qualche ricerca, infatti non riuscivo a modificare l'altro

codice HTML:

<html>	<head>		<title>Funzione Toggle</title>		<script language="javascript" type="text/javascript">			/**			 * Funzione per visualizzare/nascondere determinati elementi			 * @param {elementId} : id dell'elemento da visualizzare/nascondere			 */			function fToggle(elementId) {				// Recupero l'elemento dall'Id				var e = document.getElementById(elementId);								// Se e' visibile lo nascondo				if ( !e.style.display || e.style.display != "none" ) {					e.style.display = "none";				} else {					// Altrimenti lo visualizzo					e.style.display = "block";				}			}		</script>	</head>	<body>		<a onclick="javascript:fToggle('menu1');">+ Espandi Menu'</a>		<div id="menu1" style="display:none;">					<a onclick="javascript:fToggle('elenco1');">+ Espandi Elenco</a>			<ol id="elenco1" style="display:none;">				<li>Voce uno</li>				<li>Voce due</li>				<li>Voce tre</li>				<li>Voce quattro</li>			</ol>					<div>
	</body></html>

**bisco11** · 17-06-2015, 12:13

Ciao.
Ho scritto il codice e ora funziona
Grazie mille.
unica cosa è possibile visualizzare la manina di click quando clicco?

Discussione: Come faccio a creare ad esempio un testo che cliccandoci sopra apra sotto dell'altro testo?

Strumenti discussione

Ricerca discussione

Visualizza

Come faccio a creare ad esempio un testo che cliccandoci sopra apra sotto dell'altro testo?

Permessi di invio