Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
Rhô, mais c'est bien fichu, ça va probablement être plus simple que prévu \o/
Hors ligne
C'est sur que si tu arrive à adapter une mouture du plgin d'adaya (menu déroulant) il serait sympa dans faire un plugin à part entières.
Cela permettrait d'en profiter sur toute ta déclinaison "grayscale" mais egalement sur les thèmes dcBlogstrap et dcBootstrap de Mathieu.M. voir de futurs thèmes dotclear qui utiliseraenit bootstrap.
Hors ligne
Si j'ai bien compris le fonctionnement du plugin, pas besoin de le modifier : il suffirait d'ajouter un modèle bootstrap dans themes-config
Hors ligne
C'est encore mieux :)
Hors ligne
@pierrevg : je crois que ça ne va être si simple que ça sans toucher au plugin ^^.
Le mécanisme d'adaptation du menu au thème est très efficace et simple d'emploi, mais s'il permet bien de personnaliser les attributs class des listes (<ul> et <li>), il ne permet pas en revanche de personnaliser les attributs sur les liens (<a>) dont Bootstrap a besoin pour afficher le sous-menu
Voici le code qu'il faut générer pour un menu simple avec un élément de menu et un sous-menu :
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pwet <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="mon-url">Plop</a></li>
</ul>
</li>
</ul>
Pas de souci pour les attributs class sur les <ul> et les <li>, mais je n'ai pas encore trouvé de moyen simple pour le <a>. À moins que j'aie manqué quelque chose ?
Hors ligne
Tu sais que tu t'adresses à un nul ? Tu vas mmieux comprendre à quel point en lisant ce qui suit...
S'il existe un code pour ajouter des trucs dans ul et li, créer un code pour ajouter au a doit être faisable, non ?
Comme je n'y connais rien en bootstrap, peux-tu me dire si les machins à mettre en plus pour a sont constants ?
Hors ligne
S'il existe un code pour ajouter des trucs dans ul et li, créer un code pour ajouter au a doit être faisable, non ?
Je ne crois pas, justement, car tous les <a> ne sont pas égaux ;) Un <a> dans un <li> doit conserver son attribut href si le <li> n'a pas d'enfant <ul>, mais s'il en a un le contenu de son attribut href doit être remplacé par un # et d'autres attributs doivent être ajoutés pour que le js de Bootstrap et sa CSS de base rendent correctement le sous-menu.
Or je n'ai pas de moyen de savoir, dans le plugin, si un <li> a un enfant <ul>. Pour l'instant je cale sur ce détail... mais je cherche ;)
Hors ligne
De quel <a> parle tu Philippe ?
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pwet <span></a>
ou
<li><a href="mon-url">Plop</a></li>
Si tu parle du second <a> ils peuvent être personnalisables, par exemple
<nav class="navbar navbar-default navbar-menu-drop container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pwet <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="mon-url">Plop</a></li>
</ul>
</li>
</ul>
</div>
</nav>
En ajoutant la class "navbar-menu-drop" les <a> de second niveau peuvent se custom via .css comme par exemple :
.navbar-menu-drop .nav .dropdown-menu li a {
font-family: "Open Sans",Arial,sans-serif !important;
font-size: 17px !important;
font-weight: 600 !important;
text-transform: none;
}
ah moins que je ne me trompe ? :-)
Dernière modification par i_love_dc (2015-11-13 13:33:57)
Hors ligne
Tu veux dire que les <a> de premier niveau ne servent qu'à dérouler les sous-menus ?
Oui, en tout cas dans l'exemple donné par i_love_dc un peu plus haut ;)
@i_love_dc : je parlais bien du <a href="#" class="dropdown-toggle"...
Hors ligne
Dans ce cas mon exemple ci dessus fonctionne pour les "styliser".
il suffit juste de donner une class supplémentairement à la navbar
ex. <nav class="navbar navbar-default navbar-class-suplementaire">
et de bien décliner la règle .css comme suis ...
.navbar-class-suplementaire .nav .dropdown-menu li a { }
a moins que je sois à coté de la plaque et que je n'ai pas du tout compris de quoi vous parliez ^^
EDIT- oups C MA FAUTE, je bloque sur le <a> du second level alors quevous parlez du premier..meaculpa je lisais en dehors des lignes
Dernière modification par i_love_dc (2015-11-13 16:43:34)
Hors ligne
Pour le premiers <a> le css d'exemple serait plutôt
Lorsqu'il est NORMAL (fermé)
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
color: #color!important;
background-color: #color!important;
}
Lorsqu'il est ouvert
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #color!important;
background-color: #color!important;
}
Sans oublier les !important pour qu'ils prennent la priorité sur ceux de bootstrap.
Mais je suis presque sur que vous ne parlez pas de .css et que je suis encore à coté de la plaque :-)
Dernière modification par i_love_dc (2015-11-13 16:55:38)
Hors ligne
Styliser n'est pas un soucis. Idem pour attribuer des class aux ul et li.
Le problème se situe au niveau des bouts de codes qui sont dans les balises <a>.
Dernière modification par pierrevg (2015-11-13 17:41:32)
Hors ligne
ah..j'men excuse alors (de poluer pour rien)...il s'agit donc du code php ... la pour le coup j'y comprend riendutoutkeudal .
Hors ligne
Coucou, du nouveau à propos de menu déroulant responsive ?
Hors ligne
Pas pour le moment : il me faut modifier le plugin plus profondément que je ne le pensais au début de la discussion, j'y parviendrai probablement en surchargeant la fonction de sortie dans le _public.php du thème, comme je l'ai fait pour Menu simple, mais dans tous les cas, je n'en ai pas le temps tout de suite, il faudra patienter
Hors ligne
Plop Philippe.
Juste pour te signaler, ainsi qu'aux utilisateurs de ton thème qu'il y a eu des mises à jour:
- Bootsrap v.3.3.6
- FontAwesome 4.5.0
.
Dernière modification par i_love_dc (2015-12-04 08:32:54)
Hors ligne
Hello,
Je me suis lancé dans l'intégration du plug-in "menu" sur ce thème. Le résultat n'est pas trop mal : http://www.carcraon.fr/
J'aurais besoin d'un peu d'aide pour le CSS, je ne vois pas les sous-menu lorsque le menu est replié (sur mobile ou bien en redimensionnant la fenêtre). Avez vous une idée de comment faire ?
Pour ceux que le code modifié du plug-in menu intéresse me contacter par MP.
Hors ligne
Bonjour
Il serait sympa de proposer ton archive du plugin modifier voir même avec Philippe et pierre pour mettre a jour thème et ou plugin de façon officielle et libre pour tous.
Hors ligne
Très sympa l'adaptation ;)
Je ne sais pas si c'est voulu chez toi, mais on ne peut pas cliquer sur le lien de plus haut niveau ( par exemple pour aller sur /category/L-association).
Pour ton bug, je ne sais pas si c'est un problème de CSS : en effet le clic sur un élément avec des sous-menus replie tout le menu. As-tu vérifié les attributs nécessaires comme indiqué ici : http://getbootstrap.com/javascript/#dropdowns ?
Hors ligne
voir même avec Philippe et pierre pour mettre a jour thème et ou plugin de façon officielle et libre pour tous.
Je crois qu'il n'y a pas besoin de modifier le plugin, il vaut mieux à mon avis reporter dans le _public.php du thème la fonction d'affichage du plugin, c'est ce que j'ai fait pour intégrer SimpleMenu ;)
Hors ligne
Pas de soucis pour partager le code du plug-in. Il est sur github : https://github.com/mrbidon/menu ... c'est juste que je n'en suis pas très fier, je ne suis développeur de métier mais pas web designer, il doit largement y avoir moyen d'optimiser. M'enfin je suis content, c'est ma première contribution en code à un logiciel libre ;-)
Coté thème, j'ai juste ajouté un peu de css pour que les couleurs du sous menu passent mieux :
.dropdown-menu > li > a {
color : #FFF;
}
.dropdown-menu {
background: #BBB none repeat scroll 0% 0%;
border: none;
}
Dans _top j'ai mis, mais ça (vous devez vous en doutez ;-)) :
{{tpl:Menu level="2"}}
Sinon, pour ce qui est des liens dans le menu, visiblement ils sont nécessaire pour les menus dropdown de Bootstrap. Mais je devrais les changer par #, car il ne sont pas être utilisés en temps que tel (j'imagine que ça permet d'avoir la capture d'un clic en CSS qui déroule ou enroule le menu sans utiliser de js).
Pour mon problème d'affichage quand la fenêtre est plus petite, j'ai testé la démo de bootstrap et effectivement ça fonctionne. Je vous tiens au courant, quand, j'aurais corrigé ce qui ne va pas.
Merci pour les encouragements ;-)
Dernière modification par mrbidon (2016-02-02 21:50:32)
Hors ligne
@mrbidon : j'ai eu besoin d'intégrer un nouveau site basé sur le thème Grayscale, avec un menu déroulant pour Bootstrap (Yamm3).
J'avais le même bug, résolu en supprimant l'appel au script grayscale.js (plus exactement la dernière fonction). C'est peut-être la source de ton bug sur les petits écrans ?
Hors ligne
Vous n'êtes pas identifié(e).