28112 sujets

CSS et mise en forme, CSS3

Menu Horizontale Déroulant

Bonjour,

Voilà, j'ai créer mon menu horizontale déroulant en css. Jusque là ça va j'ai aucun problème.

Le résultat que je désire obtenir est qu'un lien inactif à son image grisée :

http://forum.blackeyes.fr/Themes/Azumanga/images/site.gif
ou
http://forum.blackeyes.fr/Themes/Azumanga/images/memberlist.gif

Quan on passe sur le lien, le texte change de couleur ainsi que l'image de fond.

http://forum.blackeyes.fr/Themes/Azumanga/images/site_active.gif
ou
http://forum.blackeyes.fr/Themes/Azumanga/images/memberlist_active.gif

Jusque là j'y arrive sans soucis. Sauf quand le lien est actif donc sur la page je veux garder l'image "site_active.gif".

Et je désire faire cela pour 10 liens différents.

Voici le code css du menu :

/* Début Positionnement Bloc User, Avatar */

/* Début Menu Forum */

#menu_position
{
   position: relative;
   width: 1100px;
   height: 31px;
   margin: auto;
}

#menu
{
   position: absolute;
   width: 1100px;
   margin: 0;
   z-index: 3;
}

#menu li
{
   float: left;
   width: 100px;
   margin-top: 5px;
   margin-right: 5px;
   font-family: Tahoma, sans-serif;
   list-style-type: none;
   font-size: 10px;
   color: #FFFFFF;
   text-align: left;
   text-transform: uppercase;
   vertical-align: top;
   border: 1px solid black;
}

#menu a, #menu a:link, #menu a:visited
{
   display: block;
   height: 20px;
   padding-left: 8px;
   padding-top: 4px;
   padding-bottom: -5px;
   color: #FFFFFF;
   text-decoration: none;
}

#menu a:hover, #menu a:active, #menu a:focus
{  
   color: #4063af;
   background: url(images/site_active.gif) no-repeat;
}

#menu #admin_active a /* caractéristiques du menu actif */
{  
   color: #4063af;
   background: url(images/site_active.gif);
}

#menu #member
{
   background: url(images/memberlist.gif) no-repeat left top;
}

#menu #member_active a
{
   background: url(images/memberlist_active.gif) no-repeat left top;
}

/* Début Sous Menu */

#menu .sousMenu
{
   display: none;
   margin: 0;
   padding: 0;
   font-family: Tahoma;
   font-size: xx-small;
   color: #FFFFFF;
   margin-top: 12px;
}

#menu .sousMenu li
{
   float: none;
   display: block;
   margin: 0;
   padding: 0;
   border: 0;
   width: auto;
   border-top: 1px solid transparent;
   border-right: 1px solid transparent;
   font-size: x-small;
   font-family: Tahoma;
   font-weight: bold;
}

#menu .sousMenu li a:link, #menu .sousMenu li a:visited
{
   display: block;
   color: #FFFFFF;
   margin: 0;
   border: 0;
   text-decoration: none;
}

#menu .sousMenu li a:hover
{
   /*background-image: none;
   background-color: #B9D0F2;*/
}

#menu li:hover > .sousMenu { display: block; }

/* Fin Sous Menu */
/* Fin Menu Forum */


Le code php ou se trouve le menu :

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   // Work out where we currently are.
   $current_action = 'home';
   if (in_array($context['current_action'], array('admin', 'ban', 'boardrecount', 'cleanperms', 'detailedversion', 'dumpdb', 'featuresettings', 'featuresettings2', 'findmember', 'maintain', 'manageattachments', 'manageboards', 'managecalendar', 'managesearch', 'membergroups', 'modlog', 'news', 'optimizetables', 'packageget', 'packages', 'permissions', 'pgdownload', 'postsettings', 'regcenter', 'repairboards', 'reports', 'serversettings', 'serversettings2', 'smileys', 'viewErrorLog', 'viewmembers')))
      $current_action = 'admin';
   if (in_array($context['current_action'], array('search', 'admin', 'calendar', 'profile', 'mlist', 'register', 'login', 'help', 'pm')))
      $current_action = $context['current_action'];
   if ($context['current_action'] == 'search2')
      $current_action = 'search';
   if ($context['current_action'] == 'theme')
      $current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' ? 'profile' : 'admin';

echo '
   <div id="menu_position">
      <ul id="menu">
         <li class="site"><a href="http://www.blackeyes.fr/v2/">Site</a></li>';

         // Show the [home] button.
         echo '<li><a href="', $scripturl, '">' , $txt[103] , '</a></li>';

         // Show the [help] button.
         echo '<li id="admin_active"><a href="', $scripturl, '?action=help">' , $txt[119] , '</a>';

         // How about the [search] button?
         if ($context['allow_search'])
         echo '<li><a href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';

         // Is the user allowed to administrate at all? ([admin])
         if ($context['allow_admin'])
         echo '<li id="admin_active"><a href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';

         // the [member] list button
         if ($context['allow_memberlist'])
         echo '<li><a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';
         
         // The [calendar]!
         if ($context['allow_calendar'])
         echo '<li><a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';

         // the [SMF Gallery] button
         if ($context['allow_smfgallery_view'])
         echo '<li><a href="', $scripturl, '?action=gallery">' , $txt['smfgallery_menu']  , '</a></li>';

         // If the user is a guest, show [login] button.
         if ($context['user']['is_guest'])
         echo '<li><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';

         // If the user is a guest, also show [register] button.
         if ($context['user']['is_guest'])
         echo '<li><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';

         // Otherwise, they might want to [logout]...
         if ($context['user']['is_logged'])
         echo '<li><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';

         echo '
         <li>Profil
            <ul class="sousMenu">';

               // Edit Profile... [profile]
               if ($context['allow_edit_profile'])
               echo '<li><a href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';
               echo '<li><a href="', $scripturl, '?action=profile;u=', $context['user']['id'], ';sa=account">Parametre profil</a></li>';
               echo '<li><a href="', $scripturl, '?action=profile;u=', $context['user']['id'], ';sa=theme">Affichage & Disposition</a></li>';
            echo '
            </ul>
         </li>
      </ul>
   </div>';

}


Si je met un id actif dans un li dans le code php, j'ai automatiquement un bouton actif quelque soit la page. Comment y remedier ?
Pour répondre à une partie de ta question , il me semble que tu ne t'y prends pas de la bonne manière. Si je comprends bien tu veux que ton bouton rsste "allumé" quand tu es sur la page qui correspond au bouton ( genre contact allumé quand on est sur la page contact ).

Si c'est ca , l'ideal est t'arribuer un ID (mettons contact) a la balise BODY , un autre id a ton lien ( mettons contact_lien ) et de faire le CSS suivant

body#contact a#contact_lien {
ton code
}


Ainsi ton lien s'allumera uniquement dans le cas ou tu es sur ta page contact.
Bonsoir RoseGrenouille,

Oui c'est tout à fait ce que je désire. Mais sans oublié que chaque lien à son image grisé quand le lien n'est pas non "actif".

Prenons par exemple la pages membres :

Lien non actif on affiche :

http://forum.blackeyes.fr/Themes/Azumanga/images/memberlist.gif

avec le texte de couleur blanche.

Déja là, il me faut le bon css et la bon code à insérer car pour les autres liens l'image grisé est différente.

Bon je vais déja faire pour l'actif et voire ce que ça donne.

Edit :

Voici le code pour la partie concerné que je prend comme example :

#menu #member
{
   background: url(images/memberlist.gif) no-repeat left top;
}

#menu a#member_active
{
   background: url(images/memberlist_active.gif) no-repeat left top;
}


Le id="member_active" je le place ou dans le code html ? Bien dans la balise <a href= ......> du lien Membres ?

Et pour le id member avec l'image grisé je le place ou l'idée ou la class ?
Modifié par Squall (27 Mar 2007 - 20:38)
Bon, j'ai bien avancé sur mon menu.

Pour chaque bouton inactif, j'ai réussi à afficher l'image correspondante. Pour l'hover, j'arrive bien à ce que je désire. mais quand je clique sur un lien je n'arrive pas à garder l'effet hover. Il revient avec le style inactif.

Voici le code commun à chaque bouton :


#menu
{
   position: relative;
   width: 1100px;
   height: 60px;
   margin: auto;
}

#menu ul
{
   position: absolute;
   width: 1100px;
   margin:0;
   padding:0;
   list-style:none;
   z-index: 3:
}

#menu li
{
   float: left;
   width: 100px;
   margin-top: 5px;
   margin-right: 5px;
   font-family: Tahoma, sans-serif;
   list-style-type: none;
   font-size: 10px;
   color: #FFFFFF;
   /*text-align: left;*/
   text-transform: uppercase;
   border: 1px solid black;
}

#menu a, #menu a:link, #menu a:visited
{
   display: block;
   height: 15px;
   padding-left: 8px;
   padding-top: 45px;
   color: #FFFFFF;
}


Voici le code pour afficher les images lorsque le bouton n'est pas actif :

#nav_site /* caractéristiques du menu non actif */
{  
   background: url(images/site.gif) no-repeat left bottom;
}

#nav_membres
{
   background: url(images/memberlist.gif) no-repeat left bottom;
}

Voici le code pour l'hover qui est le meme pour le lien actif- page en cours

#nav_site a:active, #nav_site a:hover /* caractéristiques du menu au survol et page en cours */
{  
   color: #4063af;
   background: url(images/site_active.gif) no-repeat left bottom;
}

#nav_membres a:active, #nav_membres a:hover
{
   color: #4063af;
   background: url(images/memberlist_active.gif) no-repeat left bottom;
}


Voici le code html et php qui est bon et ne doit plus bouger pour le style :

echo '
   <div id="menu">
      <ul>
         <li id="nav_site"><a href="http://www.blackeyes.fr/v2/">Site</a></li>';

         // Show the [home] button.
         echo '<li id="nav_home"><a href="', $scripturl, '">' , $txt[103] , '</a></li>';

         // Show the [help] button.
         echo '<li id="nav_help"><a href="', $scripturl, '?action=help">' , $txt[119] , '</a>';

         // How about the [search] button?
         if ($context['allow_search'])
         echo '<li id="nav_search"><a href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';

         // Is the user allowed to administrate at all? ([admin])
         if ($context['allow_admin'])
         echo '<li id="nav_admin"><a href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';

         // the [member] list button
         if ($context['allow_memberlist'])
         echo '<li id="nav_membres"><a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';
         
         // The [calendar]!
         if ($context['allow_calendar'])
         echo '<li id="nav_calendar"><a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';

         // the [SMF Gallery] button
         if ($context['allow_smfgallery_view'])
         echo '<li id="nav_gallery"><a href="', $scripturl, '?action=gallery">' , $txt['smfgallery_menu']  , '</a></li>';

         // If the user is a guest, show [login] button.
         if ($context['user']['is_guest'])
         echo '<li id="nav_login"><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';

         // If the user is a guest, also show [register] button.
         if ($context['user']['is_guest'])
         echo '<li id="nav_register"><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';

         // Otherwise, they might want to [logout]...
         if ($context['user']['is_logged'])
         echo '<li id="nav_login"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';

         echo '
         <li id="nav_profil">Profil
            <ul class="sousMenu">';

               // Edit Profile... [profile]
               if ($context['allow_edit_profile'])
               echo '<li><a href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';
               echo '<li><a href="', $scripturl, '?action=profile;u=', $context['user']['id'], ';sa=account">Parametre profil</a></li>';
               echo '<li><a href="', $scripturl, '?action=profile;u=', $context['user']['id'], ';sa=theme">Affichage & Disposition</a></li>';
            echo '
            </ul>
         </li>
      </ul>
   </div>';


Donc me reste plus qu'a trouver pourquoi lorsque je clique sur membres le lien actif ne s'affiche pas.

Toute aide est la bienvenue.

Je me suis inspiré de ce tutoriel : http://www.ultra-fluide.com/ressources/css/menu-onglets-rollover.htm
Salut,

Avec un poil de php ça doit le faire si tu l'utilises déjà par exemple pour inclure ton menu?
Salut ghost, oui je l'uitilise déjà. En faite le menu fait partie d'une fonction template menu.

Je travaille sur un thème pour un forum smf.

En php, je devrais tester quelles variables ?

Voire 1er post pour la fonction complete.
Ben, en gros:
avant l'include de ton menu, tu déclares les variables (tu peux le faire dans un include)

<php
$page1_actif = '';/* là tu "vides" toutes tes variables */
$page2_actif = '';
$page3_actif = '';
$page4_actif = '';

$page4_actif = 'style=".classe_active"';/* ca c'est la page active, on affecte le style à la page active*/

include('menu.php');


les items de ton menu:

<a href="#" <?php echo $page1_actif;?>><page 1></a>
<a href="#" <?php echo $page2_actif;?>><page 2></a>
<a href="#" <?php echo $page3_actif;?>><page 3></a>
<a href="#" <?php echo $page4_actif;?>><page 4></a>
<!-- page inactive : variable vide donc pas de style, pour la page 4 on applique le style-->


en ayant pris soin de déclarer dans ta css une class actif avec ce que tu veux (la même que la class hover en général)

Je ne sais pas si j'ai été bien clair Smiley biggol
Salut,

Oui j'ai compris mais cela voudrait dire que les liens existant de mon menu sont à changer ?

Voici comment s'affiche le menu, avec les modifications pour la détection de la page active :

   //Fin du header
  
   // Début Détection de la page active
   // On initialise toutes les variables
   $home_actif = '';
   $help_actif = '';
   $search_actif = '';
   $admin_actif = '';
   $membres_actif = '';
   $calendar_actif = '';
   $gallery_actif = '';
   $login_actif = '';
   $profil_actif = '';

   // On affecte le style à la page active
   $home_actif = 'style=".home_active"';
   $help_actif = 'style=".help_active"';
   $search_actif = 'style=".search_active"';
   $admin_actif = 'style=".admin_active"';
   $membres_actif = 'style=".membres_active"';
   $calendar_actif = 'style=".calendar_active"';
   $gallery_actif = 'style=".gallery_active"';
   $login_actif = 'style=".login_active"';
   $profil_actif = 'style=".profil_active"';

   // Show the menu here, according to the menu sub template.
   template_menu();


Donc faudrait que je mette (en rouge les modifications) :

// the [member] list button
         if ($context['allow_memberlist'])
         echo '<li id="nav_membres"><a href="', $scripturl, '?action=mlist', [#red]$membres_actif,'"[/#]>' , $txt[331] , '</a></li>';


A la place de :

// the [member] list button
         if ($context['allow_memberlist'])
         echo '<li id="nav_membres"><a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';


Est ce bien cela ?

Si a la place de style je mets l'id pour la variable active, ça devrait marcher ?
Modifié par Squall (29 Mar 2007 - 18:54)
Re,

<?php   
   //Fin du header

  

   // Début Détection de la page active

   /* On initialise toutes les variables ok tu peux le faire par un include
   include('initialisation_variables.php');*/

   $home_actif = '';
   $help_actif = '';
   $search_actif = '';
   $admin_actif = '';
   $membres_actif = '';
   $calendar_actif = '';
   $gallery_actif = '';
   $login_actif = '';
   $profil_actif = '';



   // On affecte le style à la page active, non a une seule page active, sinon elle vont l'être toutes !!

   $membres_actif = 'style=".membres_active"';




   // Show the menu here, according to the menu sub template.

   template_menu();
 
   
   
// the  member  list button: Non, à l'origine tu as "posé" ton style dans l'adresse du lien !

         if ($context['allow_memberlist'])
         echo '<li id="nav_membres"><a'.$membres_actif.' href="', $scripturl, '?action=mlist','">' , $txt[331] , '</a></li>';

//ou
         echo '<li id="nav_membres"><a href="', $scripturl, '?action=mlist','"'.$membres_actif.'>' , $txt[331] , '</a></li>';

//ou  suivant la définition de ta classe 

         echo '<li id="nav_membres" '.$membres_actif.'><a href="', $scripturl, '?action=mlist','">' , $txt[331] , '</a></li>';

// tous tes liens auront cette même forme, c'est juste quand la variable sera non vide que le style sera appliqué
Justement, en venant au taf, j'ai pensé que j'avais homis le "." pour afficher ma valeur...

Bon maintenant, jusque là ça va aller. Mais un autre problème se pose à moi.

Là, je n'ai qu'un style actif pour tous mes liens; d'accord. Alors je ne peux pas me retrouver avec une image de fond "active différente" pour chaque bouton comme c'est le cas pour l'hover de chaques boutons.

Là, ça se corce un peu plus. Faudrait que je fasse un "if" pour tester la page qui est active est lui affecter le style, non ?
Salut,

Juste une question car je ne sais pas si on parle de la même chose, vas voir là , cliques sur les liens pour savoir si c'est ce genre d'effets que tu recherches !
Salut,

Alors oui, c'est bien cette effet là. Sauf que moi, chaque bouton a deux images, une pour l'inactivité, une pour l'hover et l'activité.

Si tu te connecte sur le forum avec Test, tu pourras voir l'effet hover qui etre utiliser pour l'actif.

Un gros problème, quand je me trouve sur la page membres, beh la classe active ne s'affiche pas dans le code source.

   // On affecte le style à la page active
   $membres_actif = 'class="nav_membres"';
   echo $membres_actif;


Donc je vérifie si ce quelle contient. Puis ensuite quand je vais sur la page, je dois avoir la class d'afficher, ben rien du tout en regarde le code source :

         // the [member] list button
         if ($context['allow_memberlist'])
         echo '<li id="nav_membres"><a '.$membres_actif.' href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';


Dans le <li>, c'est pareil. Smiley decu
Modifié par Squall (30 Mar 2007 - 12:24)
Salut,

Cette ligne là 
if ($context['allow_memberlist'])
, elle sert à quoi ?
Là est peut être la raison du pourquoi ! D'ailleurs il manque une { non?
Voici le code complet du menu :

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   // Work out where we currently are.
   $current_action = 'home';
   if (in_array($context['current_action'], array('admin', 'ban', 'boardrecount', 'cleanperms', 'detailedversion', 'dumpdb', 'featuresettings', 'featuresettings2', 'findmember', 'maintain', 'manageattachments', 'manageboards', 'managecalendar', 'managesearch', 'membergroups', 'modlog', 'news', 'optimizetables', 'packageget', 'packages', 'permissions', 'pgdownload', 'postsettings', 'regcenter', 'repairboards', 'reports', 'serversettings', 'serversettings2', 'smileys', 'viewErrorLog', 'viewmembers')))
      $current_action = 'admin';
   if (in_array($context['current_action'], array('search', 'admin', 'calendar', 'profile', 'mlist', 'register', 'login', 'help', 'pm')))
      $current_action = $context['current_action'];
   if ($context['current_action'] == 'search2')
      $current_action = 'search';
   if ($context['current_action'] == 'theme')
      $current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' ? 'profile' : 'admin';

echo '
   <div id="menu">
      <ul>
         <li id="nav_site"><a href="http://www.blackeyes.fr/v2/">Site</a></li>';

         // Show the [home] button.
         echo '<li id="nav_home"><a href="', $scripturl, '">' , $txt[103] , '</a></li>';

         // Show the [help] button.
         echo '<li id="nav_help"><a href="', $scripturl, '?action=help">' , $txt[119] , '</a>';

         // How about the [search] button?
         if ($context['allow_search'])
         echo '<li id="nav_search"><a href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';

         // Is the user allowed to administrate at all? ([admin])
         if ($context['allow_admin'])
         echo '<li id="nav_admin"><a href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';

         // the [member] list button
         if ($context['allow_memberlist'])
         echo '<li id="nav_membres"><a 1'.$membres_actif.' href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';
         
         // The [calendar]!
         if ($context['allow_calendar'])
         echo '<li id="nav_calendar"><a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';

         // the [SMF Gallery] button
         if ($context['allow_smfgallery_view'])
         echo '<li id="nav_gallery"><a href="', $scripturl, '?action=gallery">' , $txt['smfgallery_menu']  , '</a></li>';

         // If the user is a guest, show [login] button.
         if ($context['user']['is_guest'])
         echo '<li id="nav_login"><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';

         // If the user is a guest, also show [register] button.
         if ($context['user']['is_guest'])
         echo '<li id="nav_register"><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';

         // Otherwise, they might want to [logout]...
         if ($context['user']['is_logged'])
         echo '<li id="nav_login"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';

         echo '
         <li id="nav_profil">Profil
            <ul class="sousMenu">';

               // Edit Profile... [profile]
               if ($context['allow_edit_profile'])
               echo '<li id="nav_profil"><a href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';
               echo '<li id="nav_profil"><a href="', $scripturl, '?action=profile;u=', $context['user']['id'], ';sa=account">Parametre profil</a></li>';
               echo '<li id="nav_profil"><a href="', $scripturl, '?action=profile;u=', $context['user']['id'], ';sa=theme">Affichage & Disposition</a></li>';
            echo '
            </ul>
         </li>
      </ul>
   </div>';

}


En la commentant cette ligne, rien ne change. Je vais me tourner vers le support français de smf pour en savoir plus.
Modifié par Squall (30 Mar 2007 - 16:19)
Sujet clos
Aller à