5568 sujets

Sémantique web et HTML

Menu avec ancre qui change selon la page courante

Bonjour,
Je vais essayais d'être claire Smiley lol

>C'est un site qui serai construit sur une seule et unique page
>On aurai plusieurs contenu à l'intérieur
>J'ai un menu fixe avec des "ancres" qui amène l'internaute sur un endroit précis de la page
> Donc lorsque l'on clique sur un lien du menu, la page fait un slide vers l'ancre (ça je sais faire)
> Et donc j'aimerai que ce lien change de couleur pour indiquer aux gens "Vous êtes ici"

J'ai beau chercher partout je ne trouve pas comment faire ... Smiley bawling
pas de tuto rien ...

voilà merci d'avance Smiley confused
Modifié par mi2k (06 Oct 2012 - 12:51)
Malheureusement non Smiley smile

le a:active permet le changement de couleurs d'un lien pendant le clic de la souris

moi ce que j'aurai voulu c'est que la couleur de mon lien change et reste lorsque qu'il est sur l'ancre correspondant. On voit ça souvent en se moment

merci quand même FloydinBremen Smiley smile
ça ne pourrais se faire qu'en Javascript ... ajout d'une class sur le lien de l'ancre lors du click.

edit comme indiqué le active fait la même chose tant qu'on ne clique pas ailleurs
Modifié par Super_baloo8 (07 Oct 2012 - 18:18)
oui mais n'existe t'il pas de tuto ? je ne trouve rien Smiley bawling
je ne sais pas du tout comment faire
Youhou j'ai trouvé Smiley lol !!!
je vous mets un petit code pour ceux qui veulent ^__^

a écrit :


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Minimalistic ScrollSpy - jsFiddle demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>
body {
height: 6000px;
font-family: Helvetica, Arial;
}

#top-menu {
position: fixed;
z-index: 1;
background: white;
left: 0;
right: 0;
top: 0;
}

#top-menu li {
float: left;
}

#top-menu a {
display: block;
padding: 5px 25px 7px 25px;
-webkit-transition: 1s all ease;
-moz-transition: 1s all ease;
transition: 1s all ease;
border-top: 3px solid white;
color: #666;
text-decoration: none;
}

#top-menu a:hover {
color: #000;
}

#top-menu li.active a {
border-top: 3px solid #333;
color: #333;
font-weight: bold;
}

#foo {
position: absolute;
top: 400px;
}

#bar {
position: absolute;
top: 800px;
}

#baz {
position: absolute;
top: 1200px;
}

</style>



<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;

// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";

if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
});//]]>

</script>


</head>
<body>
<ul id="top-menu">
<li class="active">
<a href="#">Top</a>
</li>
<li>
<a href="#foo">Foo</a>
</li>
<li>
<a href="#bar">Bar</a>
</li>
<li>
<a href="#baz">Baz</a>
</li>
</ul>

<a id="foo">Foo</a>


<a id="bar">Bar</a>


<a id="baz">Baz</a>


</body>


</html>



Modifié par mi2k (07 Oct 2012 - 20:11)
Sujet clos
Aller à