Un menu Grande Contenance
Un menu Grande Contenance
Ce menu est proposé sur ce site : https://www.outils-web.com
Je l'ai un peu adapté, quelquefois simplifié son style, et commenté afin de l'utiliser plus facilement. Il fonctionne dans la barre menu de ce site. Il est à réserver à un affichage sur ordinateur ou tablette : il n'est pas responsive et son affichage ne serait pas correct sur un smartphone.
- Accueil
Bienvenue !
Voici quelques possibilités du Menu à Grande Contenance.
Ses items sont organisés avec des largeurs et des dispositions différentes.
Les liens présentés sont là pour l'exemple.Navigateurs
Les navigateurs testés l'affichent correctement !
- 4 Colonnes
Exemple de listes de liens
Images libres
Polices
GIFS animés
Texte aléatoire
- 3 Colonnes
Exemple de listes de liens (logiciels)
Utilitaires
Exemple de mise en page avec images
La plupart des logiciels présentés ci-dessus sont des logiciels dits "libres" ou "open source". Tous sont gratuits. En savoir plus avec un annuaire...
D'autres, sont des "freewares" : gratuits, certes mais non-libres et non-open source. En savoir plus...
- 5 Colonnes
Exemple de mise en page sur 5 colonnes
Boite arrière plan foncé, class=BoiteArrPlan.
Imaginez-vous ce qu'il découvrirait dans la direction opposée !Aussitôt, elle chancela un peu, madame ; tant de choses naïves et singulières à lire sur mon visage de ce qui allait arriver.
Incapable ou criminel, monsieur, c'est : pourquoi l'homme noble n'est pas en état de nous nuire.
Apportez-moi de bonnes idées, et des choses visqueuses.
Avouons toutefois qu'avec fidélité ils se battent une seconde, j'en eus honte toute ma vie !
Texte aléatoire EnneagonExemple de mise en page sur 5 colonnes (suite)
Même si on se ment, je sais que, grâce à ma propre vérité le cycle du cosmos dans la vie... c'est une grande roue et je ne cherche pas ici à mettre un point ! Mais ça, c'est uniquement lié au spirit.
Texte aléatoire Faux-texte... Van Dammesque...Mesdames, messieurs, la prise de conscience de nos dirigeants doit s'intégrer à la finalisation globale d'un rappel des droits fondamentaux de notre pays.
Texte aléatoire Faux-texte... Langue de bois...Boite arrière plan foncé, class=BoiteArrPlan.
Où le zombie préfère-t-il s'extasier sur la vérité ? Nous daignerons aller nous tromper. Ils ont envie de ces tubercules rôtis... Lara Croft se sert de dizaines de lamas. En quel lieu l'énarque terre à terre adore-t-il circuler ?
Texte aléatoire RomainValeri - Classique
Sites d'astuces
Ci-dessous le code CSS à placer en tête de votre article, boite libre.... ou sans les balises <style></style> dans votre feuille de style styleplus.css. Le code est commenté le plus possible. j'ai laissé en commentaire des règles présentes à l'origine mais que je n'ai pas utilisées. Elles peuvent être supprimées tout simplement. Rétablissez le z-index pour placer ce menu dans une boite du haut de GuppY.
<style type="text/css">
#MenuGC { /*attributs du bandeau*/
/*z-index:9000;*/ /*index haut pour superposer au reste de la page : IMPORTANT : ôter les commentaires pour l'utiliser*/
list-style:none;
width:100%; /*largeur du bandeau*/
margin:5px auto 0px auto; /*marges extérieures*/
height:43px; /*hauteur du bandeau*/
padding:0px 5px; /*marges intérieures*/
border-radius: 10px; /*arrondis*/
background:#8B3810; /*couleur de fond du bandeau si dégradé non fonctionnel*/
background: linear-gradient(to bottom, #B15316, #8B3810); /*couleur de fond du bandeau*/
/*border: 1px solid #002232;*/ /*bordure : ôter les commentaires pour l'afficher*/
/*box-shadow:inset 0px 0px 1px #edf9ff;*/ /*ombre portée intérieure : ôter les commentaires pour l'afficher*/
}
#MenuGC li { /*attributs des items du bandeau*/
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 5px; /*marges intérieures*/
margin: 7px 10px 0px 0px; /*marges extérieures*/
border:none;
}
#MenuGC li:hover { /*attributs de l'item du bandeau affiché au survol*/
border: 1px solid #777777; /*bordure*/
padding: 4px 5px; /*marges intérieures : idem ci-dessus*/
background: #C6EAF2; /*couleur de fond de l'item survolé si dégradé non fonctionnel ou pour simplifier*/
background: linear-gradient(to bottom, #C6EAF2, #91D7E6); /*couleur de fond de l'item survolé*/
border-radius: 5px 5px 0px 0px; /*arrondis : uniquement en haut*/
}
#MenuGC li a { /*attributs des liens des items du bandeau*/
font-family:Verdana, "Bitstream Vera Sans", sans-serif; /*police*/
font-size:14px; /*taille de la police*/
color: #EEEEEE; /*couleur*/
display:block;
text-decoration:none;
/*text-shadow: 1px 1px 1px #000000;*/ /*ombre portée du texte : ôter les commentaires pour l'afficher*/
}
#MenuGC li:hover a { /*attributs des liens des items du bandeau au survol*/
color:#161616; /*couleur*/
/*text-shadow: 1px 1px 1px #FFFFFF;*/ /*ombre portée du texte : ôter les commentaires pour l'afficher*/
}
#MenuGC li .drop { /*attributs de l'imagette drop.png*/
padding-right:20px; /*marge intérieure droite*/
background:url("img/images/drop.png") no-repeat right 6px; /*chemin de l'image et position*/
}
.MenuGCdropdown_1col,
.MenuGCdropdown_2col,
.MenuGCdropdown_3col,
.MenuGCdropdown_4col,
.MenuGCdropdown_5col { /*attributs des panneaux qui seront affichés au survol*/
/*z-index:9000;*/ /*index haut pour superposer au reste de la page : IMPORTANT : ôter les commentaires pour l'utiliser*/
margin:4px auto; /*marges extérieures*/
float:left;
position:absolute;
left:-3000px; /* Cache le panneau */
text-align:left;
padding:5px; /*marges intérieures*/
border:1px solid #777777; /*bordure : mieux si idem à l'item du bandeau...*/
border-top:none; /*pas de bordure en haut*/
background:#C6EAF2; /*couleur de fond du panneau si dégradé non fonctionnel ou pour simplifier*/
background: linear-gradient(to bottom, #91D7E6, #2FB3CE); /*couleur de fond du panneau*/
border-radius: 0px 5px 5px 5px; /*arrondis : haut droite et bas*/
}
.MenuGCdropdown_1col {width: 160px;}
.MenuGCdropdown_2col {width: 300px;}
.MenuGCdropdown_3col {width: 440px;}
.MenuGCdropdown_4col {width: 580px;}
.MenuGCdropdown_5col {width: 720px;} /*largeurs respectives des panneaux qui seront affichés au survol*/
#MenuGC li:hover .MenuGCdropdown_1col,
#MenuGC li:hover .MenuGCdropdown_2col,
#MenuGC li:hover .MenuGCdropdown_3col,
#MenuGC li:hover .MenuGCdropdown_4col,
#MenuGC li:hover .MenuGCdropdown_5col {
left:-1px; /* Place le panneau au survol */
top:auto;
}
.MenuGCTaille_1,
.MenuGCTaille_2,
.MenuGCTaille_3,
.MenuGCTaille_4,
.MenuGCTaille_5 { /*espace occupé par les colonnes*/
display:inline;
float: left;
position: relative;
margin: 0px 5px; /*marges extérieures*/
}
.MenuGCTaille_1 {width:130px;} /*largeurs de l'espace occupé par les colonnes : un peu moins que les panneaux*/
.MenuGCTaille_2 {width:270px;} /*par exemple un paragraphe occupant la largeur de 2 colonnes*/
.MenuGCTaille_3 {width:410px;} /*par exemple un paragraphe occupant la largeur de 3 colonnes*/
.MenuGCTaille_4 {width:550px;} /*par exemple un paragraphe occupant la largeur de 4 colonnes*/
.MenuGCTaille_5 {width:690px;} /*par exemple un paragraphe occupant la largeur de 5 colonnes*/
#MenuGC .MenuGC_right { /*attributs des items du bandeau alignés à droite*/
float:right;
margin-right:0px; /*marge extérieure droite*/
}
#MenuGC li .align_right { /*attributs du panneau aligné à droite*/
border-radius: 5px 0px 5px 5px; /*arrondis : haut gauche et bas*/
}
#MenuGC li:hover .align_right { /*attributs du panneau aligné à droite*/
left:auto;
right:-1px; /* Place le panneau au survol */
top:auto;
}
#MenuGC p, #MenuGC h2, #MenuGC h3, #MenuGC ul li { /*attributs des textes*/
font-family:Verdana, "Bitstream Vera Sans", sans-serif; /*police*/
text-align:left; /*alignement*/
/*text-shadow: 1px 1px 1px #FFFFFF;*/ /*ombre portée du texte : ôter les commentaires pour l'afficher*/
}
#MenuGC h2 { /*attributs des titres H2*/
line-height:21px; /*hauteur de ligne*/
font-size:21px; /*taille police*/
font-weight:400; /*gras police*/
letter-spacing:-1px; /*écartement caractères*/
margin:7px 0 7px 0; /*marges extérieures*/
padding-bottom:7px; /*marge intérieure basse*/
border-bottom:1px solid #666666; /*bordure basse*/
}
#MenuGC h3 { /*attributs des titres H3*/
line-height:21px; /*hauteur de ligne*/
font-size:14px; /*taille police*/
color:#FF5809; /*couleur*/
margin:3px 0 7px 0; /*marges extérieures*/
padding-bottom:7px; /*marge intérieure basse*/
border-bottom:1px dotted #FF5809; /*bordure basse*/
}
#MenuGC p { /*attributs des paragraphes*/
line-height:18px; /*hauteur de ligne*/
font-size:12px; /*taille police*/
margin:0 0 10px 0; /*marges extérieures*/
}
#MenuGC li:hover div a { /*attributs des liens dans les panneaux*/
font-size:12px; /*taille police*/
display:inline;
padding:0px; /*marges intérieures*/
margin:0px auto; /*marges extérieures*/
color:#973100; /*couleur*/
}
#MenuGC li:hover div a:hover { /*attributs des liens survolés dans les panneaux*/
color:#073038; /*couleur*/
}
.imgshadow { /*Habillage image : facultatif dans le code*/
background:#FFFFFF; /*couleur de fond*/
padding:4px; /*marges intérieures*/
border:1px solid #777777; /*bordure*/
margin-top:5px; /*marge extérieure haute*/
/*box-shadow:0px 0px 5px #666666;*/ /*ombre portée de la boite : ôter les commentaires pour l'afficher*/
}
.img_left { /*Pour image placée à gauche : facultatif dans le code*/
width:auto; /*largeur auto*/
float:left;
margin:2px 15px 5px 5px; /*marges extérieures*/
}
#MenuGC li .BoiteArrPlan { /*attributs Boite Arriere Plan*/
background-color:#333333; /*couleur de fond*/
color: #eeeeee; /*couleur texte*/
/*text-shadow: 1px 1px 1px #000;*/ /*ombre portée du texte : ôter les commentaires pour l'afficher*/
padding:4px 6px 4px 6px; /*marges intérieures*/
border-radius: 5px; /*arrondis*/
/*box-shadow:inset 0 0 3px #000000;*/ /*ombre portée de la boite : ôter les commentaires pour l'afficher*/
}
#MenuGC li:hover .BoiteArrPlan a { color:#FFA275;}
#MenuGC li:hover .BoiteArrPlan a:hover { color:#88DEF0;} /*variation sur les liens et leur survol pour Boite Arriere Plan*/
#MenuGC li ul { /*attributs listes liens*/
list-style:none;
padding:0; /*marges intérieures*/
margin:0 0 12px 0; /*marges extérieures*/
}
#MenuGC li ul li, #MenuGC li ul li:hover { /*attributs items listes liens*/
line-height:24px; /*hauteur de ligne*/
position:relative;
/*text-shadow: 1px 1px 1px #ffffff;*/ /*ombre portée du texte : ôter les commentaires pour l'afficher*/
background:none; /*pas de fond : IMPORTANT*/
border:none; /*pas de bordure : IMPORTANT*/
padding:0; /*marges intérieures*/
margin:0; /*marges extérieures*/
float:none;
text-align:left; /*alignement*/
}
#MenuGC li .BoiteLien li, #MenuGC li .BoiteLien li:hover { /*attributs BoiteLien (et au survol) dans les panneaux*/
background:#D6D6D6; /*couleur fond*/
border:1px solid #bbbbbb; /*bordure*/
margin:0px 0px 4px 0px; /*marges extérieures*/
padding:0px 6px 0px 6px; /*marges intérieures*/
width:116px; /*largeur*/
border-radius: 5px; /*arrondis*/
}
#MenuGC li .BoiteLien li:hover { /*attributs BoiteLien survolée dans les panneaux*/
background:#F4F4F4; /*couleur fond*/
}
</style>
Ci-dessous le code html complet de ce menu :
<ul id="MenuGC"><!-- MENU Grande Contenance -->
<li><a href="#" class="drop">Accueil</a><!-- Item "Accueil" -->
<div class="MenuGCdropdown_2col"><!-- BASE 2 colonnes -->
<div class="MenuGCTaille_2"><!-- taille 2 colonnes -->
<h2>Bienvenue !</h2>
</div><!-- fin taille 2 colonnes -->
<div class="MenuGCTaille_2"><!-- taille 2 colonnes -->
<p>Voici quelques possibilités du Menu à Grande Contenance.</p>
<p>Ses items sont organisés avec des largeurs et des dispositions différentes.<br />
Les liens présentés sont là pour l'exemple.</p>
</div><!-- fin taille 2 colonnes -->
<div class="MenuGCTaille_2"><!-- taille 2 colonnes -->
<h2>Navigateurs</h2>
</div><!-- fin taille 2 colonnes -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<img alt="" src="img/images/navigateurs.png" style="width: 100%;" />
</div><!-- fin taille 1 colonne --> <div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p>Les navigateurs testés l'affichent correctement !</p>
</div><!-- fin taille 1 colonne -->
</div><!-- fin BASE 2 colonnes -->
</li><!-- fin Item "Accueil" -->
<li><a href="#" class="drop">4 Colonnes</a><!-- Item "4 Colonnes" -->
<div class="MenuGCdropdown_4col"><!-- BASE 4 colonnes -->
<div class="MenuGCTaille_4"><!-- taille 4 colonnes -->
<h2>Exemple de listes de liens</h2>
</div><!-- fin taille 4 colonnes -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>Images libres</h3>
<ul><!-- listeD -->
<li><a href="https://pixabay.com/fr/" target="_blank">Pixabay</a></li>
<li><a href="https://freephotos.cc/fr" target="_blank">Freephotos</a></li>
<li><a href="https://fr.freeimages.com/" target="_blank">Freeimages</a></li>
<li><a href="https://www.stocklib.fr/" target="_blank">Stocklib</a></li>
<li><a href="https://www.stockvault.net/" target="_blank">Stockvault</a></li>
<li><a href="https://www.shutterstock.com/fr/" target="_blank">Shutterstock</a></li>
</ul><!-- fin listeD -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>Polices</h3>
<ul><!-- listeE -->
<li><a href="https://www.dafont.com/fr/" target="_blank">Dafont</a></li>
<li><a href="https://www.fontsquirrel.com/" target="_blank">Fontsquirrel</a></li>
<li><a href="https://fontlibrary.org/fr/homepage" target="_blank">Fontlibrary</a></li>
<li><a href="https://www.fontspace.com/dieter-steffmann" target="_blank">Fontspace</a></li>
<li><a href="https://www.cyreal.org/" target="_blank">Cyreal</a></li>
</ul><!-- fin listeE -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>GIFS animés</h3>
<ul><!-- listeF -->
<li><a href="https://www.gif-anime.org/" target="_blank">gif-animé</a></li>
<li><a href="https://www.dinosoria.com/gifs_animes.htm" target="_blank">Dinosoria</a></li>
<li><a href="https://gifsdomi.com/" target="_blank">Gifsdomi</a></li>
<li><a href="https://www.toutimages.com/cadregifs.htm" target="_blank">Toutimages</a></li>
<li><a href="https://www.icone-gif.com/indexgif.php" target="_blank">Icone-gif</a></li>
<li><a href="https://images.toucharger.com/images/gifs-animes/" target="_blank">Images.toutcharger</a></li>
</ul><!-- fin listeF -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>Texte aléatoire</h3>
<ul><!-- listeG -->
<li><a href="https://www.faux-texte.com/" target="_blank">Faux-texte</a></li>
<li><a href="https://enneagon.org/phrases" target="_blank">Enneagon</a></li>
<li><a href="https://fr.lipsum.com/" target="_blank">Fr.lipsum</a></li>
<li><a href="https://slipsum.com/" target="_blank">S.L.Ipsum</a></li>
<li><a href="https://romainvaleri.online.fr/" target="_blank">RomainValeri</a></li>
</ul><!-- fin listeG -->
</div><!-- fin taille 1 colonne -->
</div><!-- fin BASE 4 colonnes -->
</li><!-- fin Item "4 Colonnes" -->
<li><a href="#" class="drop">3 Colonnes</a><!-- Item "3 Colonnes" -->
<div class="MenuGCdropdown_3col"><!-- BASE 3 colonnes -->
<div class="MenuGCTaille_3"><!-- taille 3 colonnes -->
<h2>Exemple de listes de liens (logiciels)</h2>
</div><!-- fin taille 3 colonnes -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>Images et sons</h3>
<ul class="BoiteLien"><!-- listeA / NB : boite lien -->
<li><a href="https://www.gimp.org/" target="_blank">GIMP</a></li>
<li><a href="https://www.photofiltre-studio.com/pf7.htm" target="_blank">Photofiltre</a></li>
<li><a href="https://www.irfanview.com/" target="_blank">Irfanview</a></li>
<li><a href="https://www.videolan.org/index.fr.html" target="_blank">VLC</a></li>
<li><a href="https://www.audacityteam.org/download/" target="_blank">Audacity</a></li>
<li><a href="https://cdex.mu/" target="_blank">CDex</a></li>
<li><a href="https://www.mp3tag.de/en/" target="_blank">MP3tag</a></li>
</ul><!-- fin listeA -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>Office</h3>
<ul class="BoiteLien"><!-- listeB / NB : boite lien -->
<li><a href="https://www.openoffice.org/fr/Telecharger/" target="_blank">OpenOffice</a></li>
<li><a href="https://fr.libreoffice.org/" target="_blank">LibreOffice</a></li>
<li><a href="https://scribus.fr/" target="_blank">Scribus</a></li>
<li><a href="https://notepad-plus-plus.org/" target="_blank">Notepad++</a></li>
<li><a href="https://www.pdfxchange.fr/" target="_blank">PDF Xchange</a></li>
<li><a href="https://pdfsam.org/fr/downloads/" target="_blank">PDF SAM</a></li>
</ul><!-- fin listeB -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>Utilitaires</h3>
<ul class="BoiteLien"><!-- listeC / NB : boite lien -->
<li><a href="https://www.den4b.com/products/renamer" target="_blank">Renamer</a></li>
<li><a href="https://www.recuva.fr/" target="_blank">Recuva</a></li>
<li><a href="https://neofreeware.free.fr/freeware/synchronizer/synchronizer.htm" target="_blank">Synchronizer</a></li>
<li><a href="https://www.syncback.fr/" target="_blank">SyncBackFree</a></li>
<li><a href="https://www.virtualbox.org/" target="_blank">VirtualBox</a></li>
<li><a href="https://www.ubackup.com/fr/disk-clone-software.html" target="_blank">AOMEI Backup</a></li>
</ul><!-- fin listeC -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_3"><!-- taille 3 colonnes -->
<h2>Exemple de mise en page avec images</h2>
</div><!-- fin taille 3 colonnes -->
<div class="MenuGCTaille_3"><!-- taille 3 colonnes -->
<img alt="" class="img_left imgshadow" src="img/images/LL.jpg" style="width: 20%;" />
<p>La plupart des logiciels présentés ci-dessus sont des logiciels dits "libres" ou "open source". Tous sont gratuits. <a href="https://enacit.epfl.ch/logiciel-libre/" target="_blank">En savoir plus avec un annuaire...</a></p>
<p></p>
<img alt="" class="img_left imgshadow" src="img/images/FW.jpg" style="width: 20%;" />
<p>D'autres, sont des "freewares" : gratuits, certes mais non-libres et non-open source. <a href=https://fr.wikipedia.org/wiki/Freeware" target="_blank">En savoir plus...</a></p>
</div><!-- fin taille 3 colonnes -->
</div><!-- fin BASE 3 colonnes -->
</li><!-- fin Item "3 Colonnes" -->
<!-- Notez le positionnement à droite de ces 2 items suivants de MenuGC -->
<li class="MenuGC_right"><a href="#" class="drop">5 Colonnes</a><!-- Item "5 Colonnes" / NB : à droite -->
<div class="MenuGCdropdown_5col align_right"><!-- BASE 5 colonnes / NB : à droite -->
<div class="MenuGCTaille_5"><!-- taille 5 colonnes -->
<h2>Exemple de mise en page sur 5 colonnes</h2>
</div><!-- fin taille 5 colonnes -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p class="BoiteArrPlan">Boite arrière plan foncé, class=BoiteArrPlan.<br />
Imaginez-vous ce qu'il découvrirait dans la direction opposée !</p>
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p>Aussitôt, elle chancela un peu, madame ; tant de choses naïves et singulières à lire sur mon visage de ce qui allait arriver.</p>
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p><em>Incapable ou criminel, monsieur, c'est : pourquoi l'homme noble n'est pas en état de nous nuire.</em></p>
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p><strong>Apportez-moi de bonnes idées, et des choses visqueuses.</strong></p>
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p>Avouons toutefois qu'avec fidélité ils se battent une seconde, j'en eus honte toute ma vie !<br /><a href="https://enneagon.org/phrases" target="_blank">Texte aléatoire Enneagon</a></p>
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_5"><!-- taille 5 colonnes -->
<h2>Exemple de mise en page sur 5 colonnes (suite)</h2>
</div><!-- fin taille 5 colonnes -->
<div class="MenuGCTaille_3"><!-- taille 3 colonnes -->
<p>Même si on se ment, je sais que, grâce à ma propre vérité le cycle du cosmos dans la vie... c'est une grande roue et je ne cherche pas ici à mettre un point ! Mais ça, c'est uniquement lié au spirit.<br /><a href="https://www.faux-texte.com/" target="_blank">Texte aléatoire Faux-texte... Van Dammesque...</a></p>
<p>Mesdames, messieurs, la prise de conscience de nos dirigeants doit s'intégrer à la finalisation globale d'un rappel des droits fondamentaux de notre pays.<br /><a href="https://www.faux-texte.com/" target="_blank">Texte aléatoire Faux-texte... Langue de bois...</a></p>
</div><!-- fin taille 3 colonnes -->
<div class="MenuGCTaille_2"><!-- taille 2 colonnes -->
<p class="BoiteArrPlan">Boite arrière plan foncé, class=BoiteArrPlan.<br />
Où le zombie préfère-t-il s'extasier sur la vérité ? Nous daignerons aller nous tromper. Ils ont envie de ces tubercules rôtis... Lara Croft se sert de dizaines de lamas. En quel lieu l'énarque terre à terre adore-t-il circuler ?<br /><a href="https://romainvaleri.online.fr/" target="_blank">Texte aléatoire RomainValeri</a></p>
</div><!-- fin taille 2 colonnes -->
</div><!-- fin BASE 5 colonnes / NB : à droite -->
</li><!-- fin Item "5 Colonnes" / NB : à droite -->
<li class="MenuGC_right"><a href="#" class="drop">Classique</a><!-- Item "Classique" / NB : à droite -->
<div class="MenuGCdropdown_1col align_right"><!-- BASE 1 colonne / NB : à droite -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>Sites d'astuces</h3>
<ul><!-- listeH -->
<li><a href="https://css3.bradshawenterprises.com/" target="_blank">Bradshaw</a></li>
<li><a href="https://www.css3create.com/" target="_blank">CSS3Create</a></li>
<li><a href="https://tympanus.net/codrops/category/tutorials/" target="_blank">Tympanus</a></li>
<li><a href="https://www.outils-web.com/" target="_blank">Outils-web</a></li>
<li><a href="https://www.trucsweb.com/tutoriels/" target="_blank">Trucsweb</a></li>
<li><a href="https://www.creativejuiz.fr/blog/" target="_blank">Creativejuiz</a></li>
<li><a href="https://designspartan.com/ressources/ressources-et-tutoriels-transitions-et-animations-en-css3/" target="_blank">Designspartan</a></li>
</ul><!-- fin listeH -->
</div><!-- fin taille 1 colonne -->
</div><!-- fin BASE 1 colonne / NB : à droite -->
</li><!-- fin Item "Classique" / NB : à droite -->
</ul><!-- fin MENU Grande Contenance -->
Ci-dessous le code html simplifié de ce menu afin de n'en montrer que la structure.
<ul id="MenuGC"><!-- MENU Grande Contenance -->
<li><a href="#" class="drop">ITEM1</a><!-- Item "ITEM1" -->
<div class="MenuGCdropdown_2col"><!-- BASE 2 colonnes -->
<div class="MenuGCTaille_2"><!-- taille 2 colonnes -->
<h2>TITRE1A</h2>
</div><!-- fin taille 2 colonnes -->
<div class="MenuGCTaille_2"><!-- taille 2 colonnes -->
<p>Contenu1A</p>
</div><!-- fin taille 2 colonnes -->
<div class="MenuGCTaille_2"><!-- taille 2 colonnes -->
<h2>TITRE1B</h2>
</div><!-- fin taille 2 colonnes -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<img alt="" src="img/images/mon_image1B.png" style="width: 100%;" />
</div><!-- fin taille 1 colonne --> <div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p>Contenu1B</p>
</div><!-- fin taille 1 colonne -->
</div><!-- fin BASE 2 colonnes -->
</li><!-- fin Item "ITEM1" -->
<li><a href="#" class="drop">ITEM2</a><!-- Item "ITEM2" -->
<div class="MenuGCdropdown_4col"><!-- BASE 4 colonnes -->
<div class="MenuGCTaille_4"><!-- taille 4 colonnes -->
<h2>TITRE3</h2>
</div><!-- fin taille 4 colonnes -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>SOUS-TITRE3a</h3>
<ul><!-- liste -->
<li><a href="https://www." target="_blank">lien</a></li>
<li><a href="https://www." target="_blank">lien</a></li>
</ul><!-- fin liste -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>SOUS-TITRE3b</h3>
<ul><!-- liste -->
<li><a href="https://www." target="_blank">lien</a></li>
<li><a href="https://www." target="_blank">lien</a></li>
</ul><!-- fin liste -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>SOUS-TITRE3c</h3>
<ul><!-- liste -->
<li><a href="https://www." target="_blank">lien</a></li>
<li><a href="https://www." target="_blank">lien</a></li>
</ul><!-- fin liste -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>SOUS-TITRE3d</h3>
<ul><!-- liste -->
<li><a href="https://www." target="_blank">lien</a></li>
<li><a href="https://www." target="_blank">lien</a></li>
</ul><!-- fin liste -->
</div><!-- fin taille 1 colonne -->
</div><!-- fin BASE 4 colonnes -->
</li><!-- fin Item "ITEM2" -->
<li><a href="#" class="drop">ITEM3</a><!-- Item "ITEM3" -->
<div class="MenuGCdropdown_3col"><!-- BASE 3 colonnes -->
<div class="MenuGCTaille_3"><!-- taille 3 colonnes -->
<h2>TITRE2A</h2>
</div><!-- fin taille 3 colonnes -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>SOUS-TITRE2a</h3>
<ul class="BoiteLien"><!-- liste / NB : boite lien -->
<li><a href="https://www." target="_blank">lien</a></li>
<li><a href="https://www." target="_blank">lien</a></li>
</ul><!-- fin liste -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>SOUS-TITRE2b</h3>
<ul class="BoiteLien"><!-- liste / NB : boite lien -->
<li><a href="https://www." target="_blank">lien</a></li>
<li><a href="https://www." target="_blank">lien</a></li>
</ul><!-- fin liste -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>SOUS-TITRE2c</h3>
<ul class="BoiteLien"><!-- liste / NB : boite lien -->
<li><a href="https://www." target="_blank">lien</a></li>
<li><a href="https://www." target="_blank">lien</a></li>
</ul><!-- fin liste -->
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_3"><!-- taille 3 colonnes -->
<h2>TITRE2B</h2>
</div><!-- fin taille 3 colonnes -->
<div class="MenuGCTaille_3"><!-- taille 3 colonnes -->
<img alt="" class="img_left imgshadow" src="img/images/mon_image2B1.png" style="width: 20%;" />
<p>Contenu2B1</p>
<p></p>
<img alt="" class="img_left imgshadow" src="img/images/mon_image1B2.png" style="width: 20%;" />
<p>Contenu2B2</p>
</div><!-- fin taille 3 colonnes -->
</div><!-- fin BASE 3 colonnes -->
</li><!-- fin Item "ITEM3" -->
<!-- Notez le positionnement à droite de ces 2 items suivants de MenuGC -->
<li class="MenuGC_right"><a href="#" class="drop">ITEM5</a><!-- Item "ITEM5" / NB : à droite -->
<div class="MenuGCdropdown_5col align_right"><!-- BASE 5 colonnes / NB : à droite -->
<div class="MenuGCTaille_5"><!-- taille 5 colonnes -->
<h2>TITRE5A</h2>
</div><!-- fin taille 5 colonnes -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p class="BoiteArrPlan">Contenu5A1</p>
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p>Contenu5A2</p>
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p><em>Contenu5A3</em></p>
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p><strong>Contenu5A4</strong></p>
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<p>Contenu5A5</p>
</div><!-- fin taille 1 colonne -->
<div class="MenuGCTaille_5"><!-- taille 5 colonnes -->
<h2>TITRE5B</h2>
</div><!-- fin taille 5 colonnes -->
<div class="MenuGCTaille_3"><!-- taille 3 colonnes -->
<p>Contenu5B1</p>
</div><!-- fin taille 3 colonnes -->
<div class="MenuGCTaille_2"><!-- taille 2 colonnes -->
<p class="BoiteArrPlan">Contenu5B2</p>
</div><!-- fin taille 2 colonnes -->
</div><!-- fin BASE 5 colonnes / NB : à droite -->
</li><!-- fin Item "ITEM5" / NB : à droite -->
<li class="MenuGC_right"><a href="#" class="drop">ITEM4</a><!-- Item "ITEM4" / NB : à droite -->
<div class="MenuGCdropdown_1col align_right"><!-- BASE 1 colonne / NB : à droite -->
<div class="MenuGCTaille_1"><!-- taille 1 colonne -->
<h3>TITRE4</h3>
<ul><!-- liste -->
<li><a href="https://www." target="_blank">lien</a></li>
<li><a href="https://www." target="_blank">lien</a></li>
</ul><!-- fin liste -->
</div><!-- fin taille 1 colonne -->
</div><!-- fin BASE 1 colonne / NB : à droite -->
</li><!-- fin Item "ITEM4" / NB : à droite -->
</ul><!-- fin MENU Grande Contenance -->
Le menu doit être entre les balises
<ul id="MenuGC"><!-- MENU Grande Contenance -->
...
</ul><!-- fin MENU Grande Contenance -->
Chaque Item de ce menu, doit être dans un double conteneur précisant la base en "N" colonnes ainsi que son alignement éventuel à droite ( avec <li class="MenuGC_right"> et <div class="MenuGCdropdown_Ncol align_right"> ).
<li><a href="#" class="drop">ITEM</a><!-- Item "ITEM" -->
<div class="MenuGCdropdown_Ncol"><!-- BASE N colonnes -->
...
</div><!-- fin BASE N colonnes -->
</li><!-- fin Item "ITEM" -->
Puis, à l'intérieur, vous pouvez y ranger des zones en précisant leur taille, dans lesquelles vous placerez des titres, des sous-titres, des paragraphes, des listes... Évidemment, vous ne pourrez pas placer de front, 4 listes de Taille_1 (colonne) dans une BASE de 3 colonnes...
Les Items sont déclarés de gauche à droite pour ceux qui sont alignés à gauche et ensuite, de droite à gauche pour ceux qui sont alignés à droite.
Il est tout à fait possible d'utiliser l'éditeur de GuppY pour remplir les listes, les paragraphes, les titres, importer les images.... etc...
Pour placer un tel menu (comme, par exemple en haut de ce site), il faut le placer dans une boite libre nommée par exemple §menuGC. Il peut être fixé en haut en le précisant dans l'admin de GuppY. (Pour un autre CMS, il faut ajouter une règle supplémentaire dans #menuGC : position:fixed,)
et placer au moins ceci dans votre fichier styleplus.css (avec votre n° de boite libre)
.tblbox.FB888 { /* Corps boite menuGC */
background: transparent;
border: none;
}
Amusez-vous bien...
Me contacter sur le forum de ce site pour toute question ou aide pour mettre en place ce type de menu.
Catégorie : - Changements au survol
Page lue 79395 fois
