• Accueil
  • Effets
    • Effets Boutons
    • Effets Colonnes
    • Effets Images
    • Effets Textes
  • Templates
  • Plugins
    • Pop UP
    • Menus
    • Extras
      • Horaire d'ouverture
      • Horloge
      • Slider Vertical
      • Effet Ondulation
      • Tabulation
      • Bouton Liquide
  • Démo Boutique
  • Contact

MENUS

Menus de Navigation

Qui vont vous étonner !

Vous trouverez des codes à copier sur vos réalisations Webacappella,
à l'aide de JavaScript et CSS/HTML.

Menu Multicolor

CODES CSS

Pour vos Menus

News

Quelques nouvelles!

Contact

Remplissez le formulaire pour être contacté

À propos de nous

Qui sommes nous et ce que nous faisons..

CODES MENU

CODE HEAD

COPIER LE CODE DANS HEAD DE LA PAGE :

<style> * {box-sizing: border-box} /* Set height of body and the document to 100% */ body, html { height: 100%; margin: 0; font-family: Raleway; } /* Style tab links */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } .tablink:hover { background-color: #777; } /* Style the tab content (and add height:100% for full page content) */ .tabcontent { color: white; display: none; padding: 100px 20px; height: 100%; } #Home {background-color: red;} #News {background-color: green;} #Contact {background-color: blue;} #About {background-color: orange;} </style>
CODE BODY

COPIER LE CODE DANS BODY DE LA PAGE :

<script> function openPage(pageName,elmnt,color) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } document.getElementById(pageName).style.display = "block"; elmnt.style.backgroundColor = color; } document.getElementById("defaultOpen").click(); </script>
CODE HTML PAGE

COPIER LE CODE DANS ELEMENT HTML

<button class="tablink" onclick="openPage('Home', this, '#003143')">Home</button> <button class="tablink" onclick="openPage('News', this, '#3b81db')" id="defaultOpen">News</button> <button class="tablink" onclick="openPage('Contact', this, '#a13bdb')">Contact</button> <button class="tablink" onclick="openPage('About', this, '#db3bc3')">Infos</button> <div id="Home" class="tabcontent"> <img src=wa_res/icons/coding.png?t=4c962515_fb3f_471e_8ad2_69a689e607e7> <h3>CODES CSS</h3> <p>Pour vos Menus</p> </div> <div id="News" class="tabcontent"> <img src=wa_res/icons/newspaper.png?t=4c962515_fb3f_471e_8ad2_69a689e607e7> <h3>News</h3> <p> Quelques nouvelles!</p> </div> <div id="Contact" class="tabcontent"> <img src=wa_res/icons/EUtu.png?t=4c962515_fb3f_471e_8ad2_69a689e607e7> <h3>Contact</h3> <p>Remplissez le formulaire pour être contacté</p> </div> <div id="About" class="tabcontent"> <img src=wa_res/icons/FALAR.png?t=4c962515_fb3f_471e_8ad2_69a689e607e7> <h3>À propos de nous</h3> <p>Qui sommes nous et ce que nous faisons..</p> </div>

Téléchargez l'archive MENU Multicolor
pour WebAcappella FUSION

Télécharger

Menu en Accordéon " A "

Message d'accueil conçu pour présenter une personne à un nouveau lieu ou une nouvelle situation et pour la mettre à l'aise.

Le World Wide Web, la Toile mondiale ou la Toile, est un système hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites.

Découvrez tous les moyens de nous contacter · Plus d'informations · Questions & réponses .

CODES MENU

CODE HTML PAGE

COPIER LE CODE DANS ELEMENT HTML:

<!-- FIRST TAB --> <div class="tab"> <input id="tab-1" type="checkbox"> <label for="tab-1">BIENVENUE</label> <div class="content"><p>Message d'accueil conçu pour présenter une personne à un nouveau lieu ou une nouvelle situation et pour la mettre à l'aise.</p><img src=wa_res/icons/coding.png?t=4c962515_fb3f_471e_8ad2_69a689e607e7></div> </div> <!-- SECOND TAB --> <div class="tab"> <input id="tab-2" type="checkbox"> <label for="tab-2">INFORMATIONS</label> <div class="content"><p>Le World Wide Web, la Toile mondiale ou la Toile, est un système hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites.</p></div> </div> <!-- THIRD TAB --> <div class="tab"> <input id="tab-3" type="checkbox"> <label for="tab-3">CONTACT</label> <div class="content"><p>Découvrez tous les moyens de nous contacter · Plus d'informations · Questions & réponses .</p></div> </div>
CODE ELEMENT CSS

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

//* (A) TABS CONTAINER */ .tab, .tab * { font-family: Raleway; box-sizing: border-box; } .tab { max-width:1800px; } /* (B) HIDE CHECKBOX */ .tab input { display: none; } /* (C) TAB LABEL */ .tab label { /* (C1) DIMENSIONS */ position: relative; /* required for (f2) position:absolute */ display: block; width: 100%; margin-top: 10px; padding: 10px; /* (C2) COSMETICS */ font-weight: 700; color: #fff; background: #6102a1; cursor: pointer; } /* (D) TAB CONTENT - HIDDEN BY DEFAULT */ /* css animation will not work with auto height */ /* this is why we use max-height instead */ .tab .content { background: #f3e0ff; overflow: hidden; transition: max-height 0.3s; max-height: 0; } .tab .content p { padding: 10px; } /* (E) OPEN TAB ON CHECKED */ .tab input:checked ~ .content { max-height: 100vh; } /* (F) EXTRA - ADD ARROW INDICATOR */ .tab label::after { /* (F1) RIGHT ARROW */ display: block; content: "\25b6"; /* (F2) PLACE AT RIGHT SIDE */ position: absolute; right: 10px; top: 10px; /* (F3) ANIMATED ARROW */ transition: all 0.3s; } /* (F4) ROTATE ARROW ON CHECKED */ .tab input:checked ~ label::after { transform: rotate(90deg); }

Téléchargez l'archive MENU ACCORDEON
pour WebAcappella FUSION

Télécharger

Menu en Accordéon " A " Fermeture auto

Le World Wide Web, la Toile mondiale ou la Toile, est un système hypertexte public fonctionnant sur Internet.

Message d'accueil conçu pour présenter une personne à un nouveau lieu ou une nouvelle situation et pour la mettre à l'aise.

Découvrez tous les moyens de nous contacter · Plus d'informations · Questions & réponses .

CODES MENU

CODE HTML PAGE

COPIER LE CODE DANS ELEMENT HTML:

<!-- FIRST TAB --> <div class="tab"> <input id="tab-1r" type="radio" name="tabr"> <label for="tab-1r">BIENVENUE</label> <div class="content"><p>Le World Wide Web, la Toile mondiale ou la Toile, est un système hypertexte public fonctionnant sur Internet.</p></div> </div> <!-- SECOND TAB --> <div class="tab"> <input id="tab-2r" type="radio" name="tabr"> <label for="tab-2r">INFORMATIONS</label> <div class="content"><p>Message d'accueil conçu pour présenter une personne à un nouveau lieu ou une nouvelle situation et pour la mettre à l'aise.</p></div> </div> <!-- THIRD TAB --> <div class="tab"> <input id="tab-3r" type="radio" name="tabr"> <label for="tab-3r">CONTACT</label> <div class="content"><p>Découvrez tous les moyens de nous contacter · Plus d'informations · Questions & réponses .</p></div> </div>
CODE ELEMENT CSS

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

/* (A) TABS CONTAINER */ .tab, .tab * { font-family: Raleway; box-sizing: border-box; } .tab { max-width:1800px; } /* (B) HIDE CHECKBOX */ .tab input { display: none; } /* (C) TAB LABEL */ .tab label { /* (C1) DIMENSIONS */ position: relative; /* required for (f2) position:absolute */ display: block; width: 100%; margin-top: 10px; padding: 10px; /* (C2) COSMETICS */ font-weight: 700; color: #fff; background: #6102a1; cursor: pointer; } /* (D) TAB CONTENT - HIDDEN BY DEFAULT */ /* css animation will not work with auto height */ /* this is why we use max-height instead */ .tab .content { background: #f3e0ff; overflow: hidden; transition: max-height 0.3s; max-height: 0; } .tab .content p { padding: 10px; } /* (E) OPEN TAB ON CHECKED */ .tab input:checked ~ .content { max-height: 100vh; } /* (F) EXTRA - ADD ARROW INDICATOR */ .tab label::after { /* (F1) RIGHT ARROW */ display: block; content: "\25b6"; /* (F2) PLACE AT RIGHT SIDE */ position: absolute; right: 10px; top: 10px; /* (F3) ANIMATED ARROW */ transition: all 0.3s; } /* (F4) ROTATE ARROW ON CHECKED */ .tab input:checked ~ label::after { transform: rotate(90deg); }

Téléchargez l'archive MENU ACCORDEON
pour WebAcappella FUSION

Télécharger

EFFET HOVER " SNIP "

sample20

MACAO VOTRE TITRE

Macao est une région autonome de la côte sud de la Chine continentale, dans le delta de la rivière des Perles, en face de Hong Kong. Territoire portugais jusqu'en 1999, elle mêle différentes influences culturelles.

Informations

CODES EFFET HOVER "SNIP"

CODE HTML PAGE

COPIER LE CODE DANS ELEMENT HTML:

<figure class="snip1256"> <img src="wa_res/icons/business-g7a94522c6_640.jpg?t=4c962515_fb3f_471e_8ad2_69a689e607e7" alt="sample20"/> <figcaption> <h3>MACAO VOTRE TITRE</h3> <p>Macao est une région autonome de la côte sud de la Chine continentale, dans le delta de la rivière des Perles, en face de Hong Kong. Territoire portugais jusqu'en 1999, elle mêle différentes influences culturelles.</p><a href="https://wa-fusion.fr/" class="read-more">Informations</a> </figcaption> </figure>
CODE ELEMENT CSS

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

figure.snip1256 { font-family: 'Ropa Sans'; color: #fff; position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 999px; max-height: 350px; width: 100%; color: #ffffff; text-align: left; background-color: #6102a1; font-size: 16px; -webkit-perspective: 50em; perspective: 50em; } figure.snip1256 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } figure.snip1256 img { opacity: 1; width: 100%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } figure.snip1256 figcaption { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% -50%; -ms-transform-origin: 50% -50%; transform-origin: 50% -50%; z-index: 1; opacity: 0; padding: 20px 30px; } figure.snip1256 h3, figure.snip1256 p { line-height: 1.5em; } figure.snip1256 h3 { margin: 0; font-weight: 800; text-transform: uppercase; } figure.snip1256 p { font-size: 0.8em; font-weight: 500; margin: 0 0 15px; } figure.snip1256 .read-more { border: 2px solid #ffffff; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #ffffff; display: inline-block; } figure.snip1256 .read-more:hover { background-color: #ffffff; color: #000000; } figure.snip1256:hover img, figure.snip1256.hover img { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; } figure.snip1256:hover figcaption, figure.snip1256.hover figcaption { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

EFFET HOVER "DUPLO"

CODES EFFET HOVER "DUPLO"

CODE HTML PAGE

COPIER LE CODE DANS ELEMENT HTML:

<ul class="img-list"> <li><img src="wa_res/icons/AASLIDE_05.jpg?t=4c962515_fb3f_471e_8ad2_69a689e607e7"></li> </ul>
CODE ELEMENT CSS

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

.img-list { list-style: none; padding: 0; margin: 0; } .img-list li { border: 5px solid transparent; box-sizing: border-box; width: 100%; float: left; position: relative; cursor: pointer; } .img-list img { vertical-align: middle; } /* Image Placeholder Styles -------------------------------------------------------------- */ .img-placeholder:before, .img-placeholder:after { padding-top: 100%; content: ""; display: block; } .img-placeholder { background: #222; box-shadow: 0 0 0 8px #222 inset, 0 0 0 9px #333 inset; color: #444; line-height: 0; text-align: center; display: block; } /* The hover effect -------------------------------------------------------------- */ .img-list li:before { transition: all .5s ease; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #333; transform: scale(0); } .img-list li:hover:before { opacity: .5; transform: scale(1); } .img-list li:after { transition: all .6s ease .2s; content: ""; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; border: 1px solid #aaa; background: #000; opacity: 0; transform: scale(0); } .img-list li:hover:after { opacity: .35; transform: scale(1); }

EFFET HOVER " MOVE DOWN "

Norman Gordon

You don't get to be mom if you can't fix everything just right.

sample45

CODES EFFET " MOVE DOWN "

CODE HTML PAGE

COPIER LE CODE DANS ELEMENT HTML:

<figure class="snip1482"> <figcaption> <h2>Norman Gordon</h2> <p>You don't get to be mom if you can't fix everything just right.</p> </figcaption> <a href="#"></a><img src="wa_res/icons/AASLIDE_04.jpg?t=4c962515_fb3f_471e_8ad2_69a689e607e7" alt="sample45" /> </figure>
CODE ELEMENT CSS

COPIER LE CODE CSS LIÉ A L'ELEMENT HTML:

.snip1482 { font-family: 'Raleay'; position: relative; margin: 10px 20px; min-width: 230px; max-width: 999px; min-height: 350px; width: 100%; color: #ffffff; text-align: right; line-height: 1.4em; background-color: #1a1a1a; font-size: 16px; } .snip1482 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .snip1482 img { position: absolute; right: 0%; top: 50%; opacity: 1; width: 100%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } .snip1482 figcaption { position: absolute; width: 50%; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 20px 0 20px 20px; } .snip1482 h2, .snip1482 p { margin: 0; width: 100%; -webkit-transform: translateX(20px); transform: translateX(20px); opacity: 0; } .snip1482 h2 { font-family: 'Playfair Display', Arial, sans-serif; text-transform: uppercase; margin-bottom: 5px; } .snip1482 p { font-size: 0.8em; } .snip1482 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .snip1482:hover img, .snip1482.hover img { width: 55%; right: -10%; } .snip1482:hover figcaption h2, .snip1482.hover figcaption h2, .snip1482:hover figcaption p, .snip1482.hover figcaption p { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; }

Réalisé avec WebAcappella Fusion - 2023 wa-fusion.fr