Le menu de navigation à niveaux multiple vous aidera à bien organiser les catégories et les liens importants de votre blog. Ainsi, il permettra à vos lecteurs de naviguer facilement à travers le blog et le déplacement entre les différentes rubriques devient plus confort.
Comment Ajouter Un Menu Horizontal Déroulant à Blogger
Allez à "Mise En Page" et juste en dessous de l'entête de votre blog, cliquez sur "Ajouter Un Gadget".
Voici le code du menu à insérer :
<script src='http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js'
type='text/javascript'></script>
<style>
/* ######### Menu Horizontal Déroulant TheBlogueur.blogspot.com ######### */
/* ######### Menu Horizontal Déroulant à Multiple Niveaux ######### */
.ddsubmenustyle, .ddsubmenustyle div {
/*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul {
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a {
display: block;
width: 170px;
/*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li {
/*IE6 CSS hack*/
display: inline-block;
width: 170px;
/*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover {
background-color: black;
color: white;
}
.downarrowpointer {
/*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer {
/*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim {
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}
.mattblackmenu li {
display: inline;
margin: 0;
}
.mattblackmenu li a {
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px;
/*padding inside each tab*/
border-right: 1px solid white;
/*right divider between tabs*/
color: white;
background: #414141;
}
.mattblackmenu li a:visited {
color: white;
}
.mattblackmenu li a:hover {
background: black;
/*background of tabs for hover state */
}
.mattblackmenu a.selected {
background: black;
/*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li>
<a href="#">LINK1</a>
</li>
<li>
<a href="#" rel="ddsubmenu1">LINK2</a>
</li>
<li>
<a href="#" rel="ddsubmenu2">LINK3</a>
</li>
<li>
<a href="#">Link4</a>
</li>
<li>
<a href="#" rel="ddsubmenu3">LINK5</a>
</li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar| sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li>
<a href='#'>LINK2 ITEM 1</a>
</li>
<li>
<a href='#'>LINK2 ITEM 2</a>
<ul>
<li>
<a href='#'>LINK2 ITEM 2.1</a>
</li>
<li>
<a href='#'>LINK2 ITEM 2.2</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK2 ITEM 3</a>
<ul>
<li>
<a href='#'>LINK2 ITEM 3.1</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK2 ITEM 4</a>
</li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li>
<a href='#'>LINK3 ITEM 1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 2</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3</a>
<ul>
<li>
<a href='#'>LINK3 ITEM 3.1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.2</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.3</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.4</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK3 ITEM 4</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5</a>
<ul>
<li>
<a href='#'>LINK3 ITEM 5.1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5.2</a>
<ul>
<li>
&n bsp; <a href='#'>LINK3 ITEM 5.2 1</a>
</li>
<li>
&n bsp; <a href='#'>LINK3 ITEM 5.2 2</a>
</li>
<li>
&n bsp; <a href='#'>LINK3 ITEM 5.2 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>LINK3 ITEM 6</a>
</li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li>
<a href='#'>LINK5 ITEM 1</a>
</li>
<li>
<a href='#'>LINK5 ITEM 2</a>
</li>
<li>
<a href='#'>LINK5 ITEM 3</a>
</li>
<li>
<a href='#'>LINK5 ITEM 4</a>
</li>
<li>
<a href='#'>LINK5 ITEM 5</a>
</li>
</ul>
type='text/javascript'></script>
<style>
/* ######### Menu Horizontal Déroulant TheBlogueur.blogspot.com ######### */
/* ######### Menu Horizontal Déroulant à Multiple Niveaux ######### */
.ddsubmenustyle, .ddsubmenustyle div {
/*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul {
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a {
display: block;
width: 170px;
/*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li {
/*IE6 CSS hack*/
display: inline-block;
width: 170px;
/*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover {
background-color: black;
color: white;
}
.downarrowpointer {
/*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer {
/*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim {
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}
.mattblackmenu li {
display: inline;
margin: 0;
}
.mattblackmenu li a {
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px;
/*padding inside each tab*/
border-right: 1px solid white;
/*right divider between tabs*/
color: white;
background: #414141;
}
.mattblackmenu li a:visited {
color: white;
}
.mattblackmenu li a:hover {
background: black;
/*background of tabs for hover state */
}
.mattblackmenu a.selected {
background: black;
/*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li>
<a href="#">LINK1</a>
</li>
<li>
<a href="#" rel="ddsubmenu1">LINK2</a>
</li>
<li>
<a href="#" rel="ddsubmenu2">LINK3</a>
</li>
<li>
<a href="#">Link4</a>
</li>
<li>
<a href="#" rel="ddsubmenu3">LINK5</a>
</li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar| sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li>
<a href='#'>LINK2 ITEM 1</a>
</li>
<li>
<a href='#'>LINK2 ITEM 2</a>
<ul>
<li>
<a href='#'>LINK2 ITEM 2.1</a>
</li>
<li>
<a href='#'>LINK2 ITEM 2.2</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK2 ITEM 3</a>
<ul>
<li>
<a href='#'>LINK2 ITEM 3.1</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK2 ITEM 4</a>
</li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li>
<a href='#'>LINK3 ITEM 1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 2</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3</a>
<ul>
<li>
<a href='#'>LINK3 ITEM 3.1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.2</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.3</a>
</li>
<li>
<a href='#'>LINK3 ITEM 3.4</a>
</li>
</ul>
</li>
<li>
<a href='#'>LINK3 ITEM 4</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5</a>
<ul>
<li>
<a href='#'>LINK3 ITEM 5.1</a>
</li>
<li>
<a href='#'>LINK3 ITEM 5.2</a>
<ul>
<li>
&n bsp; <a href='#'>LINK3 ITEM 5.2 1</a>
</li>
<li>
&n bsp; <a href='#'>LINK3 ITEM 5.2 2</a>
</li>
<li>
&n bsp; <a href='#'>LINK3 ITEM 5.2 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>LINK3 ITEM 6</a>
</li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li>
<a href='#'>LINK5 ITEM 1</a>
</li>
<li>
<a href='#'>LINK5 ITEM 2</a>
</li>
<li>
<a href='#'>LINK5 ITEM 3</a>
</li>
<li>
<a href='#'>LINK5 ITEM 4</a>
</li>
<li>
<a href='#'>LINK5 ITEM 5</a>
</li>
</ul>
Comment Personnaliser Le Menu De Navigation
- Pour changer la couleur du fond, il suffit de changer background: #414141;
- Remplacez toutes les signes # avec votre propres liens.
- Remplacez LINKS x et Item x avec les titres des liens.
- Pour créer un sous-menu à l'intérieur d'un menu il suffit de lui ajouter l'attribut "rel" comme indiqué dans le code ci-dessus : rel="ddsubmenu1" et changez le nombre du menu en conséquence.
<a href="http://Nom-De-Votre-Blog.blogspot.com/search/label/Nom-De-Libellé">Titre-De-L'URL</a>
Par défaut, les libellés Blogger affiche 20 articles par page.Utilisez alors l'URL ci-dessous pour afficher le nombre d'articles que vous voulez:
<a href='http://Nom-De-Votre-Blog.blogspot.com/search/label/Nom-De- Libellé?&max-results=X'>Titre-De- L'URL</a>
X: le nombre d'articles à afficher.
Des problèmes ? des questions à propos de ce tutoriel ?
Vous pouvez me contacter via les commentaires.
Télécharger 
Articles
