Menu déroulant: problème d'onglet actif
sia_sia
-
maka54 Messages postés 721 Statut Membre -
maka54 Messages postés 721 Statut Membre -
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?"><b><font color= "#666">Qui sommes nous? </font></b><?php if($page == 'index') { echo 'id="onpage"'; } ?></a>
<ul style="top: -2px;">
<li>phenix
</li>
</ul>
</li>
<li><a href="#Entreprises"><b><font color= "#666">Entreprises </font></b></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;
}
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?"><b><font color= "#666">Qui sommes nous? </font></b><?php if($page == 'index') { echo 'id="onpage"'; } ?></a>
<ul style="top: -2px;">
<li>phenix
</li>
</ul>
</li>
<li><a href="#Entreprises"><b><font color= "#666">Entreprises </font></b></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;
}
3 réponses
-
$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 -
-
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 ... }
