Voici un petit tuto pour installer un menu déroulant pour les catégories wordpress sans utiliser autre chose que Jquery et CSS.
Vous pouvez voir un exemple de ce script qui tourne sur le tout nouveau design de notre annuaire gratuit

La problématique de wordpress, c’est que ce cms utilise des class que l’on ne peut pas modifier sans entrer dans le noyaux ou installer un module tiers, et la, on s’embarque souvent dans du code mal fait ou des modules non suivis etc.

J’ai donc cherché une solution simple et rapide à mettre en œuvre.
Je me suis basé sur l’excellent tuto « Créer un menu déroulant “accordéon” avec jQuery » de Thomas D. (tuto sur alsacreations)  pour la réalisation du menu déroulant que j’ai adapté à wordpress. Pour le CSS, je vous laisse vous débrouiller, ce n’est vraiment pas ce qui nous intéresse, ceux qui comprendront la manip, sauront largement coder le reste

Bien entendu, il faut utiliser la bibliothèque jquery. Le menu sera fonctionnel aussi avec JS désactivé (mais il sera déjà déroulé).

Voici le code javascript qui nous intéresse

<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus :
$(".navigation ul.subMenu").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"

// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;

// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.subMenu").slideUp("normal");
$(this).next("ul.subMenu").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});

} ) ;
// -->
</script>

Voici le code d’origine généré par wordpress pour la liste des catégories

vous allez vite comprendre ou est le problème.

J’ai volontairement épuré le code afin de mieux visualiser .

<ul class="categories">
	<li class="cat-item"><a href="">ITEM 1</a>
        <ul class='children'>
            <li class="cat-item"><a href="">Sous item</a></li>
            <li class="cat-item"><a href="">Sous item</a></li>
            <li class="cat-item"><a href="">Sous item</a></li>
        </ul>
    </li>
	<li class="cat-item"><a href="">ITEM 1</a>
        <ul class='children'>
            <li class="cat-item"><a href="">Sous item</a></li>
        </ul>
    </li>
    <li class="cat-item"><a href="">ITEM 2</a></li>
</ul>

On constate assez facilement que l’on va avoir un problème avec les class hérités de l’ul children: cat-item est présent dans l’ul parent et enfant. Il faudrait donc 2 class différentes si l’on veut suivre le tuto d’alsacreations.

Passons à l’adaptation…

WordPress ne génère pas de <span>, donc, déjà, on peut supprimer cette partie du script, puis on adapte les différentes class.
On adapte ensuite le nom des class à celles du cms.

On remplace donc :

• .navigation par .categories
• .subMenu par .children
• .toggleSubMenu par .cat-item

Comme wordpress affiche des catégories et sous-catégories cliquables on va donc modifier le comportement, au lieu d’utiliser la fonction click on va utiliser mouseover.

Voici le résultat de la première étape :

<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus :
$(".categories ul.children").hide();

// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "children" :
$(".categories li.cat-item > a").mouseover( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.children:visible").length != 0) {
$(this).next("ul.children").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".categories ul.children").slideUp("normal");
$(this).next("ul.children").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});

} ) ;
// -->
</script>

Et la, c’est le drame !

Le menu se replie des que l’on passe au dessus d’un lien contenu dans le sous menu, rappelez vous, tous les li ont la même class (.cat-item) et c’est sur celle ci que le js se base. Donc, on va tout simplement renommer à la volé la class cat-item en cat-item_under des sous-catégorie dès que la page est chargée et on aura notre joli menu déroulant pour les catégories wordpress sans même toucher au php ou installer un plugin. Il ne vous restera ensuite qu’a adapter votre css comme vous le souhaitez.

Voici le script pour le menu déroulant wordpress

<script type="text/javascript">
<!--
$(document).ready( function () {
 // On cache les sous-menus :
 $(".categories ul.children").hide();
 //On modifie la class du sous menu pour conserver le mouseover lors du survole de sous-cat
 $(".categories ul.children li").addClass("cat-item_under").removeClass("cat-item");

 //on applique l'action mouseover
 $(".categories li.cat-item > a").mouseover( function () {
 // Si le sous-menu était déjà ouvert, on le referme :
 if ($(this).next("ul.children:visible").length != 0) {
 $(this).next("ul.children").slideUp("normal");
 }
 // Si le sous-menu est caché, on ferme les autres et on l'affiche :
 else {
 $(".categories ul.children").slideUp("normal");
 $(this).next("ul.children").slideDown("normal");
 }
 // On empêche le navigateur de suivre le lien :
 return false;
 });
} ) ;
// -->
</script>

J’espère avoir permis à certaines personnes de ne pas bloquer sur la création d’un menu déroulant wordpress avec jquery
Et surtout, d’éviter d’utiliser des plugins pour rien !

Cet article vous a été proposé par informatclic le blog informatique et hightech

Sur cette première texture, on voit bien les taches de café

pour moi, c’est la plus réussie, bien nette, des zones d’ombres, du grains, des plissures bien marquées.

Une deuxième bien crado, bien jaune café

Celle ci est un peu plus grung on va dire. On voit une belle zone d’ombre ainsi que des plissures sur le papier bien marqués elles aussi.

La troisième texture fait vieux papier

Oui, vous ne trouvez pas ? Perso, ca me fait penser à du papier vieillit par le temps… TRES vieillit lol !

Ces textures sont bien évidemment utilisable à titre personnel ou commercial et non revendables
Hésitez pas à me faire part de leur utilisation, ca me fera toujours plaisir !

Cet article vous a été proposé par informatclic le blog hightech

Bien entendu, vous pouvez utiliser ces textures comme bon vous semble, commercial ou non, juste un petit message pour dire ou montrer ce que vous en avez fait me fera plaisir

voici un mini tuto pour la création de la texture

Le procédé est simple. voici les ingrédients:

• 1 feuille de papier journal vierge format A3
• 1 tasse de café
• 1 sopalin
• Du café moulu mais pas trop fin
• 1 table en bois rainuré

Alors, j’ai posé la feuille sur la table, arrosée de café par petites touches, on laisse agir, on saupoudre la feuille de café (pas trop) on laisse coller puis on secoue l’excédent dans la poubelle.

L’étape suivant, on ajoute de l’eau pour diluer et étaler avec du sopalin. puis on dépose la feuille détrempée sur la table de manière à ce que quelques bosses se forment afin d’obtenir des aspérités.

On prends son appareil (j’ai un Canon EOS 350D), et on shoot, on shoot, on shoot.Différentes distance, différents points de vue etc, le tout est d’obtenir un maximum de clichés pour pouvoir faire le tri. Bon, après, on utilisera photoshop ou TheGimp pour améliorer un peu la qualité de la texture et jouer avec les niveaux.

Voici le résultat des textures haute résolution

1ere image, ma préférée…On aperçois bien les rainures du bois, les bosses sous la feuille, la couleur du café, bref top 1 ! ^^

Sur cette deuxième texture, on voit plus les plis du papier et les grains, normal, c’est le coté de la feuille. Vous vous rappelez que je n’ai pas mouillé toute la feuille.

Qui dit café, dit forcément grains, et pourquoi pas ?

Et voici la 4eme, toujous rainuré avec une belle bosse comme je les aimes !

Désormais, le résultat de mon expérience sèche dans un coin, je verrai si je peut faire d’autres textures un peu plus sèches très bientôt

Cet article vous a été proposé par informatclic le blog informatique

Texture avec quelques aspérités intéressantes

Une texture pleine de relief

En voici une avec de la verdure, ca peut être utile dans certains cas

Voici une belle texture craquelée !

Avec un mur comme ca, je déménage directe ! :p

Bien entendu, si la taille des textures est trop limite pour vous, je suis prêt à vous envoyer la taille originale par email. Faites moi signe via les commentaires
Flikr limite en taille maximale si j’ai pas un compte pro, et comme le compte pro me sert à rien …

Amusez-vous bien, et surtout, n’oubliez pas, montrez moi vos réalisations

C’est aussi pour moi l’occasion d’ouvrir une nouvelle catégorie, la catégorie Web Design. J’y partagerai mes découvertes et pourquoi pas des tutos ou créations, on verra ce que l’avenir nous réservera. En tout cas,c ‘est un des domaines qui me passionne le plus, et je vais essayer de partager un maximum mes expériences et trouvailles.

Icônes RSS pour vos blog

Voici un set composé de 4 icones RSS

Icônes pour réseaux sociaux

Ce set est composé de 4 icones, Digg, delicious, facebook et twitter, vous pouvez d’ailleurs les voir sur ce blog, et oui, pas folle la bête, j’utilise ce que je crée quand même

28 icônes différentes déclinées en 10 coloris

Vous pourrez retrouver 10 couleurs différentes dans ces sets, le noir, orange, jaune, vert, vert foncé, bleu, marron, violet, rouge et rose.

Icônes rectangulaires déclinées en 8 coloris

Ces sets sont composés de 28 icônes déclinés en 8 coloris différents, bleu, marron, vert, orange, rose, rouge, noir et jaune

Icônes rondes et plates déclinées en 6 coloris

Ces sets sont moins brillants, décomposés en 6 coloris différents et toujours 28 icônes. On retrouve donc le bleu, rouge, rose, vert, noir et violet.

Icônes rondes et brillantes déclinés en 8 coloris

Des sets plutôt classiques, le premier mis en ligne d’ailleurs, il se fondra facilement dans un design. 28 icônes déclinées en 8 coloris, noir, rouge, jaune, orange, vert, rose, bleu et bleu ciel.

Et vous, les sets d’icônes, vous en avez fait, vous en utilisez ?

N’hésitez pas à mettre des liens vers vos sets (les vôtres, pas n’importe les quels… Merci d’avance.)

Cet article vous a été proposé par informatclic le blog informatique