Forum Crea illusion Fantasy


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.

Forum Crea illusion Fantasy

#Forum d'entraide, une inscription pour nous rejoindre.


RechercherAccueilAccueil  FAQFAQ  PortailPortail  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|

Menu horizontal avec sous-rubriques et un effet spirale

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
Ptite_Perle
Messages : 5079
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81111
Fondatrice
Ptite_Perle
24px
MessageSujet: Menu horizontal avec sous-rubriques et un effet spirale Mar 23 Mai 2017 - 20:42

Coucou

Un joli rendu pour des menus originaux

Code Html:


Code:
<!---------------Code-html---------------->
<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>
<li><a href="#">Submenu b</a></li>
<li><a href="#">Submenu c</a></li>
<li><a href="#">Submenu d</a></li>
<li><a href="#">Submenu e</a></li>
<li><a href="#">Submenu f</a></li>
<li><a href="#">Submenu g</a></li>
<li><a href="#">Submenu h</a></li>
</ul>
</li>
<li class="active"><a href="#s2">Menu 2</a>
<ul class="submenu">
<li><a href="#">Submenu a</a></li>
<li><a href="#">Submenu b</a></li>
<li><a href="#">Submenu c</a></li>
<li><a href="#">Submenu d</a></li>
<li><a href="#">Submenu e</a></li>
<li><a href="#">Submenu f</a></li>
<li><a href="#">Submenu g</a></li>
<li><a href="#">Submenu h</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="submenu">
<li><a href="#">Submenu a</a></li>
<li><a href="#">Submenu b</a></li>
<li><a href="#">Submenu c</a></li>
<li><a href="#">Submenu d</a></li>
<li><a href="#">Submenu e</a></li>
<li><a href="#">Submenu f</a></li>
<li><a href="#">Submenu g</a></li>
<li><a href="#">Submenu h</a></li>
</ul>
</li>

Code CSS:

Code:
#header #menu {display:none;}
.menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
position: absolute;
top: 60px;
left: 100px;
    height: 58px;
}
.menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    background: -o-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);

    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
    min-width: 160px;
}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu > li:first-child {
    border-radius: 5px 0 0;
}
.menu a {
    border-left: 3px solid rgba(0, 0, 0, 0);
    color: #808080;
    display: block;
    font-family: 'Lucida Console';
    font-size: 18px;
    line-height: 54px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
}
.menu li:hover {
    background-color: #1c1c1c;
    background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
    background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
    background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
    background: -o-linear-gradient(#1c1c1c, #1b1b1b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
    background: linear-gradient(#1c1c1c, #1b1b1b);

    border-bottom: 2px solid #222222;
    border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
    border-radius: 5px 0 0 0;
    border-left: 3px solid #37C42B;
    color: #37C42B;
}
/* submenu styles */
.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;

    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);

    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;

    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}
/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
Rectangletops
Messages : 230
Venue : 27/03/2011 Je suis : Masculin
Né(e) le : 04/01/1954
Age : 65
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 58082
inactif
Rectangletops
24px
MessageSujet: Re: Menu horizontal avec sous-rubriques et un effet spirale Dim 18 Nov 2018 - 18:46
Bonjour,
Je suis pas souvent ici que pour me documenter et tester sur mon site. [Vous devez être inscrit et connecté pour voir cette image]
Merci pour le code
Roland
Revenir en haut Aller en bas
http://www.yakachiner.be
AuteurMessage
Ptite_Perle
Messages : 5079
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81111
Fondatrice
Ptite_Perle
24px
MessageSujet: Re: Menu horizontal avec sous-rubriques et un effet spirale Lun 19 Nov 2018 - 16:23
Coucou Rectangletops

Le forum est fait pour vous aider Smile

Amicalement
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
Rectangletops
Messages : 230
Venue : 27/03/2011 Je suis : Masculin
Né(e) le : 04/01/1954
Age : 65
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 58082
inactif
Rectangletops
24px
MessageSujet: Re: Menu horizontal avec sous-rubriques et un effet spirale Sam 15 Déc 2018 - 22:52
Bonjour,
Avec chrome il est visible avec Mozila non, pourquoi ?
Je vous donne mon lien site [Vous devez être inscrit et connecté pour voir ce lien]
Revenir en haut Aller en bas
http://www.yakachiner.be
AuteurMessage
Ptite_Perle
Messages : 5079
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81111
Fondatrice
Ptite_Perle
24px
MessageSujet: Re: Menu horizontal avec sous-rubriques et un effet spirale Dim 16 Déc 2018 - 11:34
Coucou

Voici l'explication que j'ai lue

La propriété -moz-appearance est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native du système d'exploitation.

La propriété -webkit-appearance est utilisée dans les navigateurs basés sur WebKit (c'est-à-dire Safari) et sur Blink (c'est-à-dire Chrome ou Opera) et permet d'avoir la même fonctionnalités.

On notera que plusieurs navigateurs, non basés sur WebKit (Firefox et Edge par exemple), prennent en charge ce préfixe pour des raisons de compatibilité web.


Amicalement
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
Rectangletops
Messages : 230
Venue : 27/03/2011 Je suis : Masculin
Né(e) le : 04/01/1954
Age : 65
Je vie à : Belgique
Humeur : Bonne souvent.
Mes Points : 58082
inactif
Rectangletops
24px
MessageSujet: Re: Menu horizontal avec sous-rubriques et un effet spirale Dim 16 Déc 2018 - 13:02
Bonjour,
oui d'accord et je fait comment pour que tout les navigateurs puissent le voir.
sinon si ce n'est que google chrome et pas les autres, alors je le supprime
Revenir en haut Aller en bas
http://www.yakachiner.be
AuteurMessage
Ptite_Perle
Messages : 5079
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 81111
Fondatrice
Ptite_Perle
24px
MessageSujet: Re: Menu horizontal avec sous-rubriques et un effet spirale Lun 17 Déc 2018 - 15:40
Coucou

Je t'es mit des codes pour un menu vertical, tout navigateur

Va voir ici et tiens moi au courant

[Vous devez être inscrit et connecté pour voir ce lien]

Amicalement
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
Contenu sponsorisé
24px
MessageSujet: Re: Menu horizontal avec sous-rubriques et un effet spirale
Revenir en haut Aller en bas

Menu horizontal avec sous-rubriques et un effet spirale

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Problème avec sous forum
» Créer un menu horizontal qui défile
» Créer un menu horizontal en accordéon
» Menu déroulant avec page HTML
» MAJ Nüvi 2595LMT sous ubuntu avec virtualbox

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy :: Sites web-