It is currently Wed 28 Sep 2016 - 13:56 - créer un forum

[Tutoriel] Menu style dropdown tout en css + menu responsive

Skip to content

Post new topic Reply to topic Goto page: <  1, 2, 3, 4, 5, 6, 7, 8  >

[Tutoriel] Menu style dropdown tout en css + menu responsive
Author Message
kieffer


Joined: 12 Nov 2009
Posts: 411

PostPosted: Mon 17 Nov 2014 - 20:28    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

PublicitéSupprimer les publicités ?
Previous post review:

kikoo

je resume les li class='has-sub' replace le li=class top"
les li class='last' ferme le sous menu ?

si tu a plus de deux sous menu tu fait comment ? je seche
Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Mon 17 Nov 2014 - 22:02    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

lol je comprend pas tout je te met mont menu HTML


Code: Sélectionner - Agrandir

<div id="menu">
   
      <div id="conta">
   
<table cellspacing="0" align="center">
  <tr>
  <td class="li.row" align="left">

<ul id="nav">


<li class="top"><a href="{U_INDEX}" class="top_link"><span>Page principale</span></a></li>

<!-- BEGIN switch_user_logged_out -->


                     <li class="top">                                     
        <a href="{U_REGISTER}" class="top_link"><span>S'inscrire</span></a></li>


                        <li class="top">
                    <a href="{U_LOGIN_LOGOUT}" class="top_link"><span>{L_LOGIN_LOGOUT}</span></a></li>

<!-- END switch_user_logged_out -->


 <!-- BEGIN switch_user_logged_in -->


<li class="top"><a href="" id="" class="top_link"><span class="down">Menu Membre</span></a>

    <ul class="sub">

        <li><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>

        <li> <a href="{U_PRIVATEMSGS}" >Votre messagerie du forum</a></li>

        <li><a href="{U_PRIVATEMSGS}" >{PRIVATE_MESSAGE_INFO}</a></li>

        <li> <a href="{U_INDEX}" class="fly">Menu sur les sujets du forum</a>

        <ul>
          <li><a href="{U_SEARCH_NEW}">Sujets postés depuis votre dernière visite</a></li>
          <li><a href="{U_SEARCH_SELF}">Voir mes sujets postés</a></li> 
          <li><a href="{U_SEARCH_UNANSWERED} ">Voir les sujets sans réponses </a></li>
          <li><a href="/markf">Marquer tous les sujets comme lus</a></li>
          </ul>
          </li>
         
        <li><a href="/viewonline.php">Qui est en ligne</a></li>

            <!-- IF S_USER_LEVEL == "ADMIN" || S_USER_LEVEL == "MOD"  -->

         <li><a href="{U_MEMBERLIST}">Liste des membres</a></li>

         <li><a href="{U_GROUP_CP}">Groupes du forum</a></li>
     
            <!-- ENDIF -->
</ul>
</li>

<!-- END switch_user_logged_in -->


<li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Espace Adhérentes</span></a>

   <ul class="sub">

     <li><a href="/f37-Questions-diverses.htm">Adhérentes posez vos questions</a></li>
     <li><a href="/t862-Renouvellement-adh-sion-AMARID.htm">Renouvellement d'adhésion</a></li>
     <li><a href="/t87-Votre-Nomenclature-de-classeur.htm">Nomenclature du classeur</a></li>
        <li><a href="/f58-Contrat-de-travail.htm" class="fly">Documents administratifs</a>
   <ul>
     <li><a href="/f94-Contrat-de-travail-2011.htm" class="fly">Contrat de travail</a>
   <ul>
        <li><a href="/t249-Nouveau-contrat-de-travail-2011.htm">Contrat de travail PDF</a></li>
        <li><a href="/f94-Contrat-de-travail-2011.htm">Posez vos questions sur ce sujet</a></li>
     </ul>
     </li>

     <li><a href="/f53-Avenant-au-contrat-de-travail.htm" class="fly">Avenant & annexe 1 au contrat de travail</a>
        <ul>
            <li><a href="/t400-Nouveaux-calculs-annees-completes-fichier-PDF.htm">Mensualisation fichier PDF</a></li>
            <li><a href="t399-Nouveaux-calculs-annees-completes-fichier-exzl-ou-open-office.htm">Mensualisation fichier Excel ou open office</a></li>
            <li><a href="/t92-Avenant-contrat-de-travail.htm">Avenant au contrat de travail PDF</a></li>
            <li><a href="f53-Avenant-au-contrat-de-travail.htm">Posez vos questions sur ce sujet</a></li>
         </ul>
         </li>
     
     <li><a href="/f63-Fiche-de-presence.htm" class="fly" >Fiche de présence</a>
         <ul>
            <li><a href="/t90-fiche-de-presence.htm">Fiche de présence PDF</a></li>
            <li><a href="/f63-Fiche-de-presence.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

     <li><a href="/t93-Fiche-de-reservation.htm" class="fly"  >Engagement réciproque</a>
         <ul>
            <li><a href="/t93-Fiche-de-reservation.htm">Engagement réciproque PDF</a></li>
            <li><a href="/f56-Reservation.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

      <li><a href="/f64-Fiche-absence-execptionelle.htm" class="fly">Fiche de congé exceptionnel</a>
         <ul>
            <li><a href="/t89-fiche-de-conge-exceptionel.htm">Fiche de congé exceptionnel PDF</a></li>
            <li><a href="/f64-Fiche-absence-execptionelle.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

      <li><a href="/f52-marquee-Fiche-conges-payes-marquee.htm" class="fly">Fiche de congés payés</a>
         <ul>
            <li><a href="/t94-Fiche-de-conges-payes.htm">Fiche congé payé PDF</a></li>
            <li><a href="/f52-marquee-Fiche-conges-payes-marquee.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>
 
      <li><a href="/f72-Attestation-impot.htm"  class="fly">Attestation d'impôt</a>
         <ul>
            <li><a href="/t144-Attestation-impot.htm">Attestation d'impôt PDF</a></li>
            <li><a href="f72-Attestation-impot.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

       <li><a href="/f113-autorisations-parentales-2011.htm" class="fly">Autorisations parentales</a>
         <ul>
            <li><a href="/t302-attestation-parentales-2011.htm">Autorisations parentales PDF</a></li>
            <li><a href="/f113-autorisations-parentales-2011.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

      <li><a href="/f114-solde-de-tout-compte.htm"  class="fly">Solde de tout compte</a>
        <ul>
            <li><a href="/t311-solde-de-tout-compte.htm">Solde de tout compte PDF</a></li>
            <li><a href="/f114-solde-de-tout-compte.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

      <li><a href="/f115-Certificat-de-travail.htm" class="fly">Certificat de travail</a>
        <ul>
            <li><a href="/t325-Certificat-de-travail.htm#p1025">Certificat de travail PDF</a></li>
            <li><a href="/f115-Certificat-de-travail.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

      <li><a href="/f131-Fiche-de-Liaison.htm"  class="fly">Fiche de liaison</a>
        <ul>
            <li><a href="/t406-la-fiche-de-liaison.htm">Fiche de liaison PDF</a></li>
            <li><a href="/f131-Fiche-de-Liaison.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

      <li><a href="/f217-Indemnit-s-de-ruptures.htm"  class="fly">Indemnités de rupture</a>
        <ul>
            <li><a href="/t896-Calcul-prime-de-fin-de-contrat-Format-PDF.htm">Calcul fin de contrat PDF</a></li>
            <li><a href="/t895-Calcul-prime-de-fin-de-contrat-Format-Excel-Open-office.htm">Calcul fin de contrat  format excel & open office</a></li>
            <li><a href="f217-Indemnit-s-de-ruptures.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

     <li><a href="http:"/f206-Demande-de-dossier-Administratif.htm"  class="fly">Demande de dossier administratif</a>
        <ul>
            <li><a href="/t809-DOCUMENT-Demande-de-dossier-Administratif.htm">Demande de dossier administratif PDF</a></li>
            <li><a href="/f206-Demande-de-dossier-Administratif.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

     </ul>
     </li>

 <li><a href="/f35-Salaire.htm" class="fly" >Salaire</a>
        <ul>
            <li><a href="/f60-Bullelin-de-salaire.htm" class="fly" >Bulletin de salaire 2014</a>
        <ul>
       <li><a href="t122-bulletin-de-salaire-01-janvier-2010-avec-calcul-sans-les-heures-travaillees.htm">Bulletin de salaire format Excel & open office</a></li>
       <li><a href="/t121-bulletin-de-salaire-01-janvier-2010-sans-calcul-sans-calcul-des-heures.htm">Bulletin de salaire format PDF</a></li>
       <li><a href="/f60-Bullelin-de-salaire.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

     
   <li><a href="/f54-Remuneration.htm" class="fly" >Systeme de rémunération</a>
        <ul>
        <li><a href="/t91-Systeme-de-remuneration.htm">Systeme de rémunération PDF</a></li>
        <li><a href="/f54-Remuneration.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

 <li><a href="f55-Indemnites-entretien.htm" class="fly" >Indemnités d'entretien</a>
        <ul>
        <li><a href="/t95-indemnites-entretien.htm">Indemnités d'entretien PDF</a></li>
        <li><a href="f55-Indemnites-entretien.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>

 <li><a href="/f65-Tableau-annuel-recapitulatif-des-salaires-et-indemnites-d-entretien.htm" class="fly" >Tableau annuel récapitulatif</a>
        <ul>
        <li><a href="/t96-Tableau-annuel-recapitulatif-des-salaires-et-indemnites-d-entretien.htm">Tableau format Excel & open office</a></li>
        <li><a href="/f65-Tableau-annuel-recapitulatif-des-salaires-et-indemnites-d-entretien.htm">Posez vos questions sur ce sujet</a></li>
        </ul>
        </li>
      </ul>
      </li>

<li><a href="/f161-Impots.htm" class="fly" >Impôt</a>
        <ul>
            <li><a href="/f161-Impots.htm" class="fly" >Tableau de calcul du montant annuel a déclarer</a>
        <ul>
       <li><a href="/t607-Tableau-Aide-au-calcul-du-montant-a-declarer.htm">Tableau au format Excel & open office</a></li>
       <li><a href="/f161-Impots.htm">Posez vos questions sur ce sujet</a></li>
         </ul>
         </li>
        <li><a href="/f161-Impots.htm" class="fly" >Attestation d'évaluation du montant des repas</a>
        <ul>
       <li><a href="/t606-Attestation-Evaluation-montant-des-Repas.htm">Attestation évaluation du montant des repas PDF</a></li>
       <li><a href="/f161-Impots.htm">Posez vos questions sur ce sujet</a></li>
         </ul>
         </li>
</ul>
</li>

  <li><a href="/f192-Compte-rendu-des-r-unions.htm" class="fly" >Comptes-rendu des réunions de formation</a>
        <ul>
            <li><a href="/t742-Mort-Subite-du-nourrisson.htm" class="fly" >Mort subite du nourrisson</a>
        <ul>
       <li><a href="/t742-Mort-Subite-du-nourrisson.htm">Mort subite du nourrisson PDF et lecture directe</a></li>
       <li><a href="/f192-Compte-rendu-des-r-unions.htm">Posez vos questions sur ce sujet</a></li>
         </ul>
         </li>
        <li><a href="/t741-Compte-rendu.htm" class="fly" >Morsure et agréssivité de l'enfant de 0 a 3 Ans</a>
        <ul>
       <li><a href="/t741-Compte-rendu.htm">Enfant de 0 a 3 Ans PDF et lecture directe</a></li>
       <li><a href="/f192-Compte-rendu-des-r-unions.htm">Posez vos questions sur ce sujet</a></li>
         </ul>
         </li>
  </ul>
  </li>
 </ul>
 </li>
 

 




 <li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Catégories</span></a>
    <ul class="sub">

      <li><a href="/f2-assitantematernelleamarid-fr.htm" class="fly">Accueil</a>
         <ul>
          <li><a href="/f27-Qui-sommes-nous.htm">AMARID</a></li>
          <li><a href="/t804-Guide-utilisateur.htm">Guide utilisateur de ce forum</a></li>
           <li><a href="https://mapsengine.google.com/map/edit?mid=zO-uUHlzuHeA.keqQe1fGPUno"  TARGET="_blank">Ou nous trouver (carte de france)</a></li>
          <li><a href="/f17-Place-s-Disponible-s.htm">Assistante maternelle mettez vos places disponibles</a></li>
          <li><a href="/f18-Recherche-assistante-s-Maternelle-s.htm">Parents vous recherchez une assistante maternelle</a></li>
          <li><a href="/f183-Produits-d-fectueux-et-trouvailles.htm">Produits défectueux & nos, vos trouvailles</a></li>
         </ul>
         </li>
      <li><a href="/t716-Bulletin-adh-sion-AMARID.htm">Bulletin d'adhésion AMARID</a></li>
      <li><a href="/f3-Assistante-Maternelle.htm" class="fly">Posez vos questions</a>
          <ul>
          <li><a href="f37-Questions-diverses.htm">Adhérentes posez vos questions</a></li>
          <li><a href="f45-Questions.htm">Assmats non adhérentes posez vos questions</a></li>
          <li><a href="f31-Vos-questions.htm">Parents posez vos questions</a></li>
          <li><a href="f204-Vos-suggestions-Vos-demandes.htm">Vos suggestions vos demandes</a></li>
         </ul>
        </li>
      <li><a href="/f95-AGENDA-AMARID.htm">Agenda AMARID</a></li>
      <li><a href="f209-Espace-Responsables-de-secteurs-et-d-Antennes.htm">Espace bureau-résponsables d'antennes-de secteurs</a></li>
      <li><a href="/f23-Legislation.htm">Documents & législation & MAM</a></li>
       <li><a href="/f5-Annonce-s.htm"  class="fly">Détente (cuisine, travaux manuels, etc...)</a>
          <ul>
          <li><a href="/f51-Coin-cuisine.htm">Coin cuisine, vos recettes pour nos petits</a></li>
          <li><a href="/f73-Activites-Manuelles.htm">Activités manuelles, vos activités pour nos petits</a></li>
          <li><a href="/f34-Detente.htm">Jeux, detendez vous près une dure journée</a></li>
          <li><a href="/f208-Avatars-signatures.htm">Demandez votre avatar ou signature</a></li>
          </ul>
          </li>
   </ul>
   </li>



<li class="top"><a href="{U_INDEX}" class="top_link"><span>Contacts</span></a>
 <ul class="sub">

  <li><a href="http://amarid.fr/index.php/amarid-contact/12-contacts/5-association-amarid" TARGET="_blank">Contact AMARID</span></a>
  <li><a href="http://amarid.fr/index.php/amarid-contact/12-contacts/3-amarid-secretariat" TARGET="_blank" >Contact Secrétariat AMARID</span></a>
  <li><a href="http://amarid.fr/index.php/amarid-contact/12-contacts/4-responsable-antennes" TARGET="_blank">Contact Régions extérieures Gironde</span></a>
  <li><a href="http://amarid.fr/index.php/amarid-contact/12-contacts/1-administrateur" TARGET="_blank">Contact Administrateur Site & Forum</span></a>

</li>
</ul>

 <li class="top"><a href="http://amarid.fr/" class="top_link" target="_blank" ><span>Site internet</span></a></li>

<li class="top"><a href="{U_INDEX}" class="top_link"><span>Partenaires</span></a>
 <ul class="sub">

  <li><font color=#000000><i><center>Partenaires</center></font></i></span></br>
  <li><a href="http://amarid.fr/index.php/aide-brico" TARGET="_blank">AB Forum d'entraide bricolage</span></a>
  <li><a href="http://amarid.fr/index.php/babiage" TARGET="_blank" >Babiage Doodoo notre ami depuis 30 ans</span></a>
  <li><a href="http://amarid.fr/index.php/formulette" TARGET="_blank">Rémi Guichard chanteur pour enfants</span></a>
  <li><a href="http://amarid.fr/index.php/alllianz" TARGET="_blank">Allianz Notre assureur</span></a>
  <li><font color=#000000><i><center>Les Indispensables</center></font></i></br>
  <li><a href="http://amarid.fr/index.php/assedic" TARGET="_blank">ASSEDIC</span></a>
  <li><a href="http://amarid.fr/index.php/pajemploi" TARGET="_blank">CAF Pajemploi</span></a>
  <li><a href="http://amarid.fr/index.php/conseil-general" TARGET="_blank">Conseils Généraux de France</span></a>
  <li><a href="http://amarid.fr/index.php/securite-sociale" TARGET="_blank">Sécurité sociale</span></a>
  <li><a href="http://amarid.fr/index.php/ircem" TARGET="_blank">IRCEM</span></a>
  <li><a href="http://amarid.fr/index.php/cebtre-des-impots" TARGET="_blank">Centre des impôts</span></a>
  <li><a href="http://amarid.fr/index.php/urssaf" TARGET="_blank">URSSAF</span></a>
</li>
</ul>



<li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Outils</span></a>
   <ul class="sub">

  <li><a href="http://www.amarid.net/search.php" >Recherche sur le forum</span></a>
  <li><a href="http://www.amarid.net/profile.php?mode=editprofile" >Votre Profil</span></a>
  <li><a href="http://www.amarid.net/faq.php" >FAQ</span></a>
    <li><a href="http://www.amarid.net/t947-calcukatrice.htm" >Calculatrice</span></a>
  <li><a href="https://translate.google.com/" TARGET="_blank">Google traducteur</span></a>
  <li><a href="http://www.openoffice.org/fr/Telecharger/"TARGET="_blank" >Open office</span></a>
</li>
</ul>

</ul>
</td>
  </tr>
  </table>   
</div></div>



_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 376
Niveau:
Point(s): 357
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Mon 17 Nov 2014 - 23:03    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

kieffer wrote:
kikoo

je resume les li class='has-sub' replace le li=class top"
les li class='last' ferme le sous menu ?

si tu a plus de deux sous menu tu fait comment ? je seche


Tu as compris.
Pour les sous-sous-menus, tu joues avec les class "has-sub" et les class "last". Ca passe je viens d'essayer.

En attendant la création d'une class "sous-sous-menu" lorsque j'aurai du temps.

Pour info et au cas où, je précise que si tu transformes ton menu existant, les class dans les liens ne servent plus à rien.

Code: Sélectionner - Agrandir

  class="top_link"

ne sert à rien pour le responsive.


Bonne fin de soirée.
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Mon 17 Nov 2014 - 23:09    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

ok je comprend bon les sous sous menu cela passe

MAIS

comment virer la fleche de l'onglet du haut quand il n'y as pas de sous menu
comment mettre des fleche quand tu as un sous menus qui vas vers une autre sous menu
class top link il mend reste trois ou quatre j'en fait quoi
je fait quoi des class down
comme d'hab je suis pas fan de la barre bleu lolll
c'est mit sur mon theme test
class fly ?

test supplémentaire sur la grandeurs des blocs petit souci


_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 376
Niveau:
Point(s): 357
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Tue 18 Nov 2014 - 00:01    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Re,

Ouf, tu pousses et ne fais guère d'effort ! Razz

Les seules class qui sont utilisées si tu retouches ton menu existant sont : "has-sub" et "last" aucune autre.
Tu as des problèmes avec les flèches car tu as gardé les class du menu style dropdown. Vires les et places les "has-sub" et "last" aux bons endroits, tel que je l'ai expliqué.
 
La barre bleue peut être changée, pas de problème.

La barre qui prend toute la largeur du forum est

Code: Sélectionner - Agrandir


#container


celle qui sert qu'au menu est

Code: Sélectionner - Agrandir


#cssmenu




La largeur des fenêtres :


Code: Sélectionner - Agrandir
#cssmenu ul li ul li {   max-height: 0;   position: absolute;   -webkit-transition: max-height 0.4s ease-out;   -moz-transition: max-height 0.4s ease-out;   -ms-transition: max-height 0.4s ease-out;   -o-transition: max-height 0.4s ease-out;   transition: max-height 0.4s ease-out;   background: #ffffff;   width: 300px;   border-right: solid 2px red; }


#cssmenu ul li ul li a {   font-size: 14px;   font-weight: 400;   text-transform: none;   color: #000000;   letter-spacing: 0;   display: block;   width: 350px;   padding: 7px 7px 7px 7px; }





Bonne nuit, j'ai faim et suis nase ! lol
Cordialement
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Last edited by RotorMan on Tue 18 Nov 2014 - 00:08; edited 1 time in total
Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Tue 18 Nov 2014 - 00:04    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

lol cest deja change pour la couleur je regarde de plus pres ton histoire de class

ATTENTION ne pas enlever ul class="sub"
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Last edited by kieffer on Tue 18 Nov 2014 - 00:46; edited 1 time in total
Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 376
Niveau:
Point(s): 357
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Tue 18 Nov 2014 - 00:12    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Re,


Regardes les codes sources de mon forum pour t'aider. Wink
En complément et pour comprendre comment fonctionne un menu, le tuto principal de ce fil de discussion s'applique aussi pour ce menu responsive.

Cette fois je file. Razz
Cordialement
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Tue 18 Nov 2014 - 00:47    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

kieffer wrote:
lol cest deja change pour la couleur je regarde de plus pres ton histoire de class

ATTENTION ne pas enlever ul class="sub"


j'avais pas vu ta réponse je suis dessus a fond

bon cela prend tournure il est sur mon forum test
j'ai un peut regarde le code de base c'est quoi la différences entre <li class='active has-sub'> et <li class='has-sub'>

le 18/11/2014

bonsoir

ce qu j'ai compris (pas ci boulet que ca)

Menu du haut avec fleche vers le bas => ok
sous menu avec fleche vers la droite => ok

la ou je comprend pas

sous sous menu avec fleche vers la droite il n'y a pas mais les sous sous menu s ouvrent ( j'ai essaye de lui mettre une class has sub et une class last cela ne marche pas
si j'enleve les ul class="sub il n'y as plus de menu
puis recupéré le menu dégrade pour le mettre sur mes catégorie je parle du bond bien sur

voila ou j'en suis tous cela sur mon forum test
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Thu 20 Nov 2014 - 18:26    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

ATTENTION 
sur tablette le menu n apparait pas
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 376
Niveau:
Point(s): 357
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Fri 21 Nov 2014 - 14:17    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

kieffer wrote:
ATTENTION 
sur tablette le menu n apparait pas


Bonjour,

Ah bon ? J'ai des membres qui utilisent des tablettes et qui voient le menu sur mon forum. J'avais vérifié, avec la tablette et le mobile androïd de ma fille lorsque je l'ai installé sur mon forum : pas de souci.
Ce n'est que du css et du script, donc pas de souci d'affichage. La seule chose qu'il peut se passer c'est que le "menu responsive" ne se transforme pas en menu cours, c'est tout, sinon le menu en lui même apparait et fonctionne.

Cordialement
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Fri 21 Nov 2014 - 17:51    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

RotorMan wrote:

Bonjour,

Ah bon ? J'ai des membres qui utilisent des tablettes et qui voient le menu sur mon forum. J'avais vérifié, avec la tablette et le mobile androïd de ma fille lorsque je l'ai installé sur mon forum : pas de souci.
Ce n'est que du css et du script, donc pas de souci d'affichage. La seule chose qu'il peut se passer c'est que le "menu responsive" ne se transforme pas en menu cours, c'est tout, sinon le menu en lui même apparait et fonctionne.

Cordialement


je me suis mal exprimé mais j'était tres fatigué mais pas d'excuse pour moi

OUI SUR TABLETTE ANDROID PAS DE SOUCI SAUF POUR LA PARTIE RESPONSIVE

mes excuses Neutral Neutral

par contre sur ipad air ios 8 pas de menu
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Fri 21 Nov 2014 - 22:22    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

re bonsoir

par contre sur ce forum la partie responsive ne fonctionne pas j'ai le meme menu que sur amarid

http://boulangersud.xooit.org/index.php
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sun 23 Nov 2014 - 14:54    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

kikoo re moi
bon superbe après quelques heures passées dessus je touche au but

une question subsidiaire (encore)

peut on mettre une bordure noire ou autre autour du cadre des sous menus qui prendrait en compte l'onglet moi j'ai changé la couleur de la bordure rouge de droite mai j'aimerais avoir cette bordure tout autour je te met un screen


_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Wed 26 Nov 2014 - 22:34    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

bonsoir

dans mes recherche je cherche a pouvoir centrer le menu j'ai pas trouve de position left elle est ou l'astuce
merci pour vos réponses
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 376
Niveau:
Point(s): 357
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Wed 26 Nov 2014 - 23:32    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Re,

Il se centre avec la class "container". Au pire jouer avec text-align center et float center....

Pour les bordures, dans la class "cssmenu", il suffit d'ajouter "border-left: solid 2px black;" "border-bottom: solid 2px black;", etc... Personnellement j'ai préféré mettre un "box-shadow" à des lignes d'encadrement.

Bonne fin de soirée
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Last edited by RotorMan on Wed 26 Nov 2014 - 23:45; edited 1 time in total
Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Wed 26 Nov 2014 - 23:42    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

RotorMan wrote:
Re,

Il se centre avec la class "container". Au pire jouer avec text-align center et float center....

Pour les bordures, dans la class "cssmenu", il suffit d'ajouter "border-left: solid 2px black;" "border-bottom: solid 2px black;", etc... Personnellement j'ai préféré mettre "box-shadow:0 3px 3px 0 rgba(0,0,0,0.4)" à des lignes d'encadrement.

Bonne fin de soirée


je teste pour les bordures et je te dit pour le centrage je regarde aussi
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 13:56    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive

Display posts from previous:   
Reply to topic Page 7 of 8 Goto page: <  1, 2, 3, 4, 5, 6, 7, 8  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401