Système d'onglets pour vos forums avec ajout d'un menu à la navbar
Page 1 sur 1•Partagez
- Splash
StaffAdmin - Code:
<div id="menu">
<div id="active" class="menu">
<a href="url page 1">Titre de l'onglet</a>
</div>
<div class="menu">
<a href="url page 2">Titre de l'onglet</a>
</div>
<div class="menu">
<a href="url page 3">Titre de l'onglet</a>
</div>
<div class="menu">
<a href="url page 4">Titre de l'onglet</a>
</div>
</div>- Code:
</div>
- Code:
<div class="menu">
<a href="url page">Titre de l'onglet</a>
</div>- Code:
/* onglets catégories */
*{
margin:0;
padding:0;
}
#menu{
float:left;
background:#e7474e;
margin:0 auto;
height:50px;
}
.menu{
float:left;
width:100px;
height:45px;
text-align:center;
}
.menu a{
display:block;
height:30px;
padding-top:15px;
}
.menu a:link, .menu a:visited{
text-decoration:none;
color: #000000;
font-family:verdana, sans-serif;
font-size:12px;
background:#abc url(fond.jpg) 0 -45px;
}
.menu#activ a:link, .menu#activ a:visited{
background:#abc url(fond.jpg);
color: #000000;
}
.menu a:hover, .menu a:active, .menu a:focus{
background:#abc url(fond.jpg) 0 -90px;
color: #339933;
}
.menu#activ a:hover, .menu #activ a:active, .menu#activ a:focus{
background:#abc url(fond.jpg);
color: #339933;
}
/* fin des onglets */- Code:
https://caforum.forumactif.com/h1-caforum
- Code:
/h1-caforum
![Splash](https://2img.net/u/4012/75/45/07/avatars/1-77.gif)
Hi,
Une petite astuce pour ajouter des onglets
Création d'une page HTML
Panneau d'administration / Modules / HTML et JAVASCRIPT / Gestion des pages HTML
Sélectionnez
Nommez cette page et pensez à cocher OUI pour Utiliser le haut et le bas de page :
![Système d'onglets pour vos forums avec ajout d'un menu à la navbar Sans_t16](https://i.servimg.com/u/f90/19/89/22/92/sans_t16.jpg)
Ensuite collez ceci dans le corps de la page :
Ajouter à ce code autant de pages que vous le voulez en rajoutant cette partie :
Juste avant la dernière balise :
Ajoutez ceci :
Pensez à
Direction la CSS
Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS
Ajoutez ce code :
Pensez à![Valider 2](/users/4012/75/45/07/smiles/3522799283.png)
Récupérer le lien url de la page HTML
Pour pouvoir utiliser cette page il faut récupérer son url
Retournez dans la Gestion des pages HTML et cliquez sur
pour la page concernée
![Système d'onglets pour vos forums avec ajout d'un menu à la navbar Oeil_t11](https://i.servimg.com/u/f90/19/89/22/92/oeil_t11.jpg)
Cela visualisera votre nouvelle page
![Système d'onglets pour vos forums avec ajout d'un menu à la navbar Sans_t17](https://i.servimg.com/u/f90/19/89/22/92/sans_t17.jpg)
Copier le lien qui se trouve dans la barre d'adresse de votre navigateur, par exemple :
Ajouter le lien à la navbar
Panneau d'administration / Affichage / Page d'accueil / En-tête & Navigation
Cliquez sur
Aux parties Menu et Texte renseignez le nom de ce nouveau menu
À la partie url de redirection copier le lien de la page sous cette forme :
Sélectionnez les permissions
Ensuite
Ce nouveau menu sera placé en bas de page
![Système d'onglets pour vos forums avec ajout d'un menu à la navbar Sans_t18](https://i.servimg.com/u/f90/19/89/22/92/sans_t18.jpg)
Avec l'aide des flèches
et
positionnez le où vous le voulez sur la navbar
À bientôt
:
:
Une petite astuce pour ajouter des onglets
Création d'une page HTML
Panneau d'administration / Modules / HTML et JAVASCRIPT / Gestion des pages HTML
Sélectionnez
![HTML](/users/4012/75/45/07/smiles/2813518732.png)
Nommez cette page et pensez à cocher OUI pour Utiliser le haut et le bas de page :
![Système d'onglets pour vos forums avec ajout d'un menu à la navbar Sans_t16](https://i.servimg.com/u/f90/19/89/22/92/sans_t16.jpg)
Ensuite collez ceci dans le corps de la page :
Ajouter à ce code autant de pages que vous le voulez en rajoutant cette partie :
Juste avant la dernière balise :
Ajoutez ceci :
Pensez à
![Valider 2](/users/4012/75/45/07/smiles/3522799283.png)
Direction la CSS
Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS
Ajoutez ce code :
Pensez à
![Valider 2](/users/4012/75/45/07/smiles/3522799283.png)
Récupérer le lien url de la page HTML
Pour pouvoir utiliser cette page il faut récupérer son url
Retournez dans la Gestion des pages HTML et cliquez sur
![Oeil](/users/4012/75/45/07/smiles/4190409755.png)
![Système d'onglets pour vos forums avec ajout d'un menu à la navbar Oeil_t11](https://i.servimg.com/u/f90/19/89/22/92/oeil_t11.jpg)
Cela visualisera votre nouvelle page
![Système d'onglets pour vos forums avec ajout d'un menu à la navbar Sans_t17](https://i.servimg.com/u/f90/19/89/22/92/sans_t17.jpg)
Copier le lien qui se trouve dans la barre d'adresse de votre navigateur, par exemple :
Ajouter le lien à la navbar
Panneau d'administration / Affichage / Page d'accueil / En-tête & Navigation
Cliquez sur
![Menu personnalisé](/users/4012/75/45/07/smiles/2039808464.png)
Aux parties Menu et Texte renseignez le nom de ce nouveau menu
À la partie url de redirection copier le lien de la page sous cette forme :
Sélectionnez les permissions
Ensuite
![Enregistrer](/users/4012/75/45/07/smiles/1051231705.png)
Ce nouveau menu sera placé en bas de page
![Système d'onglets pour vos forums avec ajout d'un menu à la navbar Sans_t18](https://i.servimg.com/u/f90/19/89/22/92/sans_t18.jpg)
Avec l'aide des flèches
![Haut](/users/4012/75/45/07/smiles/3555606493.png)
![Bas](/users/4012/75/45/07/smiles/1500401692.png)
:u1: |
:
![Bye](/users/4012/75/45/07/smiles/2915189421.gif)
Sujets les plus actifs
Sujets les plus vus
Meilleurs posteurs
» » Bouton MP "Répondre" adapté à la version ModernBB
» » Réduire la hauteur des catégories
» » [AwesomeBB] Ajout d'un bloc de connexion/enregistrement en bas de page
» » Afficher les avatars en forme rectangulaire
» » Modifier la partie des stats en début de qeel
» » Mettre une image au qeel
» » Rendre l'image du header cliquable
» » Elargir le cadre de la boite de smileys
» » [phpBB3] Flèches Haut et Bas qui s'adaptent à la couleur du thème
» » Catégories rétractables sur l'index
» » [phpBB3] Catégories de différentes couleurs
» » [phpBB3] Ajout d'un bloc de connexion/enregistrement en bas de page
» » Centrer l'avatar, le pseudo & le rang dans les messages
» » Modifier l'icône "On-line"