11548 sujets

JavaScript, DOM et API Web HTML5

Ancre jquery

Bonjour a tous,

je viens de mettre en place sur mon site un systeme d'ancre qui me permet de scrollé automatiquement sur une partie de la page lorsque je clique sur un lien.

seulement quand l'action s’effectue mon menu reste bien évidement a sa place, hors je voudrais que celui me suive et ce mette juste au dessus de la div ou je me trouve.

j'espere que je trouverais de l'aide.

// SCROLL NOS SERVICES
$(function(){
    $('a[href^=#]').click(function(){
        cible=$(this).attr('href');
            hauteur=$(cible).offset().top;
            $('html,body').animate({
                scrollTop:hauteur
            },1000)
            $("#sous-menu").css("top","0");
    });
});


Mon menu et son css
<div id="sous-menu">
                            <a href="#ergonomie">Ergonomie</a>
                            <a href="#webdesign">Web Design</a>
                            <a href="#integration">Intégration</a>
                            <a href="#cms">CMS</a>
                            <a href="#ecommerce">E-Commerce</a>
                        </div>



#sous-menu{
    background: #000;
    position: fixed;
    top: 467px;
    width:960px;
    height: 67px;
}

#sous-menu a{
    display: block;
    float: left;
    padding: 20px;
    font-size: 21px;
    color: #fff;
    font-family: 'Terminal Dosis Light', arial, serif;
}

#sous-menu a:hover{
    background: #fff;
    color: #000;
}


j'ai fais des essaie en mettant le top a 0 et en mettant mon menu en position fixed mais pas concluant.
Modifié par trainsrenton (20 Jun 2011 - 14:38)
Bonjour à toutes et à tous,

c'est quoi un UP ? J'ai déjà remarqué cela à plusieurs reprise sur ce forum sans trop bien comprendre de quoi il s'agit. Et comme timidement tu dis "un petit up", je suppose que c'est quelque chose de pas bien venu.

Revenons à tes moutons.

Donc tu désires un menu baladeur et en plus qui fonctionne sur toutes les navigateurs.
Pour cela j'ai créé en CSS des boites qui sont positionnées fixement, mais à des endroits différents de la fenêtres. J'ai repris tes codes que j'ai adapté pour changer tout simplement le nom de l'ID du div qui englobe le menu. Et puis ça marche !

Voici le code HTML avec le code Javascript et CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">
/*---------------------*/
/*     Objet Boite     */
/*---------------------*/
var boite = {
adr: null,

deplace: function (lieu)
{
	if (this.adr == null)
		this.adr = document.getElementById("boite");

	switch(lieu)
	{
		case 1:	this.adr.id = "boite1";
				break;

		case 2:	this.adr.id = "boite2";
				break;

		case 3:	this.adr.id = "boite3";
				break;

		case 4:	this.adr.id = "boite4";
				break;

		case 5:	this.adr.id = "boite5";
				break;
	}
}};
</script>

<style type="text/css">
body {
		background-color	: grey; 
}
/*----------------------------*/
/*     Boite de démarrage     */
/*----------------------------*/
#boite {
		position			: fixed;
		top					: 0;
		left				: 0;
}
/*-------------------------------------*/
/*     les Boites des destinations     */
/*-------------------------------------*/
#boite1 {
		position			: fixed;
		top					: 20px;
		left				: 20px;
}

#boite2 {
		position			: fixed;
		top					: 40px;
		left				: 40px;
}

#boite3 {
		position			: fixed;
		top					: 60px;
		left				: 60px;
}

#boite4 {
		position			: fixed;
		top					: 80px;
		left				: 80px;
}

#boite5 {
		position			: fixed;
		top					: 100px;
		left				: 100px;
}
/*-----------------*/
/*     le menu     */
/*-----------------*/
ul#menu {
		width				: 960px;
		height				: 67px;

		background-color	: black;
	} 

ul#menu li {
		list-style-type		: none;
		float				: left;
		margin				: 20px;
}

ul#menu li a {
		font-family			: 'Terminal Dosis Light', arial, serif;
		font-size			: 21px;
		color				: white;

		padding				: 20px;
	} 
 
ul#menu li a:hover { 
		background-color	: white; 
		color				: black; 
	} 
</style>
</head>

<body>
<div id="boite">
	<ul id="menu">
		<li onclick="boite.deplace(1);"><a href="#ergonomie">Ergonomie</a></li>
		<li onclick="boite.deplace(2);"><a href="#webdesign">Web Design</a></li>
		<li onclick="boite.deplace(3);"><a href="#integration">Intégration</a></li>
		<li onclick="boite.deplace(4);"><a href="#cms">CMS</a></li>
		<li onclick="boite.deplace(5);"><a href="#ecommerce">E-Commerce</a></li>
	</ul>
</div>

</body>
<html>


J'espère avoir répondu à ta question !

Ah oui, au fait, je ne connais que le Javascript mais pas les autres langages comme Jquery et php.

@+
Modifié par Artemus24 (17 Jun 2011 - 14:48)
bonjour, merci d'avoir prit le temps de me répondre !
le petit up sert a ne pas faire tomber le sujet dans les bas fond du forum cela permet de le faire remonter de temps en temps.

Ensuite je viens d’essayé se que tu m'as envoyer sa marche nikel sauf que.... je n'ai plus mon animate easing se qui rend le truc moins esthétique .... :s
Modifié par trainsrenton (17 Jun 2011 - 16:40)
Bonjour à toutes et à tous,

oui j'ai passé un peu de temps, vu que bidouiller dans les styles via Javascript n'est pas le top.

Donc je t'ai donné ma solution, un peu plus bavarde afin d'être compatible avec tous les navigateurs.

Maintenant c'est à toi de faire un habillage en conséquence de ce que tu désires. Je ne peux pas t'aider car je ne connais pas ni le jquery ni le php.

L'astuce est d'avoir créé un <div> ... </div> uniquement pour déplacer dans ta page le menu !

@+
voici la solution si cela peut en aider certain :

le html : 

 <div id="sous-menu">
                            <a href="#ergonomie">Ergonomie</a>
                            <a href="#webdesign">Web Design</a>
                            <a href="#integration">Intégration</a>
                            <a href="#ecommerce">E-Commerce</a>
                            <a href="#cms">CMS</a>
                        </div>


le css :

#sous-menu{
    background: #000;
    width:960px;
    height: 67px;
    position: absolute;
    top: 468px;
}

#sous-menu a{
    display: block;
    float: left;
    padding: 20px;
    font-size: 21px;
    color: #fff;
    font-family: 'Terminal Dosis Light', arial, serif;
}

#sous-menu a:hover{
    background: #fff;
    color: #000;
}


et le JS avec jquery :

    $('a[href^=#]').click(function(){
        cible=$(this).attr('href');
            hauteur=$(cible).offset().top;
            $('html,body').animate({ scrollTop:hauteur-68 },1000,function(){
$('#sous-menu').css('top', $("html").scrollTop() + "px")});
            
        });
Sujet clos
Aller à