« precedente successivo »
Pagine: 1   Vai giù

Autore Topic: menù al passaggio del mouse  (Letto 3858 volte)

Zambelletti

  • Utente esperto
  • ***
  • Post: 482
menù al passaggio del mouse
« il: 12 Giugno, 2013, 14:19:18 »
Buon giorno e salve a tutti gli amici.


Vorrei realizzare un menù come l'immagine allegata, ovvero al passaggio del mouse su di un menù, il pulsante cambia, fuoriuscendo però di 10/20 pixel superiormente alla fascia che contiene i menù.
Non so se è chiaro.


Qualcuno di voi ha idea di come poterlo realizzare dal punto di vista del codice?
Grazie anticipatamente.
Connesso

Topografo

  • Utente esperto
  • ***
  • Post: 265
Re:menù al passaggio del mouse
« Risposta #1 il: 12 Giugno, 2013, 15:11:52 »
Innanzitutto il pulsante in stato di quiete deve avere lo sfondo che poi copre il pulsante attivato coprirà:


Poi ci sono decine di codici in rete con Javascript e onmouseover

Per semplificarti la vita ho trovato questo :)
http://web.tiscalinet.it/marioq/html/rollover.htm
Connesso

Zambelletti

  • Utente esperto
  • ***
  • Post: 482
Re:menù al passaggio del mouse
« Risposta #2 il: 12 Giugno, 2013, 15:20:11 »
grazie per la risposta, ed è molto carino il link inviato.
Diciamoche il rollhover, ho imparato a farlo. Ma il problema è forse un altro :


Il mio nenù, è alto ad es; 30 pixel, mentre l'immagine al passaggio del mouse è 40 pixel e i 10 pixel in eccesso, fuoriescono solamente dal lato superiore.
Poi, del menù, non ho utilizzato un immagine, ma semplicemente glig strumenti di web site, (che creerà comunque un immagine al momento dell'esportazione)
Inoltre, la barra del menù è attaccata a "0" pixel, con l'header e la pagina vera e propria.


Credi che possa comunque utilizzare il link che mi hai suggerito?

« Ultima modifica: 12 Giugno, 2013, 15:27:22 da Pasquale D. »
Connesso

Topografo

  • Utente esperto
  • ***
  • Post: 265
Re:menù al passaggio del mouse
« Risposta #3 il: 12 Giugno, 2013, 18:38:01 »
Se ti fai un menu tuo e non usi la barra menu di website5 si, ma ti conviene?

Perdi la gestione pagine, i link automatici... la mappa...
Connesso

Zambelletti

  • Utente esperto
  • ***
  • Post: 482
Re:menù al passaggio del mouse
« Risposta #4 il: 12 Giugno, 2013, 18:47:36 »
mi sono espresso male :
Non ho intenzione di fare io il menù.......perchè vado incontro alle cose che dici.


L'unica cosa che debbo fare io è l'immagine del menù al passaggio del mouse, che trasborda oltre il menù, di 10 pixel.
E' più chiaro?
Altrimenti provo a spiegarmi diversamente.
Connesso

Topografo

  • Utente esperto
  • ***
  • Post: 265
Re:menù al passaggio del mouse
« Risposta #5 il: 12 Giugno, 2013, 20:24:43 »
Sei stato chiaro e credo sia impossibile (secondo le prove fatte da me) ma è bello l'effetto che verrebbe.

Però se lo vuoi fare ti spiego come lo farei io... creo l'immagine più alta di 10 pixel in tutte le pagine e (a mano) al posto di questi codici
Codice:
Only registered users can see contents. Please click here to Register or Login.
e per la precisione nelle stringhe tra <a href=""> ... </a>  metto la chiamata ad Onmouseover
es.
Codice:
Only registered users can see contents. Please click here to Register or Login.
, in testata <head> naturalmente tutti i Javascript.

Poi metto da qualche parte le immagini (mi raccomando il percorso in quel codice sopra) e tutto va bene finchè non salvo nuovamente dal programma Website X5 (una modifica minima e tornano i vecchi menu).

A questo punto rimetto a mano tutti i codici per il menù modificati e passo con Filezilla nuovamente i file.

Io farei così, ma mi rimetto ai guru del forum, magari c'è un sistema :)

Magari salvando dei nuovi tasti più grandi con lo sfondo  e senza e cambiando i valori impostazioni avanzate (passo 4) per definirli più grandi del necessario nelle impostazioni menu (e poi inserendoli a mano nella cartella /menu con filezilla)... magari funziona.
Prova... :)
 
« Ultima modifica: 12 Giugno, 2013, 20:31:39 da Topografo »
Connesso

Zambelletti

  • Utente esperto
  • ***
  • Post: 482
Re:menù al passaggio del mouse
« Risposta #6 il: 12 Giugno, 2013, 22:27:22 »
Guarda dove però mi compare.
Link
Connesso

Topografo

  • Utente esperto
  • ***
  • Post: 265
Re:menù al passaggio del mouse
« Risposta #7 il: 12 Giugno, 2013, 23:33:02 »
Hai messo il codice del tasto all'inizio della pagina e non al posto del menu pag4...

Ti ripeto che puoi farlo a mano ma solo a progetto finito e in tutte le pagine html... non credo sia il caso.




Connesso

Topografo

  • Utente esperto
  • ***
  • Post: 265
Re:menù al passaggio del mouse
« Risposta #8 il: 13 Giugno, 2013, 19:51:02 »
Mi ero preparato uno studio su come fare perchè il tuo menu era carino... qualcosa del tipo "manuale delle cose fatte a mano... lo riporto perchè mi è costato del lavoro ma non considerarlo...

Citazione
Fai così, salva il tutto.
Chiudi website W5

Prendi il blocco note di windows.

Cerca il codice


Codice:
Only registered users can see contents. Please click here to Register or Login.

al suo posto scrivi:
Codice:
Only registered users can see contents. Please click here to Register or Login.
dove al posto di immagine 2 metti l'immagine che ti interessa

In alto, dove c'è

Codice:
Only registered users can see contents. Please click here to Register or Login.



dopo

Codice:
Only registered users can see contents. Please click here to Register or Login.

aggiungi il nome del file che si deve vedere (l'ho chiamato immagine2.png)
salva

Poi esporta tutto il progetto con filezilla, tutte le directory di preview.
Quindi il tutto funzionerà fino a che non riaprirai website X5 che penso ti correggerà quel menù strano...
E appena esporti tutto quel che hai fatto a mano.


Ma era una cosa da pazzi, tanto vale che usi Dreamweaver per farti il sito :D

La soluzione invece è semplice ed elegante... è quella che avevo inserito due messaggi fa in italic...

Vai nella cartella del tuo sito offline
cerca la cartella preview/menu/
troverai i tuoi tasti in formato png col nome riferito alla pagina alla quale sono diretti
es. Per la pagina home trovi index.png e index_h.png (quest'ultimo in stato di quiete)
Prendi Photoshop e ti prepari i due tasti della stessa lunghezza e altezza (se ti servono più grandi agisci cambiando i valori nelle impostazioni avanzate (passo 4) per definirli più grandi del necessario nelle impostazioni menu, ma non puoi agire sull'altezza).Ti fai una copia di sicurezza dei tasti che hai preparato (in png uno dei due sarà con 10 pixel trasparenti), nel caso vengano sovrapposti dal sistema e li salvi nella cartella preview/menu/.

Poi passi i file con filezilla, puoi vedere un risultato su http://www.texanogrill.com, lo tengo un paio di giorni per fartelo vedere (secondo me non è il massimo con quelle dimensioni, ma fai le tue prove).
Trasferisci tutto Online e sei a posto
I tasti sono

Connesso

Zambelletti

  • Utente esperto
  • ***
  • Post: 482
Re:menù al passaggio del mouse
« Risposta #9 il: 13 Giugno, 2013, 20:03:55 »

Intanto grazie, sei stato di un enorme disponibilità e lodevole amicalità.Appena posso provo il codice. Però ho visto il tuo esempio, in realtà hai fatto il menù home, più piccolo e l'altro della stessa dimensione degli altri.
Però........il pulsante-h, al passaggio del mouse, essendo alto come tutta la barra menù, non mi va sul header.
Sei d'accordo?
E' una tua scelta oppure è una limitazione?
Se utilizzo il tuo codice, il menù mi va a finire sull'header?
Connesso

Topografo

  • Utente esperto
  • ***
  • Post: 265
Re:menù al passaggio del mouse
« Risposta #10 il: 13 Giugno, 2013, 20:17:35 »
Partiamo dal discorso "Se utilizzo il tuo codice"... è una siringa monouso... ogni volta che usi Website X5 devi riscrivere tutto a mano e per tutte le pagine in cui c'è il menu.

Purtroppo mi devo adattare io ai tasti creati da Website a meno di non agire sui css, da quì la scelta di rimpicciolire i tasti...
Per l'header non l'ho modificato, ma credo sia modificabile con Photoshop (guarda passo 1-modifica modello - intestazione) nell'immagine ci sarà in basso parte della pulsantiera (da me c'è... disegni su quella e poi la metti trasparente in passo 4 (impostazioni avanzate) - stile menu - voci menu

Io non ci ho provato, ma puoi metterci un immagine di sfondo :)
Connesso
Pagine: 1   Vai su
« precedente successivo »