Discussione chiusa
Pagina 1 di 2 12 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14

[Javascript]Evidenziare voce di menù selezionata

  1. #1
    Marco2012 non è in linea Scolaretto
    Post
    71
    Like Inviati  
    0
    Like Ricevuti  
    0
    Ciao a tutti,
    ho un problema con l'html e css.
    Ho una pagina in cui c'è un menu orizzontale fatto con css.
    Tutti gli effetti funzianano bene..
    Il problema è che i link puntano ad un iframe interno alla pagina (target="frame..")
    che quindi sarà l'unica cosa ad essere caricata di volta in volta.
    Vorrei che la voce del menù cliccata rimanga evidenziata. E' possibile?
    Grazie!

  2. #2
    L'avatar di bumm
    bumm non è in linea Topo di biblioteca Ultimo blog: [VB2010] ComboBox ed Enumeratori
    Post
    2,140
    Blogs
    1
    Like Inviati  
    0
    Like Ricevuti  
    0
    Il problema è che i link puntano ad un iframe interno alla pagina (target="frame..")
    che quindi sarà l'unica cosa ad essere caricata di volta in volta.
    Vorrei che la voce del menù cliccata rimanga evidenziata. E' possibile?
    Quindi la devi evidenziare finché non premi un altro elemento del menu? o su qualche altro evento?
    Inoltre posta il codice qui. Se sappiamo come fatto il tuo menu, come possiamo aiutarti?
    ℹ️ Leggi di più su bumm ...

  3. #3
    Marco2012 non è in linea Scolaretto
    Post
    71
    Like Inviati  
    0
    Like Ricevuti  
    0
    Il codice è quello di un normalissimo menù fatto con CSS quindi:
    codice HTML:
    <ul id="menutab" >
    	<li ><a href="/pag1.html" target="iframe">VOCE1</a></li>
        <li ><a href="/pag2.html" target="iframe">VOCE2</a></li>
        <li><a href="/pag3.html" target="iframe">VOCE3</a></li>
        <li><a href="/pag4.html" target="iframe">VOCE4</a></li>
    </ul>
    <iframe src="origine.html" width="100%" height="700" scrolling="no" frameborder="0" id="iframe" name="iframe"></iframe>
    con stile quasi essenziale...
    codice HTML:
    <style>
    #menutab {
    	position:relative;
    	width:270px;
    	font-size: 20px;
    	font-family: arial, helvetica, sans-serif;
    	margin: 0 auto;
    	text-align:center;
    }
    #menutab ul {margin: 0 auto; padding: 0}
    #menutab li {display: inline; margin:0; padding: 0}
    #menutab a:link, #menutab a:visited {display: block; text-align: left; text-decoration: none; background: #DEDCDC; color: #05181E; border:0px solid #666; float:left;}
    #menutab a:hover {background: #FFF; color: #41545F; border-color: #41545F; padding-left: 0;}
    #menutab li.active a {
    	   color: #0F0;
    	   text-decoration:none;
       }
    </style>
    Il problema da risolvere è questo:
    Una volta che clicco sulla voce di menù VOCE1 e quindi nel iframe viene caricata la pagina pag1.html, la voce rimanga evidenziata per far capire quale pagina è mostrata. E così via per tutte le altre pagine...

  4. #4
    L'avatar di bottomap
    bottomap non è in linea Amanuense
    Post
    4,130
    Like Inviati  
    0
    Like Ricevuti  
    0
    Ciao,

    Per "evidenziata" immagino tu intenda l'applicazione dell'ultimo style all'li selezionato. Non è complicatissimo, anche se richiede un po'di interazione tra javascript e DOM.

    Devi semplicemente collegare all'handler onclick delle singole voci una funzione opportuna che:
    - Toglie l'eventuale attributo class a tutti i tag <li>.
    - Aggiunge class="active" all'li su cui si è cliccato.
    Visto che non hai alcun id, devi lavorare con parent e childNodes e la funzione potrebbe essere un po'intricata, ad ogni modo dovrebbe funzionare senza problemi con l'approccio descritto.

    Ciaociao
    ℹ️ Leggi di più su bottomap ...

  5. #5
    Marco2012 non è in linea Scolaretto
    Post
    71
    Like Inviati  
    0
    Like Ricevuti  
    0
    ..Non sarà complicato.. ma la tua risposta mi ha fatto cadere le braccia!
    DOM? What's DOM??
    Per tutto il resto non ho le conoscenze adatte.. pensavo che con il CSS si potesse risolvere..o al massimo due righe di Javascript..Non è cosi??!!??

  6. #6
    L'avatar di bottomap
    bottomap non è in linea Amanuense
    Post
    4,130
    Like Inviati  
    0
    Like Ricevuti  
    0
    Ciao,

    Niente di trascendentale... il DOM è il Document Object Model, ossia l'albero che sottende la pagina html. Interagire con il DOM significa interagire con gli elementi che compongono l'albero della pagina. Quando una funzione javascript usa una scrittura del tipo "... document.getElemetById('elemento').childNodes[0].value= ..." si dice che interagisce con il DOM.
    L'elemento document (o meglio l'elemento window di cui document è diretto discendente) è la radice dell'albero.

    In sostanza qualsiasi funzione Javascript che interagisce con il contenuto della pagina accede al DOM. Niente di più complicato... la funzione javascript può richiedere qualcosa di più (ma anche non molto di più) di un paio di righe.
    Come poi ti consiglieranno a breve, framework appositi tipo jQuery possono facilitarti un poco il compito evitando buona parte del lavoro. Purtroppo per quanto riguarda questi framework non ti saprei dare indicazioni troppo precise, per cui meglio aspettare l'intervento di bumm.

    Ciaociao
    ℹ️ Leggi di più su bottomap ...

  7. #7
    L'avatar di bumm
    bumm non è in linea Topo di biblioteca Ultimo blog: [VB2010] ComboBox ed Enumeratori
    Post
    2,140
    Blogs
    1
    Like Inviati  
    0
    Like Ricevuti  
    0
    Come poi ti consiglieranno a breve, framework appositi tipo jQuery possono facilitarti un poco il compito evitando buona parte del lavoro. Purtroppo per quanto riguarda questi framework non ti saprei dare indicazioni troppo precise, per cui meglio aspettare l'intervento di bumm.
    Eccomi!
    codice HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
      
    	<style type="text/css">
    #menutab {
    	position:relative;
    	width:270px;
    	font-size: 20px;
    	font-family: arial, helvetica, sans-serif;
    	margin: 0 auto;
    	text-align:center;
    }
    #menutab ul {margin: 0 auto; padding: 0}
    #menutab li {display: inline; margin:0; padding: 0}
    .selected {background-color: #00FF00;}
    .entered {background-color: #CCFFCC;}
    </style>
    <script type="text/javascript">
            //viene eseguito quando il documento è stato caricato completamente
    	$(document).ready(function(){
    		//eventi per cambiare lo stile on mouse enter
    		$('#menutab > li').bind('mouseenter mouseleave', function() {
    			$(this).toggleClass('entered');
    		});
    	});
    	//attivazione del menu
    	function setActiveMenu(mnuId){
    		$('#menutab > li').removeClass('selected');
    		$('#' + mnuId).addClass('selected');
    		return true;
    	}
    </script>
    	</head>
    	<body>
    	<ul id="menutab" >
    		<li id="li1" onclick="setActiveMenu('li1')"><a onclick="setActiveMenu('li1')" href="http://www.google.it" target="iframe">GOOGLE</a></li>
    		<li id="li2" onclick="setActiveMenu('li2')"><a onclick="setActiveMenu('li2')" href="http://www.yahoo.it" target="iframe">YAHOO</a></li>
    		<li id="li3" onclick="setActiveMenu('li3')"><a onclick="setActiveMenu('li3')" href="http://www.rambler.ru" target="iframe">RAMBLER</a></li>
    		<li id="li4" onclick="setActiveMenu('li4')"><a onclick="setActiveMenu('li4')" href="http://www.masterdrive.it" target="iframe">MASTERDRIVE</a></li>
    	</ul>
    <iframe src="origine.html" width="100%" height="700" scrolling="no" frameborder="0" id="iframe" name="iframe"></iframe>
    	</body>
    </html>
    Ultima modifica di bumm; 07-12-2010 11:09 
    ℹ️ Leggi di più su bumm ...

  8. #8
    Marco2012 non è in linea Scolaretto
    Post
    71
    Like Inviati  
    0
    Like Ricevuti  
    0
    MITICO BUMM!!! 1000 punti!
    Grazie infinite!!!
    Grazie anche a bottomap per la didattica!

  9. #9
    L'avatar di bottomap
    bottomap non è in linea Amanuense
    Post
    4,130
    Like Inviati  
    0
    Like Ricevuti  
    0
    Per completezza posto anche la soluzione senza jQuery... in questo caso non è molto più lunga (ma sicuramente un po'meno elegante), dal momento che ci si può attacare agli id dei singoli li. Non è presente l'effetto .entered in questo caso:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <style type="text/css">
    #menutab {
    	position:relative;
    	width:270px;
    	font-size: 20px;
    	font-family: arial, helvetica, sans-serif;
    	margin: 0 auto;
    	text-align:center;
    }
    #menutab ul {margin: 0 auto; padding: 0}
    #menutab li {display: inline; margin:0; padding: 0}
    .selected {background-color: #00FF00;}
    </style>
    <script type="text/javascript">
    
    	//attivazione del menu
    	function setActiveMenu(mnuId){
    	  var ul=document.getElementById("menutab");
    	  var lis=ul.getElementsByTagName("LI");	  
    	  for(var i=0; i<lis.length; i++){
    	     if(lis[i].id==mnuId)lis[i].className="selected";
    	     else lis[i].className="";
              }
              return true;
    	}
    </script>
    	</head>
    	<body>
    	<ul id="menutab" >
    		<li id="li1" onclick="setActiveMenu('li1')"><a href="http://www.google.it" target="iframe">GOOGLE</a></li>
    		<li id="li2" onclick="setActiveMenu('li2')"><a href="http://www.yahoo.it" target="iframe">YAHOO</a></li>
    		<li id="li3" onclick="setActiveMenu('li3')"><a href="http://www.rambler.ru" target="iframe">RAMBLER</a></li>
    		<li id="li4" onclick="setActiveMenu('li4')"><a href="http://www.masterdrive.it" target="iframe">MASTERDRIVE</a></li>
    	</ul>
    <iframe src="origine.html" width="100%" height="700" scrolling="no" frameborder="0" id="iframe" name="iframe"></iframe>
    	</body>
    </html>
    
    Ultima modifica di bottomap; 07-12-2010 11:58 
    ℹ️ Leggi di più su bottomap ...

  10. #10
    Marco2012 non è in linea Scolaretto
    Post
    71
    Like Inviati  
    0
    Like Ricevuti  
    0
    a questo punto una domanda (sicuramente di rapida e semplice risposta):
    Se quando carico la pagina la prima volta (e quindi anche la pagina dentro il frame che sarà origine.html) voglio già evidenziare dove mi trovo (quindi la voce del menù ORIGINE, per esempio),
    cosa devo settare nell' iframe?

Discussione chiusa
Pagina 1 di 2 12 ultimoultimo

Potrebbero interessarti anche ...

  1. [javascript] Evidenziare voce del menu relativa alla pagina selezionata
    Da PavlovTheDog nel forum HTML, CSS e JavaScript
    Risposte: 5
    Ultimo Post: 25-04-2018, 08:12
  2. Voce di Menù
    Da Lavez84 nel forum Visual Basic 6
    Risposte: 4
    Ultimo Post: 08-07-2009, 17:49
  3. MonthCalendar evidenziare una data selezionata
    Da UbySoft71 nel forum Visual Basic .Net
    Risposte: 3
    Ultimo Post: 24-08-2008, 11:40
  4. Risposte: 7
    Ultimo Post: 19-07-2007, 18:36
  5. Creare voce menu'
    Da Orso 33 nel forum Microsoft Word
    Risposte: 2
    Ultimo Post: 31-07-2006, 08:24