28172 sujets

CSS et mise en forme, CSS3

Problème avec un menu css quand les boutons sont "cliqués"

Bonjour,

Je débute en CSS et pour mon site, je souhaiterais un menu similaire à ça (le menu horizontal avec DEMO 1, DEMO 2, etc.)

Je ne compte biensur pas juste copier/coller le code à partir du fichier CSS du site d'origine mais mon but est de bien le comprendre afin de pouvoir faire les modifications que je souhaite.

Le problème est que lorsque je clic sur un des bouton, celui ci ne reste pas sur fonds noir comme c'est le cas sur le site d'origine.

Voici mon code CSS ou j'ai inclus le code du site d'origine pour les boutons. Je pense que le problème vient de la partie "current-menu".

Merci pour votre aide,

Gregory

body{
	font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
	color: white;
	-webkit-text-size-adjust: none;
}


#logo{
	position: fixed;
	top: 30px;
	left: 2%;
	}

/* Menu Buttons */

#menu{
    position: fixed;
	z-index: 2000;
	top: 30px;
	right: 2%;
}

	#menu a{
    display: inline-block;
	font-size: 12px;
	width: auto;
	padding-left:5px;
	padding-right:5px;
	height: 24px;
	color: #000;
	line-height: 24px;
	text-align: center;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	background: rgba(255,255,255,0.9);
	text-transform: uppercase;
}
#menu a:hover{
	background: #ddd;
	color: #000;
}
#menu a.current-menu,
#menu a.current-menu:hover{
	background: #000;
	color: #fff;
	cursor: default;
}

h1{
	font-size: 28px;
	font-weight: 500;
	line-height: 150%;
	margin: 0 0 10px 0;
}

h1 a{
	font-weight: 300;
}

@-webkit-keyframes fade-in {
	0% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 1; }
}

a{
	font-weight: 700;
	color: white;
	text-decoration: none;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

	a:hover{
		text-decoration: underline;
		cursor: pointer;

	}
	
	#presentation {
	height:1100px;
	width:100%;
	/* background:#afc9ff;*/
	padding-top:110px;
	left: 50px;
	}
	
#services {
	height:1100px;
	width:100%;
	background:#8aba56;
	padding-top:150px;
	}
	
#contact {
	height:1100px;
	width:100%;
	background:#9b70c0;
	padding-top:150px;
	}

div.box1
{
position:absolute;
left:100px;
top:250px;
background-color: #FFF;
Color:#000;
width:600px;
height:300px;
padding:10px;
margin:0px;
}


#footer{
	position: fixed;
	bottom: 0;
	color: #fff;
	left: 0;
	z-index: 999;
	width: 96%;
	padding: 30px 2%;
	text-align: right;
	}

#social{
		position: absolute;
		vertical-align:middle;
		left: 2%;
	}

Modifié par Grek (17 Jul 2012 - 12:49)
salut,

aide toi de Firebug, tu verras ce qu'il se passe dans le css des liens lorsque tu cliques dessus! Smiley cligne
Le selecteur qui te permettra cela est :focus

ul#menu a:focus
{
background:#000;
}

Modifié par SuperMerguez (17 Jul 2012 - 13:50)
hophop a écrit :
aide toi de Firebug, tu verras ce qu'il se passe dans le css des liens lorsque tu cliques dessus!

Bon conseil en général. Dans ce cas précis ça peut être un peu difficile d'obtenir dans Firebug l'affichage des styles qui s'appliquent aux liens cliqués (c'est possible mais il m'a fallu pas mal d'essais).

SuperMerguez a écrit :
Le selecteur qui te permettra cela est :focus

Hmm, non. Le :focus se perd facilement, ce n'est pas fiable pour cet usage.

Le code utilisé sur la page de démo est:
#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
}

On utilise donc la pseudo-classe :target, et le sélecteur `~` (CSS3). Pour que ça marche ça implique de placer la navigation après tout le contenu, ce qui ne me semble pas optimal. Donc pour réaliser cet effet je recommande plutôt l'utilisation de classes ajoutées en JavaScript.
Merci pour vos réponses!
Fvsch: es-tu sur qu'il s'agit bien du code applicable pour le menu horizontal en haut à droite de la page, et non pas le menu vertical à gauche?
Comme je ne connais pas javascript, sais tu s'il existe des modules tout faits pour cet usage? Sinon que dois-je rechercher?
Merci pour votre aide
A l'aide de jquery et de la fonction addClass() tu devrais t'en sortir sans trop avoir à plonger dans le javascript !
moi j'aurai fais comme ceci
<ul>
<li <?php if ($_GET['page'] == "lien1") echo "class = \"actif\""; ?>>lien1</li>
<li <?php if ($_GET['page'] == "lien2") echo "class = \"actif\""; ?>>lien2</li>
</ul>


et ensuite un style pour la classe actif
Sujet clos
Aller à