Menu déroulant: problème d'onglet actif

Fermé

sia_sia - 25 août 2010 à 08:45
maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 - 25 août 2010 à 10:44

Bonjour, j'ai fais un menu déroulant pour mon site qui se déroule quand on clique dessus. Je veux maintenant que mon premier onglet s'active automatique quand ton arrive sur la pape sans même que je clique dessus.
Savez vous comment je dois m'y prendre?
merci d'avance
mon code:
Code : HTML

<html
<ul id="menu">
<?php $page = substr($_SERVER['PHP_SELF'], 1, -4); ?>
<li><a href="#Qui sommes nous?">Qui sommes nous? <?php if($page == 'index') { echo 'id="onpage"'; } ?></a>
<ul style="top: -2px;">
<li>phenix
</li>
</ul>
</li>
<li><a href="#Entreprises">Entreprises </a>
<ul style="top: -5px;">
<li>
<img src="images/entreprise1.png" style=" left: 180px; width: 100px; heigh: 150px;" class="imageflottante" alt="Image flottante" HSPACE="5px;"/>
</li>
</ul>
</li>
</ul>
</html>

Code : CSS - Sélectionner
.menu{
position:absolute;
/* solve a Opera7/IE display bug */
width:152px;
margin-top: 30px;
width: 150px;
border-top: 1px #9EA0A1 solid;
border-left: 1px #9EA0A1 solid;
border-right: 1px #9EA0A1 solid;
margin-left:-11%;
padding:0;
}

.menu span{
display:none;
}

.menu ul{
border: 1px #9EA0A1 solid;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:0;
position:absolute; /* important */
width:152px;
width/**/:150px;
}

.menu li ul{
width: 760px;
visibility:hidden;
}
.menu li ul li{
width: 747px;
height: 220px;
background-color: white;
border: 1px white solid;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding-left: 5px;
}

.menu li ul{
margin-left:150px; /* be careful */
margin-top:-24px;
}

.menu a{
font : bold 13px trebuchet ms, arial, tahoma, verdana, sans-serif;
text-align:center;
background-color: #EBE045;
color:#000;
text-weight:bold;
display:block;
width:150px;
border-bottom: 1px #9EA0A1 solid;
text-decoration:none;
margin:0;
padding:3px 0 3px 0; /* em units can creat little graphic bug in mozilla */
}

.menu a:hover{
background-color: #D0D0C1;
}

/* for a mozilla better display with key nav */
.menu a:focus{
background-color: white;
}

.menu span{
/* hide some accessibility stuff */
display:none;
}

.menu li{
width:150px;
display:block;
float:left;
list-style:none;
margin:0;
padding:1px;
}

/* IE PC selector */
* html .menu li {
display:inline; /* solve a IE PC list bug */
float:none; /* solve a IE5 clav nav bug */
}

a.linkOver{
background-color: #eee;
}

.titre
{
color: #E3C323;
}

A voir également:

Menu déroulant: problème d'onglet actif
Menu déroulant excel - Guide
Menu démarrer windows 11 - Guide
Excel menu déroulant en cascade - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide

3 réponses

Réponse 1 / 3

maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
25 août 2010 à 09:59

$page_courante = strrchr($_SERVER['REQUEST_URI'], '/' );
$page_courante = str_replace('/', '' ,$page_courante);

$onglet_actif = substr($page_courante, 0, 3);
$class[$onglet_actif] = 'class="active"';

echo '<li><a href="index" '.$class['ind'].'>....</a></li>';

tu ajoutes la variable class pour chaque lien de ta liste avec les 3 premières lettres de la page

et tu crées ta class en css

Réponse 2 / 3

sia_sia
25 août 2010 à 10:23

Je créais ma classe active?
<li class="active"> c'est bon?

Réponse 3 / 3

maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
25 août 2010 à 10:44

non, c'est pas bon, alors déjà je l'ai mis dans la balise a avec une variable php

un exemple plus concret

echo '
<li><a href="index" '.$class['ind'].'>....</a></li>
<li><a href="test" '.$class['tes'].'>....</a></li>
<li><a href="connexion" '.$class['con'].'>....</a></li>';

voilà a quoi cela dois ressembler

$page_courante = strrchr($_SERVER['REQUEST_URI'], '/' );
$page_courante = str_replace('/', '' ,$page_courante);

$onglet_actif = substr($page_courante, 0, 3);
$class[$onglet_actif] = 'class="active"';

avec ce code en début de page, si la page est
index -> $class['ind'] = 'class="active"';
test -> $class['tes'] = 'class="active"';
connexion-> $class['con'] = 'class="active"';

enfin en css

tu fera :

.active{
...ton code ...
}

Discussions similaires

Suppression listes déroulantes

les entrées et les sortées

Supprimer liste déroulante Excel

mon ordi marque press the esc key for startup menu

Discussions similaires

Newsletters