Visualizzazione dei risultati da 1 a 10 su 10
  1. #1

    menu a tendina : javascript e css

    Buona giornata a tutti
    premetto che non sono un esperto !
    Ho scaricato il codice di questo menu a tendina molto semplice composto da un css più un javascript ( http://javascript.html.it/script/ved...enu-a-tendina/ )
    e lo ho modificato per il mio sito.
    Se metto tutto il codice fra i tag head e /head di ogni pagina,funziona perfettamente. ( Vedi ad esempio questa pagina : http://www.titierre.com/pagina_refra...iaimmagini.htm .
    Dal momento che il sito è composto da circa 50 pagine con il menu, se dovessi aggiungere una voce o cambiare un colore, sarei costretto a modificare tutte le pagine.
    Pur avendo cercato nei vari forum, non riesco a mettere i codici in un file esterno che venga poi richiamato dalle varie pagine in modo da applicare le modifiche una volta sola.
    Scusate il linguaggio non molto tecnico, ma avrei bisogno di un aiutino per superare il problema.
    Grazie in anticipo

    Questo è il codice:

    <style type="text/css">

    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 12px Arial;
    line-height:18px;
    z-index:100;
    }

    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: ;
    }

    #dropmenudiv a:hover{ /*hover background color*/
    background-color: yellow;
    }

    </style>

    <script type="text/javascript">

    //Contents for menu 1 Forni
    var menu1=new Array()
    menu1[0]='Forni a crogiolo'
    menu1[1]='Forni a riverbero'
    menu1[2]='Essicatoi'
    menu1[3]='Siviere'
    menu1[4]='link'

    //Contents for menu 2 Materiali di consumo
    var menu2=new Array()
    menu2[0]='Trattamento metallo'
    menu2[1]='Refrattari'
    menu2[2]='Filtri/Reti'
    menu2[3]='Manufatti in fibra'
    menu2[4]='Manufatti in grafite'
    menu2[5]='Intonaci'
    menu2[6]='Lubrificanti/Distaccanti'
    menu2[7]='link'

    //Contents for menu 3 Impianti
    var menu3=new Array()
    menu3[0]='Insufflatori'
    menu3[1]='Degasatori in linea'
    menu3[2]='Degasatori/Trattamenti'
    menu3[3]='Filter Box'
    menu3[4]='link'
    menu3[5]='link'

    //Contents for menu 4 Prodotti speciali
    var menu4=new Array()
    menu4[0]='Strumenti'
    menu4[1]='Riporti ceramici'
    menu4[2]='Spugne metalliche'
    menu4[3]='Tazze ceramica'
    menu4[4]='Preriscaldo stampi'
    menu4[5]='Riscaldatori aria'
    menu4[6]='link'

    //Contents for menu 5 Pagine tecniche
    var menu5=new Array()
    menu5[0]='Degasaggio'
    menu5[1]='Indice gasaggio'
    menu5[2]='Disossidazione/Scorifica'
    menu5[3]='Densità max teorica'
    menu5[4]='Misura densità'
    menu5[5]='Eutettico leghe AlSi'
    menu5[6]='Conducibilità termica'
    menu5[7]='link'
    menu5[8]='link'
    menu5[9]='link'


    var menuwidth='165px' //default menu width
    var menubgcolor='#E4E4E4' //menu bgcolor
    var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?

    /////No further editting needed

    var ie4=document.all
    var ns6=document.getElementById&&!document.all

    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';backg round-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }

    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    if (menuwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    }
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWid th-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeig ht-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeigh t
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHe ight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    return edgeoffset
    }

    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }

    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)

    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    }

    return clickreturnvalue()
    }

    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }

    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }

    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }

    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }

    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }

    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }

    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu

    </script>

  2. #2
    Sempre a proposito del problema di cui sopra.
    E' possibile creare un file esterno con il menu a cui fare riferimento in tutte le pagine? in modo da variare il menu solo sul file esterno.
    Oppure esiste un tutorial che, in modo semplice, mi permetta di capire come fare?
    Oppure, con il menu adottato è impossibile fare ciò ?
    Grazie

  3. #3
    Utente di HTML.it L'avatar di costi31
    Registrato dal
    Nov 2007
    Messaggi
    345
    Originariamente inviato da dario2101
    Sempre a proposito del problema di cui sopra.
    E' possibile creare un file esterno con il menu a cui fare riferimento in tutte le pagine? in modo da variare il menu solo sul file esterno.
    Oppure esiste un tutorial che, in modo semplice, mi permetta di capire come fare?
    Oppure, con il menu adottato è impossibile fare ciò ?
    Grazie
    Certo, basta che copi il codice javascript in un file con estensione .js (esempio menu.js) e nelle pagine in cui vuoi inserire il menù, anziche ricopiare il codice, metti nell'head
    codice:
    <script type="text/javascript" src="menu.js"></script>
    Così le modifiche al menu per quanto riguarda il javascript le fai nel file menu.js.
    Per il css invece copi il codice in un file con estensione .css (es. menu.css) e nelle pagine in cui vuoi inserire il menù metti nell'head
    codice:
    <link rel="stylesheet" href="menu.css" type="text/css" />
    Spero sia quello che cercavi di fare.


  4. #4
    Grazie costi
    era proprio quello che cercavo di fare.
    Ho già fatto una cosa del genere ma mi dava errore.Probabilmente ho sbagliato qualcosa.
    C'è un ordine per inserire nell'head? Prima css o prima js?
    Domani riprovo.

  5. #5
    Utente di HTML.it L'avatar di costi31
    Registrato dal
    Nov 2007
    Messaggi
    345
    Originariamente inviato da dario2101
    Grazie costi
    era proprio quello che cercavo di fare.
    Ho già fatto una cosa del genere ma mi dava errore.Probabilmente ho sbagliato qualcosa.
    C'è un ordine per inserire nell'head? Prima css o prima js?
    Domani riprovo.
    No, non c'è un ordine per gli elementi contenuti nell'head.

  6. #6
    Ciao costi
    ho fatto quanto mi hai detto:
    .....basta che copi il codice javascript in un file con estensione .js (esempio menu.js) e nelle pagine in cui vuoi inserire il menù, anziche ricopiare il codice, metti nell'head...
    e
    .....Per il css invece copi il codice in un file con estensione .css (es. menu.css) e nelle pagine in cui vuoi inserire il menù metti nell'head...

    Ma, mentre il javascript sembra funzionare, il css no.
    Si può vedere qui la pagina non funzionante :
    http://www.titierre.com/provaindex1/...1provamenu.htm
    e qui la stessa pagina funzionante con tutto il codice nell'header:
    http://www.titierre.com/pagina_setto_poroso.htm

    Dove sbaglio?
    (PS: Abbiate pazienza ma alla mia età i neuroni cominciano a scarseggiare !!)

  7. #7
    Utente di HTML.it L'avatar di costi31
    Registrato dal
    Nov 2007
    Messaggi
    345
    Originariamente inviato da dario2101
    Ciao costi
    ho fatto quanto mi hai detto:
    .....basta che copi il codice javascript in un file con estensione .js (esempio menu.js) e nelle pagine in cui vuoi inserire il menù, anziche ricopiare il codice, metti nell'head...
    e
    .....Per il css invece copi il codice in un file con estensione .css (es. menu.css) e nelle pagine in cui vuoi inserire il menù metti nell'head...

    Ma, mentre il javascript sembra funzionare, il css no.
    Si può vedere qui la pagina non funzionante :
    http://www.titierre.com/provaindex1/...1provamenu.htm
    e qui la stessa pagina funzionante con tutto il codice nell'header:
    http://www.titierre.com/pagina_setto_poroso.htm

    Dove sbaglio?
    (PS: Abbiate pazienza ma alla mia età i neuroni cominciano a scarseggiare !!)
    Tu hai messo
    codice:
    <script type="text/javascript" src="http://www.titierre.com/provaindex1/menuttr.js"></script>
    <link rel="stylesheet" href="stiledelmenu.css" type="text/css" />
    Guarda che ho controllato e il file stiledelmenu.css non si trova nella stessa cartella della pagina. Inserisci l'indirizzo relativo corretto della cartella in cui si trova il file css.
    Mentre per il file js hai inserito l'indirizzo assoluto e volendo potevi mettere anche l'indirizzo relativo, ma per questo puoi fare come vuoi.
    Ricontrolla dove si trova il file.


  8. #8
    Cavoli...cavoli...cavoli...!!!
    Costi, non so come ringraziarti per la pazienza !!
    avevo sbagliato ad indicare il nome del file css !!??!!! (si può essere più "distratti" ?)
    ( PS: probabilmente mi è rimasto un solo neurone sperduto nel cervello e purtroppo devo lavorare solo con quello!!)
    Ora tutto funziona !!

  9. #9
    Utente di HTML.it L'avatar di costi31
    Registrato dal
    Nov 2007
    Messaggi
    345
    Originariamente inviato da dario2101
    Cavoli...cavoli...cavoli...!!!
    Costi, non so come ringraziarti per la pazienza !!
    avevo sbagliato ad indicare il nome del file css !!??!!! (si può essere più "distratti" ?)
    ( PS: probabilmente mi è rimasto un solo neurone sperduto nel cervello e purtroppo devo lavorare solo con quello!!)
    Ora tutto funziona !!
    Prego non c'è di che, può capitare di fare questi errori ( ti parlo per esperienza personale dato che ho fatto lo stesso errore qualche giorno fa ).


  10. #10
    Originariamente inviato da costi31
    No, non c'è un ordine per gli elementi contenuti nell'head.
    come regola generale, il CSS sempre prima del JS, per il semplice fatto che altrimenti tutte le dimensioni prese potrebbero essere sbagliate, se il CSS le modifica dopo che il JS ha preso i valori, per dirne una ...
    Formaldehyde a new Ajax PHP Zero Config Error Debugger

    WebReflection @WebReflection

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.