-
Menu CCS effet spirale
Magnifique menu horizontal avec sous-rubriques et un effet spirale au survol pointeur.
On peut le voir ci-dessus dans le header.
Uniquement en CSS (+html), pas de javascript ou de jQuery.....
-
Commentaires
Bonjour Mike
J'ai essayé de changer la couleur de fond et des caractères mais je n'y arrive pas, je ne trouve pas dans le CSS la couleur correspondante au noir.
Peut-on aussi changer la grandeur des caractères ?
Merci en tous les cas pour le travail effectué, c'est génial. Et surtout merci de nous aider
Merci de ton aide
@lainSi une réponse doit être apportée c'est sur le site http://petitrandonneur.fr, me suis trompé, je ne suis pas déconnecté de l'autre blog !
-
Vendredi 30 Septembre 2016 à 19:13
-
merci beaucoup ; je vais demander pour java script - superbe toutes ce que tu m'as donné ................ Mamy Annickmdr ............... moi je suis nulle dans ce domaine, donc heureuse d'appliquer les informations, mais avant d'aller aux courses j'avais mis en place, et je me suis retrouvée avec menu déroulant vertical au lieu horizontal, donc merci pour la correction que je viens d'appliquer et tout est OK - je profite de ce passage pour poser autre question sur mon autre blog Blogger j'ai mis en place une formule menu déroulant vertical pour mes listes amies (très utile que je complète au fur et à mesure, j'ai voulu faire la même chose ici mais ne fonctionne pas - voici le lien de mon autre blog - je suis chiante ...
http://psptutoriels50.blogspot.fr/
j'ai pris la formule qui fonctionne donc chez Blogger dans un HTLM
http://blogavecblogger.blogspot.fr/2014/03/creer-un-menu.html-
Jeudi 16 Juin 2016 à 13:13
j'ai testé ce code sur mon blog et il fonctionne très bien.
Javascript doit être activé sur ton blog.
Il faut le compléter en ajoutant tes liens (URL) à la place de "Lien 1, Lien 2 etc dans "value= ".exemple:
<p>
<script>// <![CDATA[
function ChangeUrl(formulaire)
{
if (formulaire.ListeUrl.selectedIndex != 0)
{
var url ;
url = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
window.open(url,'_blank');
}
}
// ]]></script>
</p>
<form><select name="ListeUrl" size="1" onchange="ChangeUrl(this.form)">
<option selected="selected">-Menu Déroulant De Liens-</option>
<optgroup label="Groupe 1">
<option value="http://www.nicosite.net/">Nicosite</option>
<option value="Lien 2">Titre 2</option>
</optgroup>
<optgroup label="Groupe 2">
<option value="Lien 3">Titre 3</option>
<option value="Lien 4">Titre 4</option>
<option value="Lien 5">Titre 5</option>
</optgroup>
<optgroup label="Groupe 3">
<option value="Lien 6">Titre 6</option>
<option value="Lien 7">Titre 7</option>
</optgroup>
</select></form>
-
merci beaucoup pour l'information, bonne journée Mamy Annick-
Jeudi 16 Juin 2016 à 10:50
Non, ce n'est pas bon. il faut placer le menu au centre (left:50%) et le déplacer à gauche de la moitié de sa longueur (margin-left: -500px).
La longueur varie selon le nombre de colonnes et la largeur de celles-ci.
Mais .......je m'aperçois que ce décalage à gauche rentre en conflit avec le CSS du thème.
Donc on fait autrement.
1- Dans la partie HTML on ajoute en début de code (avant <ul class="menu">):<div id="position-menu">
Puis en fin de code la balise de fermeture:
</div>
Ce qui donne ceci en gros:
<div id="position-menu">
<ul class="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#s1">Menu 1</a>
<ul class="submenu">
<li><a href="#">Submenu a</a></li>
....... .......
</ul>
</div>
2- Dans la partie CSS on modifie :.menu {
position: absolute;
top: 60px;
left:50%; /**on place le menu au centre **/
height: 58px;
margin-left: -500px;/**On déplace le menu à gauche de la moitié de sa longueur**/
}
Par cette ligne de code:
.menu { }
Puis on ajoute avant cette ligne, le code suivant:
#positionmenu {
position: absolute;
top: 60px;
left:50%; /**on place le menu au centre **/
height: 58px;
margin-left: -500px;/**On déplace le menu à gauche de la moitié de sa longueur**/
}
Voilà ça doit fonctionner maintenant !
-
Jeudi 16 Juin 2016 à 08:52
j'ai modifié ainsi
.menu {
position: absolute;
top: 60px;
left: 20%; /**on place le menu au centre **/
height: 58px;
margin-left: -500px;/**On déplace le menu à gauche de la moitié de sa longueur**/
}
donc pour cette page essai cela fonctionne, je pense sera à revoir fonction de ma page
encore merci et bonne journée Mamy Annick
-
merci pour les informations je viens de faire un essai sur mon blog essais, mais une petite question peut on déplacer ce bloc afin qu'il soit centré sur la page par rapport à la bannière (si bannière posée ) bonne soirée Mamy Annick-
Mercredi 15 Juin 2016 à 21:02
-
@ la Gentille Rebelle: oui ça vient du fait que je fais tourner les sous-menus de -270° au lieu de 90° (ils arrivent donc au même point en faisant la grande boucle!). On voit d'ailleurs subrepticement les textes à l'envers.
@Mike GMZ: oui la réponse de l'auteur du billet n'est pas la panacée car en enlevant le code qu'il propose d'ajouter le comportement n'est pas modifié. J'ai beau réduire max-height jusqu'à 0, les menus s'ouvrent en pointant les sous-menus même non déroulés (en clignant un peu plus) et baisser z-index peut rendre l'ouverture du menu invisible (seule la fermeture apparaît)...Moi vrille pas mon menu et je suis sur firefox!
en + on dirait ke le spiral de Phiiil tourne dans l'autre sens mdr !!!@Phiiil
Oui, effectivement léger bug lors du survol des sous rubriques....
Sur le site source, la question est posée dans les commmentaires, et la réponse est un peu évasive:http://www.script-tutorials.com/whirling-dropdown-menu/
On va étudier le problème...Merci pour ce tuto qui m'a bien inspiré également pour cette page! Enfin, dans mon cas on parlerait plutôt d'un menu à effet vrille!
Me semble plus fluide sur Chrome que Firefox.
Par contre, il prend le pas sur tout ce qui se trouve en-dessous de son déploiement et je ne suis pas arrivé à imposer un z-index supérieur aux articles.
Cordialement,
Phiiil
Salut!
Oui, fausse manip de ma part !!! je ne voulais pas publier cet article, mais juste l'enregistrer....!
En fait, je testais une réponse pour le forum.
Le but c'est de placer un module actif (derniers visiteurs, stats..) dans un volet coulissant.
Voir le blog concerné.
Mais pas en copier/coller, car le module ne serait pas mis à jour.
Donc avec un peu de JS ...ça doit le faire ..!!!mon idée est venu à partir du code donné pour cette effet
http://la-gentille-rebelle.eklablog.com/effet-extension-horizontale-chez-pourkoi-pas-a107354062
jai eu ton mail de module dans menu coulissant mais erreur 404
jai mis des menu en coulissant chez moi !!!! suite à un code ki faisait coulissant en horizontal, moi jai enlevé le width et gardé ke le height, mis en sélecteur le module du menu ki correspond et EUR2KA , ça a marché lol
voici le code pour comparer avec le tien, kès t'en pense ????
#module_menu_contenu140214838 ul{
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
height:120px;}
#module_menu_contenu140214838 ul:hover{
height:530px;}Woooaaawwww..!!! beautiful ...!!!!
La texture (img) ralentit un peu l'effet spirale, non? ou c'est juste une impression ?
Et mon article "Shadowbox", t'as essayé ?Merci , reste plus ka le remplir de liens lol jai l'impression ke je fait une collection de menu mdr !!!
bonne soiréeVoici mon exercice lol merci pour ce super code ke tu partages
http://ekladata.com/YEfXshl0GsHiid2LhgdP35nyljo/menu-spiral-vierge-habille.html
Ajouter un commentaire
J'ai mis le code sur mon blog, mais ça fait juste disparaître le menu !
Comment il faut faire ?