Autres astuces en CSS - Un menu Grande Contenance

→ Un menu "grande contenance" uniquement en CSS.

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, fixé en haut dans la partie démos de ce site. Il est à réserver absolument à un affichage sur ordinateur ou tablette : il n'est pas "responsive design" et son affichage ne serait pas correct sur un smartphone.

De plus, allez... avouons-le... j'aime bien ce procédé, mais il n'est pas évident à régler... et même, une fois réglé, le code du contenu n'est pas forcément facile à retrouver... même si, le contenu des différents Items est accessible directement dans l'éditeur de adHoc.

Cet exemple, dont le code est détaillé et commenté le plus possible, a une première partie [style type="text/css"]...[/style] à mettre au début du code source de la page ou de la boîte encadrée de ces balises, ou bien tel quel, dans un fichier spécifique comme c'est le cas ici (nommé CSS_menu_grande_contenance.css) dont l'appel au début du code source est le suivant : 


    <link charset="utf-8" href="skin/css/CSS_menu_grande_contenance.css" rel="stylesheet" />    


#MenuGC { /*attributs du bandeau*/
	position:relative; /*mettre fixed pour fixer*/
	top:5px; /* position en haut */
	left:1%; /* position à gauche */
	z-index:9000; /*index haut pour superposer au reste de la page : IMPORTANT s'il est fixé*/
	list-style:none;
	width:98%; /*largeur du bandeau*/
	margin: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*/
}
#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: #797979; /*couleur de fond de l'item survolé si dégradé non fonctionnel ou pour simplifier*/
	background: linear-gradient(to bottom, #8A8A8A, #797979); /*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;
}
#MenuGC li:hover a { /*attributs des liens des items du bandeau au survol*/
	color:#161616; /*couleur*/
}
#MenuGC li .drop::after { /*attributs du caractère drop*/
	padding-left:10px; /*marge intérieure gauche*/
	font-family:'FontAwesome';
	font-weight:bold;
	content:'\f078';
	/*content:'▼';*/
	color:rgba(50, 50, 50, 0.7);
}

.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 s'il est fixé*/
	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:#797979; /*couleur de fond du panneau si dégradé non fonctionnel ou pour simplifier*/
	background: linear-gradient(to bottom, #797979, #000000); /*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-indent:0; /*indentation à 0*/
}
#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:#c0c0c0; /*couleur*/
	margin:3px 0 7px 0; /*marges extérieures*/
	padding-bottom:7px; /*marge intérieure basse*/
	border-bottom:1px dotted #c0c0c0; /*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:#FF9900; /*couleur*/
}
#MenuGC li:hover div a:hover { /*attributs des liens survolés dans les panneaux*/
	color:#FF3300; /*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*/
}
.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:#C0C0C0; /*couleur de fond*/
	color: #222222; /*couleur texte*/
	padding:4px 6px 4px 6px; /*marges intérieures*/
	border-radius: 5px; /*arrondis*/
}

#MenuGC li:hover .BoiteArrPlan a { color:#0000FF;}
#MenuGC li:hover .BoiteArrPlan a:hover { color:#008000;} /*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;
	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:#5D5D5D; /*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:#868686; /*couleur fond*/
}

Notez que dans l'exemple, une police de caractère (Font Awesome : https://fontawesome.com/ ) est présente pour les "chevrons" des items de menu. Si vous souhaitez la déclarer pour votre site, veuillez poster sur le forum, afin que je vous en indique la procédure. Mais il est possible d'utiliser plus simplement des caractères "standards". Pour cela utilisez cette partie de style à la place :


#MenuGC li .drop::after { /*attributs du caractère drop*/
	padding-left:10px; /*marge intérieure gauche*/
	font-weight:bold;
	content:'▼';
	color:rgba(50, 50, 50, 0.7);
}

Puis ci-dessous le code de cet exemple, à adapter, afin de placer ce menu dans votre boîte.


<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="images/tutoriels/GC/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="images/tutoriels/GC/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>

<img alt="" class="img_left imgshadow" src="images/tutoriels/GC/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">"BoiteArrPlan" :<br />
une classe particulière... pour créer un paragraphe un peu différent.</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="http://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, 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="http://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 -->

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, le titre de l'Item, la base en "N" colonnes ainsi que son alignement éventuel à droite


 <li><a href="#" class="drop">MON ITEM</a><!-- Item "MON ITEM" -->
<div class="MenuGCdropdown_Ncol"><!-- BASE N COLONNES -->
...
</div><!-- fin BASE N COLONNES -->
</li><!-- fin Item "MON ITEM" -->

<!-- et ci-dessous à droite -->

 <li class="MenuGC_right"><a href="#" class="drop">MON ITEM</a><!-- Item "MON ITEM"  / NB : à droite -->
<div class="MenuGCdropdown_Ncol align_right"><!-- BASE N COLONNES / NB : à droite -->
...
</div><!-- fin BASE N COLONNES / NB : à droite -->
</li><!-- fin Item "MON ITEM" / NB : à droite -->

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... comme ci-dessous... Inspirez-vous du code du menu de ce tutoriel, les possibilités sont très nombreuses. Mais, évidemment, vous ne pourrez pas placer de front, 4 listes de Taille_1 (colonne) dans une BASE de 3 colonnes...


<div class="MenuGCTaille_N"><!-- taille N colonnes -->
<h2>Un titre</h2>
</div><!-- fin taille N colonnes -->

<div class="MenuGCTaille_N"><!-- taille N colonnes -->
<h3>Un sous-titre</h3>
<p>Du texte...</p>
<ul><!-- liste -->
 <li>élément</li>
...
 <li>élément</li>
</ul><!-- fin liste -->
</div><!-- fin taille N 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.

Rappel : Il est tout à fait possible d'utiliser l'éditeur de adHoc pour remplir les listes, les paragraphes, les titres, importer les images.... etc...

→ Astuce pour ne pas afficher la boîte qui contient ces boutons en affichage mobile :

Imaginons que vous ayez déclaré cette boîte seule (donc forcément en position 0), dans la section horizontale UpTab1 de la page _index. Il faut éditer votre feuille de style style.css et dans une des deux parties (à votre choix) :

@media screen and (max-width: 900px) {...}

@media screen and (max-width: 480px) {...}

Vous ajoutez cette règle :

#UpTab1-0 {display:none;} /*ne pas afficher la boite menu grande contenance en mobile*/

NB : Si vous souhaitez que ce menu soit en Web sur la page _index ET sur la page _default, il faut bien sûr que la section horizontale concernée Up Tab1 soit déclarée dans les fichiers _index.inc et _default.inc de votre skin.

Si vous fixez cette boîte en haut de votre page, il sera sans doute nécessaire de prévoir une marge haute suffisante pour le header : Par exemple, dans la partie démos de ce site, il y a, dans le fichier style.css : 


/* header */
#header {margin-top:40px;}

Pour plus d'information sur cette mise en place, me contacter ou poster sur le forum.



Index |Info | Imprimer | Permalien

Les 10 derniers articles

adHoc

Module Formulaire

adHoc

Module Message

Carousels

Slideshow de textes (quote slideshow)

adHoc

Module Derniers

adHoc

Module Hasard

adHoc

Module Tri Index

adHoc

Module de Nouvelles-Blog

adHoc

Module de Téléchargements

adHoc

Module de Liens

adHoc

Fork et Extraction de boîte

Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels