englober un menu dans des flèches

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] englober un menu dans des flèches

    Bonjour,

    je souhaiterais faire un petit design au niveau de mon menu principal. Je m'explique, je souhaiterais savoir s'il est possible de mettre à l'intérieur d'une flèche chaque nom de menu.
    photo ci dessous de mon plan.

    Cliquez sur l'image pour l'afficher en taille normale

Nom : EXEMPLE.PNG 
Affichages : 1 
Taille : 30,1 Ko 
ID : 1824780

    Cliquez sur l'image pour l'afficher en taille normale

Nom : exemple2.jpg 
Affichages : 1 
Taille : 23,1 Ko 
ID : 1824781

    Donc sur la 2éme photo, (Menu1 dans dans la première flèche, menu2 dans la deuxième flèche et ainsi de suite).

    Auriez vous une idée comment procéder? Faut il faire de la retouche photo?

    Je précise que mon template est allrounder 3 .

    Merci par avance.

  • #2
    Re : englober un menu dans des flèches

    Salut
    il faut faire cela en CSS. Déjà créer les images des fleches (sans texte), et définir en CSS que tu veux tes flèches en background des éléments de menu.Tu peux t'aider de la console développeur de ton navigateur pour cela
    CEd
    Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
    http://www.template-creator.com Outil de création de templates
    Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

    Commentaire


    • #3
      Re : englober un menu dans des flèches

      Bonjour ced1870,

      J'ai crée dans un premier temps l'image de la flèches comme tu me l'as suggérer

      Cliquez sur l'image pour l'afficher en taille normale

Nom : fleche.jpg 
Affichages : 1 
Taille : 7,2 Ko 
ID : 1806277

      J'ai inspecté le code de mon site et inséré le chemin de l'image mais rien n'y apparait en fond, screen ci dessous.

      Cliquez sur l'image pour l'afficher en taille normale

Nom : Sans titre.jpg 
Affichages : 1 
Taille : 21,0 Ko 
ID : 1806278
      Dernière édition par thebadgones77 à 28/06/2017, 13h31

      Commentaire


      • #4
        Re : englober un menu dans des flèches

        J'ai reussi à supprimer les bordures et le fond blanc en insérant le chemin de la flèche, mais celle ci apparait en bas du menu et non sur l'intitulé de chaque menu.

        Cliquez sur l'image pour l'afficher en taille normale

Nom : essai2.jpg 
Affichages : 1 
Taille : 15,8 Ko 
ID : 1806280

        Cliquez sur l'image pour l'afficher en taille normale

Nom : essai.jpg 
Affichages : 1 
Taille : 31,3 Ko 
ID : 1806279
        Dernière édition par thebadgones77 à 28/06/2017, 14h32

        Commentaire


        • #5
          Re : englober un menu dans des flèches

          ul.nav.menu li {background : 'monimage';}

          a mettre en bas du fichier custom.css du template.

          Commentaire


          • #6
            Re : englober un menu dans des flèches

            Envoyé par lefabdu51 Voir le message
            ul.nav.menu li {background : 'monimage';}

            a mettre en bas du fichier custom.css du template.
            Merci pour ta réponse, mais il ne se passe rien...

            voici le contenu de mon custom.css

            Code:
            #topmenu_container {
              width: 100%;
              margin:0;
              height: auto;
              min-height:30px;
              background-image: url('../images/dropdown-smooth.png');
              background-color: #222;
              background-repeat: repeat-x;
              border-top: 3px double #fff;
              border-bottom: 3px double #fff;
              }
            
            #topmenu {
                float: right;
                left: -50%;
                position: relative;
            	
            }
            #topmenu ul.menu, #topmenu ul.menu ul {
                left: 50%;
                border:none;
            }
            
            .module_menu ul.menu li {
              margin : 0;
              padding : 0 0 0 20px;
              background : none;
              list-style:none;
              margin: 0;
              background-image:url('../images/mirage2.gif');
              background-repeat:no-repeat;
              background-position: 0 8px;
              }
              
             ul.nav.menu li {
               background-image : url('../images/fleche.gif');
               }

            Commentaire


            • #7
              Re : englober un menu dans des flèches

              tu as une url pour voir ça ?
              Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
              http://www.template-creator.com Outil de création de templates
              Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

              Commentaire


              • #8
                Re : englober un menu dans des flèches

                Non mon site est en local malheureusement, mais je peux fournir ce dont vous avez besoin (contenu de l'inspecteur de code etc..)

                voici le contenu que donne l'inspecteur de code

                #Leftcol

                Cliquez sur l'image pour l'afficher en taille normale

Nom : leftcol.jpg 
Affichages : 1 
Taille : 23,9 Ko 
ID : 1806283

                #module_outer_menu

                Cliquez sur l'image pour l'afficher en taille normale

Nom : module-outer-menu.jpg 
Affichages : 1 
Taille : 26,2 Ko 
ID : 1806284

                #module_menu

                Cliquez sur l'image pour l'afficher en taille normale

Nom : module-menu.jpg 
Affichages : 1 
Taille : 27,4 Ko 
ID : 1806285

                #lvround_inner

                Cliquez sur l'image pour l'afficher en taille normale

Nom : lv-round-inner.jpg 
Affichages : 1 
Taille : 23,6 Ko 
ID : 1806286

                #nav_menu

                Cliquez sur l'image pour l'afficher en taille normale

Nom : navmenu.jpg 
Affichages : 1 
Taille : 20,3 Ko 
ID : 1806287

                #item101

                Cliquez sur l'image pour l'afficher en taille normale

Nom : item101.jpg 
Affichages : 1 
Taille : 22,4 Ko 
ID : 1806288
                Dernière édition par thebadgones77 à 29/06/2017, 10h49

                Commentaire


                • #9
                  Re : englober un menu dans des flèches

                  faudrait mettre ton site en ligne temporairement pour que je puisse t'aider
                  Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                  http://www.template-creator.com Outil de création de templates
                  Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                  Commentaire


                  • #10
                    Re : englober un menu dans des flèches

                    arf, ça risque de ne pas être possible, mon site est hébergé en local sur le pc du boulot et sur un réseau privé. Mais je peux essayer de l’héberger temporairement chez Free si c'est possible

                    Commentaire


                    • #11
                      Re : englober un menu dans des flèches

                      Bonjour,

                      je reviens vers vous pour mon soucis, j'ai pu héberger mon site chez free.

                      voici le lien: florian.barbaud.free.fr

                      Merci pour votre aide.

                      Commentaire


                      • #12
                        Re : englober un menu dans des flèches

                        Personne pour m'aider?

                        Commentaire


                        • #13
                          Re : englober un menu dans des flèches

                          dans ton custom.css tu as
                          .module_menu ul.menu li {
                          margin : 0;
                          padding : 0 0 0 20px;
                          background : none;
                          list-style:none;
                          margin: 0;
                          background-image:url('../images/mirage2.gif');
                          background-repeat:no-repeat;
                          background-position: 0 8px;
                          }
                          il suffit de remplacer ton mirage2.gif par fleche.jpg
                          ça mettra ta fleche à la place. ET mettre ton image dans le meme dossier "images"
                          Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                          http://www.template-creator.com Outil de création de templates
                          Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                          Commentaire


                          • #14
                            Re : englober un menu dans des flèches

                            Bonjour ced1870,
                            j'ai effectué la modification de mon custom, l'image mirage2.gif disparait mais d'apparition de la flèche...

                            Code:
                            #topmenu_container {
                              width: 100%;
                              margin:0;
                              height: auto;
                              min-height:30px;
                              background-image: url('../images/dropdown-smooth.png');
                              background-color: #222;
                              background-repeat: repeat-x;
                              border-top: 3px double #fff;
                              border-bottom: 3px double #fff;
                              }
                            
                            #topmenu {
                                float: right;
                                left: -50%;
                                position: relative;
                            	
                            }
                            #topmenu ul.menu, #topmenu ul.menu ul {
                                left: 50%;
                                border:none;
                            }
                            
                            .module_menu ul.menu li {
                              margin : 0;
                              padding : 0 0 0 20px;
                              background : none;
                              list-style:none;
                              margin: 0;
                              background-image:url('../images/fleche.gif');
                              background-repeat:no-repeat;
                              background-position: 0 8px;
                              }

                            Commentaire


                            • #15
                              Re : englober un menu dans des flèches

                              ton image s'appelle "fleche.gif" ?
                              Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                              http://www.template-creator.com Outil de création de templates
                              Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X