Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu dynamique vertical personnalisé

Sujet résolu
    13 mai 2010 à 17:31:00

    Bonjour ! J'ai cherché partout, parcouru tout lediteurjavascript, des sites obscurs en anglais et bien sur le site du zéro, et impossible de trouver un script efficace !
    J'en ai trouvé quelques-uns pas mal, mais mon problème se situe sur la personnalisation du menu (je veux qu'il soit pareil que sur mon site). Un de mes amis avait réussi à me passer un code, qui permettait cela sans passer par un autre fichier .js, directement dans le code source, mais je l'ai perdu. Les liens du menu sont uniquement personnalisé par du CSS inclus dans la page (pas par link).
    J'utilise Dreamweaver (cs4)

    Ce qui me plairait, ce serait cela :
    Image utilisateur
    • Partager sur Facebook
    • Partager sur Twitter
      13 mai 2010 à 17:49:34

      C'est faisable directement en JS.

      Contactes-moi pour plus d'infos.
      • Partager sur Facebook
      • Partager sur Twitter
      Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.
        14 mai 2010 à 19:19:52

        Finalement, j'ai réussi à récuperer le code, seulement, il ne s'applique pas à la nouvelle version du site, et le menu ne s'affiche pas Ôo

        Dans le head :

        Citation

        <script type="text/javascript">
        var defaultMenuWidth="150px" //set default menu width.

        var linkset=new Array()
        //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

        linkset[0]='<a href="blends.htm" target="main">Blends</a>'
        linkset[0]+='<a href="walls.htm" target="main">Wallpapers</a>'
        linkset[0]+='<a href="../omgicons" target="_blank">Icons Part</a>'

        linkset[4]='<a href="actions.htm" target="main">Actions Photoshop</a>'
        linkset[4]+='<a href="textures.htm" target="main">Textures</a>'
        linkset[4]+='<a href="pngs_2.htm" target="main">Pngs</a>'
        linkset[4]+='<a href="newbases.htm" target="main">Icon Bases</a>'
        linkset[4]+='<a href="icontextures.htm" target="main">Icon Textures</a>'

        linkset[1]='<a href="rules.htm" target="main">Règles</a>'
        linkset[1]+='<a href="form.htm" target="main">Formulaire</a>'
        linkset[1]+='<a href="requestwait.htm" target="main">En attente</a>'
        linkset[1]+='<a href="requestfinished.htm" target="main">Réalisées</a>'

        linkset[2]='<a href="domain.htm" target="main">Infos</a>'
        linkset[2]+='<a href="webmisses.htm" target="main">Webmisses</a>'
        linkset[2]+='<a href="reviews.htm" target="main">Reviewed</a>'
        linkset[2]+='<a href="wait.htm" target="main">Affiliates</a>'
        linkset[2]+='<a href="finished.htm" target="main">Become affliate</a>'

        linkset[3]='<a href="photoshop.htm" target="main">Photoshop</a>'
        linkset[3]+='<a href="psp.htm" target="main">Corel PSP</a>'
        linkset[3]+='<a href="photofiltre.htm" target="main">Photofiltre</a>'
        linkset[3]+='<a href="html.htm" target="main">Html - CSS</a>'

        ////No need to edit beyond here

        var ie5=document.all && !window.opera
        var ns6=document.getElementById

        if (ie5||ns6)
        document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

        function iecompattest(){
        return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
        }

        function showmenu(e, which, optWidth){
        if (!document.all&&!document.getElementById)
        return
        clearhidemenu()
        menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
        menuobj.innerHTML=which
        menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
        menuobj.contentwidth=menuobj.offsetWidth
        menuobj.contentheight=menuobj.offsetHeight
        eventX=ie5? event.clientX : e.clientX
        eventY=ie5? event.clientY : e.clientY
        //Find out how close the mouse is to the corner of the window
        var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
        var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
        //if the horizontal distance isn't enough to accomodate the width of the context menu
        if (rightedge<menuobj.contentwidth)
        //move the horizontal position of the menu to the left by it's width
        menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
        else
        //position the horizontal position of the menu where the mouse was clicked
        menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
        //same concept with the vertical position
        if (bottomedge<menuobj.contentheight)
        menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
        else
        menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
        menuobj.style.visibility="visible"
        return false
        }

        function contains_ns6(a, b) {
        //Determines if 1 element in contained in another- by Brainjar.com
        while (b.parentNode)
        if ((b = b.parentNode) == a)
        return true;
        return false;
        }

        function hidemenu(){
        if (window.menuobj)
        menuobj.style.visibility="hidden"
        }

        function dynamichide(e){
        if (ie5&&!menuobj.contains(e.toElement))
        hidemenu()
        else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
        hidemenu()
        }

        function delayhidemenu(){
        delayhide=setTimeout("hidemenu()",500)
        }

        function clearhidemenu(){
        if (window.delayhide)
        clearTimeout(delayhide)
        }

        if (ie5||ns6)
        document.onclick=hidemenu

        </script>



        Les liens :

        Citation

        <a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()" class="menulink" target="main">Portfolio</a>
        <a href="#" onMouseover="showmenu(event,linkset[4])" onMouseout="delayhidemenu()" class="menulink2" target="main">Ressources</a>
        <a href="#" onMouseover="showmenu(event,linkset[3])" onMouseout="delayhidemenu()" class="menulink" target="main">Tutoriaux</a>
        <a href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()" class="menulink2" target="main">Commander</a>
        <a href="#" onMouseover="showmenu(event,linkset[2])" onMouseout="delayhidemenu()" class="menulink" target="main">Web</a>



        Bizarre.
        • Partager sur Facebook
        • Partager sur Twitter

        Menu dynamique vertical personnalisé

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown