Evidenziare voce menù fondo pagina
Autor: Pasquale D.
Visitado 1226,
Followers 1,
Compartido 0
Buon giorno, vi chiedo se da codice è possibile fare questo :
Ho il sito che non ha menù, solo il menù a fondo pagina.
Vorrei ad esempio, cliccando su "Contatti", una volta che il link mi porta alla pagina desiderata, visualizzare con un colore diverso, la voce contatti dal menù a fondo pagina.
Nell'esempio allegato, ci troviamo nella pagina Info
Publicado en
BuongiornoPasquale,
dovresti modificare manualmente il colore dei vari link per ogni pagina,
Per esempio se relizzi unsemplice sito di 3 pagine, avrai un menù di pagina così:
<div id="imBtMn"><a href="index.html">Home Page</a> | <a href="pagina-1.html">Pagina 1</a> | <a href="pagina-2.html">Pagina 2</a> | <a href="pagina-3.html">Pagina 3</a> | <a href="imsitemap.html">Mappa generale del sito</a></div>
devi quindi inserire il codice CSS per cambiare colore (s__tyle="color:red;") nella pagina in cui ti trovi.
Quindi per esempio alla pagina pagina-1.html il menù sara:
<div id="imBtMn"><a href="index.html">Home Page</a> | <a href="pagina-1.html" s__tyle="color:red;">Pagina 1</a> | <a href="pagina-2.html">Pagina 2</a> | <a href="pagina-3.html">Pagina 3</a> | <a href="imsitemap.html">Mappa generale del sito</a></div>
Oppure per non effettuare la modifica tutte le volte puoi inserire delle classi e dei colori nelle impostazioni avanzate, prova a informarti sull'argomento.
Spero di esserti stato utile.
(s__tyle deve poi essere scritto style)
Autor
Ciao Riccardo e grazie intanto.
Ho provato per vedere se funziona, e non mi funziona.
Magari ho sbagliato, ho fatto la prova con la pagina : store.
Ecco il codice :
<div id="imFooPad" style="height: 420px; float: left;"> </div><div id="imBtMn"><a href="index.html">Home Page</a> | <a href="studio.html">Studio</a> | <a href="info.php">Info</a> | <a href="login.html">LogIn</a> | <a href="render.html">Render</a> | <a href="fotografia-3d.html">Fotografia 3D</a> | <a href="comunicazione.html">Comunicazione</a> | <a href="siti-web.html">Siti Web</a> | <a href="video.html">Video</a> | <a href="presentazioni.html">Presentazioni</a> | <a href="corsi.html">Corsi</a> | <a href="cad.html">Cad</a> | <a href="store.html" s__tyle="color:red;">Store</a> | <a href="contatti.html">Contatti</a> | <a href="newsletter.html">Newsletter</a> | <a href="blog.html">Blog</a> | <a href="social.html">Social</a> | <a href="imsitemap.html">Mappa generale del sito</a></div>
Ma se vai sulla pagina store :
http://www.pdagrafica.com/Personale/test/pdagrafica-2013/store.html
La voce Store non è rossa.
Come mai, cosa ho sbagliato?
Autor
Mi correggo : ho scritto Style al posto di s__tyle e funziona.
Grazie!
Sul discorso delle impostazioni avanzate, non ho capito cosa intendi.
Potresti cortesemente esplicitarmelo?
Grazie!
Mah, post-editare con WS non è una cosa pratica (ad ogni aggiornamento le modifiche si annullano).
Se vuoi, prova questo script presente nell'esempio linkato (leggi i commenti in head):
http://lemonsong.altervista.org/test_imBtMn_highlight/
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Autor
Grazie, è esattamente quello che cercavo, ne sai una più del diavolo.
Infatti, una volta che funzionava(l'altro metodo), volevo però provare e capire il discorso sulle impostazioni avanzate, perchè non è pratico modificare il file html.
Mentre cercavo qualcosa come mi hai proposto tu.
Come vedi funziona : http://www.pdagrafica.com/Personale/test/pdagrafica-2013/info.php
Domanda : è fattibile, avere un colore diverso per ogni pagina?
Ho notato un inconveniente : nelle pagine nascoste, mi viene evidenziato il menù home.
http://www.pdagrafica.com/Personale/test/pdagrafica-2013/render-fotorealistici-ristorazione.html
Come lo posso evitare? (al di la di copiare il codice in tutte le pagine tranne quelle nascoste)
Grazie, gentilissimo!
Credo che la soluzione più "semplice" sia inserire nelle pagine, dove vuoi cambiare il colore, un CSS (vedi pagina 2 dell'esempio precedentemente linkato).
Ho notato un inconveniente : nelle pagine nascoste, mi viene evidenziato il menù home.
http://www.pdagrafica.com/Personale/test/pdagrafica-2013/render-fotorealistici-ristorazione.html
Come lo posso evitare? (al di la di copiare il codice in tutte le pagine tranne quelle nascoste)
Ho aggiornato l'esempio online (refresha bene le pagine).
Grazie a Silvana per l'aiuto!
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Dimenticavo la pagina nascosta:
http://lemonsong.altervista.org/test_imBtMn_highlight/pagina-nascosta.html
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Autor
Allora, non so come ringraziarti, per silvana gli invierò un messaggio privato sull'altro forum.
Come puoi vedere funziona :
http://www.pdagrafica.com/Personale/test/pdagrafica-2013/newsletter.html
Ho inserito nella pagina in head ;
<style>#imBtMn a.highlight {color: yellow;}</style>
Riguardo invece la pagina nascosta, la tua funzione e la mia no!
Non sono riuscito a capire le modifiche che hai fatto. Potresti chiarirmele ulteriormente?
Scusami, magari si tratta di una svista.
Grazie!
Hai lasciato il vecchio script, devi rimuoverlo ed inserire il nuovo in tutte le pagine (in head trovi sempre i commenti).
Quei libri che ti ho prestato, non sarebbe l'ora di aprirli?
P.S.
Mi hai mandato un mp chiamandomi Silvana... mhmmm, ho la barba e le gambe molto pelose, vedi tu
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Autor
Ok, adesso funziona!
Ho inserito questo in Head (per il sito)
<style> #imBtMn a.highlight { color: red; } </style><script> $(document).ready(function(){ var str=location.href.toLowerCase(); var isIndex = str.slice(-1); if (isIndex == '/') { $("#imBtMn a[href*='index.']").attr('class', 'highlight'); } $("#imBtMn a").each(function() { if (str.indexOf(this.href.toLowerCase()) > -1) { $("a.highlight").removeClass("highlight"); $(this).addClass("highlight"); } }); }) </script>
e la pagina nascosta così funziona, vedo tutte le pagine in rosso, fatta eccezione per le pagine dove ho inserito :
<style>#imBtMn a.highlight {color: yellow;}</style>
Ho inviato un messaggio a Silvana e anche a te per conoscenza.
Grazie!
Autor
Sono riuscito a mettere ili testo sottolineato ma il grassetto non mi funziona :
<style>
#imBtMn a.highlight {
font-weight: bold;
text-decoration: underline;
color: white;
}
</style>
Perchè?
Grazie!