Titre: Effet sur barre de menu
Posté par: morava le le 18-01-2014 a 17:29:54
Bonjour à tous,
Je crée actuellement un site internet en PHP avec une feuille de style.css mais je tiens à vous préciser que je suis débutant dans la création de site web.
J'ai construit un modelé :
gsweet1981.wix.com/lesmordus (http://gsweet1981.wix.com/lesmordus)
Ce modèle doit être reproduit sur mon site officiel :
www.morava-airlines.com/beta (http://www.morava-airlines.com/beta)
Le site officiel a été introduit par une société (IPS : Intégral pirep system), le style doit être fait par moi-même.
Voilà ma question :
J’aimerai que les liens de ma barre de menu + menu déroulant, deviennent bleu lorsqu’un lien (enfin la page) est actif.
Je suis parvenu à le faire mais ça ne fonctionne que pour 3-4 liens de la barre de menu, à voir de vous-même.
Je vous souhaite un bon week-end en vous remercient d'avance !
Partie du menu dans la feuille de style (style.css) :
[color=Blue]/* Main Nav Styles */
.fs #menu{
border:none;
border:0px;
margin:0 auto;
padding:0px;
font: 100% "Futura Medium", "Segoe UI", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
font-size:17px;
font-weight:bold;
}
.fs #menu ul{
background:transparent;
height:28px;
list-style:none;
margin:0;
padding:0;
}
.fs #menu li{
float:left;
padding:2px;
}
.fs #menu li a{
background:#ffffff;
background-image: url(../images/button_bg.png);
color:#ffffff;
display:block;
font-weight:normal;
line-height:28px;
border-radius: 3px;
margin:0px;
padding:0px 8px;
text-align:center;
text-decoration:none;
}
.fs #menu ul li.active a{
background:#102CE0;
color:#ffffff;
display:block;
font-weight:normal;
line-height:28px;
border-radius: 3px;
margin:0px;
padding:0px 15px;
text-align:center;
text-decoration:none;
}
.fs #menu li a:hover, .fs #menu ul li:hover a{
background-image: url(../images/buttonhot_bg.png);
color:#ffffff;
text-decoration:none;
}
.fs #menu li a:hover top {
color:#ffffff;
text-decoration:none;
}
.fs #menu li ul{
background:#000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
z-index:200;
border-radius: 4px;
border-top: none;
}
.fs #menu li:hover ul{
display:block;
}
.fs #menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
}
.fs #menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:32px;
font-size:17px;
font-style:normal;
margin:0px;
text-align:center;
}
.fs #menu li ul a:hover, .fs #menu li ul li:hover a{
background-image: url(../images/buttonhot_bg.png);
border:0px;
color:#fff;
font-size:17px;
text-decoration:none;
}
.fs #menu p{
clear:left;
}
.fs #menu a:link, a:visited, a:active {
color: #ffffff;
}
.fs #menu a:hover {
color: #ffffff;
}
/* Side Bar */
.fs #sidebar {
float: left;
margin-right: 10px;
margin-top: 10px;
font-size:11px;
}
.fs #sidebar a:link {
text-decoration: none;[/color]
Code source index.php :
[color=Blue]<?php
require_once("init.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $websitename ?></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<!-- Style Sheets -->
<link href="<?php echo $mainurl ?>css/styles.css" media="screen" rel="stylesheet" type="text/css" />
<!-- End Style Sheets -->
<!-- easy slider -->
<script type="text/javascript" src="<?php echo $mainurl ?>js/jquery.js"></script>
<!--<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>!-->
<link href="<?php echo $mainurl ?>css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<!-- end easy slider -->
<!-- Accordion/slider -->
<link rel="stylesheet" href="<?php echo $mainurl ?>css/accordion.css" />
<script type="text/javascript" src="<?php echo $mainurl ?>js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="<?php echo $mainurl ?>js/jquery.easing.js"></script>
<script type="text/javascript" src="<?php echo $mainurl ?>js/jquery.accordion.js"></script>
<script type="text/javascript">
jQuery().ready(function(){
// simple Accordion
jQuery('#list1').Accordion();
});
</script>
<!--end accordion-->
</head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<body class="fs">
<div id="sitebg"></div>
<div id="wrapper">
<!-- begin container-->
<div id="container">
<!-- Begin header -->
<div id="header">
<br />
<br />
</div>
<!-- End header -- >
<!-- Begin nav -->
<div id="menu">
<?php BuildMenu((CheckLogin())?2:1); ?>
</div>
<!-- End nav -->
<!-- Begin EasySlider 1.5 -->
<!--<div id="slider" class="block">
<ul>
<li><img src="images/slides/slide1.jpg" alt="" /></li>
<li><img src="images/slides/slide2.jpg" alt"" /></li>
</ul>
</div> !-->
<!-- End Easy Slider -->
<!-- Content -->
<div id="titlewrapper">
<h3 id="title"><?php echo $title ?></h3>
</div><div id="titletab"></div>
<div id="content">
<div id="leftdataboxcontainer">
<?php SideBarLeft(); ?>
</div>
<div id="rightdataboxcontainer">
<?php SideBarRight(); ?>
</div>
<p>
<?php IncludePage(); ?>
</p>
</div>
<!-- End Content -->
<!-- Footer -->
<div id="footer" align="center">
<table border="0" style="width:100%">
<tr>
<td style="padding-left:100px"><a href="https://www.facebook.com/groups/lesmordus/" target="_blank"><img src="images/fb.png" style="vertical-align:middle" /> Facebook</td>
<td style="text-align:right;padding-right:100px;"><a href="http://www.youtube.com/user/lesmordusdelaviation" target="_blank"><img src="images/youtube.png" style="vertical-align:middle" /> Youtube</a></td>
</tr>
</table>
Copyright © 2013 | Powered by <a href="http://www.jbussemaker.com/">jBussemaker Web Development</a> and <a href="http://www.integratedpirepsystem.com/" title="Integrated Pirep System">IPS</a>
</div>
<!-- End Footer -->
</div>
<!-- End Container -->
</div>
</body>
</html>[/color] |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|