Sujet Précédent Sujet Suivant

Menu sscenseur à boutons dans une page unique

Résolu
legaub - 19 mai 2013 à 20:52
 legaub - 21 mai 2013 à 19:37
Bonjour,

je ne viens pas souvent ici, aussi, merci de bien vouloir m'excuser si je ne poste pas au bon endroit, ou si ma question est inadéquate.

Je viens de passer mon weekend pluvieux à essayer de reproduire le petit menu vertical blanc et bleu que l'on trouve à gauche de cette page : http://www.mozilla.org/fr/firefox/partners/

La difficulté que je rencontre est de changer l'aspect du bouton/menu selon la position dans la page.

Bref, merci de votre aide et de toute piste de recherche.

4 réponses

Réponse 1 / 4
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
20 mai 2013 à 01:14
bonjour

il faut utiliser scrollTop

un exemple simplifié 
<!DOCTYPE html>

<title>source javascript</title>
<head>
<link rel="icon" type="image/ico" href="icc.ico" />

<script type="text/javascript">

function marchar(){

var elem=document.getElementById('cssmenu').getElementsByTagName('li')

for (var i=0;i<elem.length;i++)

if(elem[i].style.backgroundColor='red'){

elem[i].style.backgroundColor='white'

}

var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop

if(hauteur_scroll>=0 && hauteur_scroll<=400){
var men=0
}
if(hauteur_scroll>=400 && hauteur_scroll<=800){
var men=1
}
if(hauteur_scroll>=800 && hauteur_scroll<=1200){
var men=2
}
if(hauteur_scroll>=1200 && hauteur_scroll<=1600){
var men=3
}
if(hauteur_scroll>=1600 && hauteur_scroll<=2000){
var men=4
}

elem[men].style.backgroundColor='red'

}



if(typeof window.addEventListener == 'undefined'){


document.attachEvent("onscroll",marchar);
}
else{
document.addEventListener("scroll",marchar, false);
}

</script>

</head>




     
      
        <li>javascript fr</li>
        <li>javascript fr</li>
<li>javascript fr</li>
<li>javascript fr</li>
<li>javascript fr</li>
      
   















</html>
3
Réponse 2 / 4
legaub
20 mai 2013 à 11:35
Bonjour,

merci de ta réponse.

Je suis toujours, enthousiaste et admiratif chaque fois que je rencontre / trouve sur le net des personnes compétentes, disponibles et qui partagent leurs connaissances. Merci beaucoup donc.

Si je comprends bien ton code, les limites de hauteurs de Scroll sont fixées à des multiples de 400 px. N'y a-t-il pas moyen de l'exprimer en pourcentage ?

Car j'ai choisi des div entre lesquelles on se balade, de la hauteur de la fenêtre du navigateur. D'ailleurs, je ne sais pas encore si j'ai bien fait !

Au cas ou, voilà où j'en suis : 
<!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>
<meta name="language" content="fr" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Tout en une page</title>

<link type="image/png" rel="icon" href="images/favicon.png" />
<link type="text/css" rel="stylesheet" href="style.css" />

</head>





<!-- Banniere !-->


Première ligne de titre
Deuxième ligne de titre





<nav id="nav">

<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
<li>Page5</li>

</nav>



SALUT PAGE1


SALUT PAGE2


SALUT PAGE3


SALUT PAGE4


SALUT PAGE5


credentials


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script>

(function($){
$.fn.juizScrollTo = function(speed, v_indent){

if(!speed) var speed = 'slow';
if(!v_indent) var v_indent = 0;

return this.each(function(){
$(this).click(function(){

var goscroll = false;
var the_hash = $(this).attr("href");
var regex = new RegExp("\#(.*)","gi");

if(the_hash.match("\#(.+)")) {

the_hash = the_hash.replace(regex,"$1");

if($("#"+the_hash).length>0) {
the_element = "#" + the_hash;
goscroll = true;
}
else if($("a[name=" + the_hash + "]").length>0) {
the_element = "a[name=" + the_hash + "]";
goscroll = true;
}

if(goscroll) {
var container = 'html';
if ($.browser.webkit) container = 'body';

$(container).animate({
scrollTop:$(the_element).offset().top + v_indent
}, speed, 
function(){$(the_element).attr('tabindex','0').focus().removeAttr('tabindex');});
return false;
}
}
});
});
};
})(jQuery)

$('a:first').juizScrollTo('fast',-75).css('color', 'red');
$('a:not(:first)').juizScrollTo('slow').css('color', '#444');

</script>



<!-- don't copy below 
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-8397602-5']);
  _gaq.push(['_trackPageview']);
  _gaq.push(['_setDomainName', '.creativejuiz.fr']);

  (function() {
var ga document.createElement('script'); ga.type 'text/javascript'; ga.async = true;
ga.src ('https:' document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

-->







</html>


Remarque bien que j'ai bêtement recopié de script de scroll. J'ai essayé de le mettre en haut de page, mais ça n'a pas fonctionné. Par ailleurs, j'ai commenté l'autre car je ne comprends pas à quoi il sert.

Et la feuille : 


html
{
height: 100%;
}

body
{
margin:0px;
padding:0px;
height:100%;
}

/* GESTION DE LA BANNIÈRE*/

#masthead /*bloc de toute la largeur, en haut à gauche, au dessus du reste*/
{
position:fixed; /*absolute par rapport à la fenêtre*/
top:0px;
left:0px;
z-index:100;
width:100%;
height:108px;
background-image:url(images/banniere.png);
background-repeat:no-repeat;
background-color:#bd1d49;
}

#header /* le texte du titre dans sa boite*/
{
position:absolute;
top:23px;
left:123px;
/*police*/
color:#ffffff;
font-family:'Droid Sans',sans-serif;
font-size:23px;
text-align:left;
}


/* MENU FLOTTANT */

#nav
{
    left:30px;
    margin-left:auto;
    padding:0px;
    position:fixed;
    top:260px;
    width:60px;
    z-index:1000;
}

/* "LES PAGES" */

#page1
{
position:relative;
width:100%;
min-height:100%;
background-color:#eeeeee;
padding-top:108px;
}

#page2
{
position:relative;
width:100%;
min-height:100%;
background-color:#bd1d49;
padding-top:108px;
}

#page3
{
position:relative;
width:100%;
min-height:100%;
background-color:#ffffff;
padding-top:108px;
}

#page4
{
position:relative;
width:100%;
min-height:100%;
background-color:#bd1d49;
padding-top:108px;
}

#page5
{
position:relative;
width:100%;
min-height:100%;
background-color:#eeeeee;
padding-top:108px;
}

#bottom
{
position:relative;
width:100%;
background-color:#000000;
color:#eeeeee;
}


Merci par avance de ta réponse éventuelle.
0
Réponse 3 / 4
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
21 mai 2013 à 18:00
essai ceci 
<!DOCTYPE html>

<title>source javascript</title>
<head>

<style type="text/css">

html
{
height: 100%;
}

body
{
margin:0px;
padding:0px;
height:100%;
}

#masthead /*bloc de toute la largeur, en haut à gauche, au dessus du reste*/
{
position:fixed; /*absolute par rapport à la fenêtre*/
top:0px;
left:0px;
z-index:100;
width:100%;
height:108px;
background-image:url(images/banniere.png);
background-repeat:no-repeat;
background-color:#555555;
}

#header /* le texte du titre dans sa boite*/
{
position:absolute;
top:23px;
left:123px;
/*police*/
color:#ffffff;
font-family:'Droid Sans',sans-serif;
font-size:23px;
text-align:left;
}

#nav
{
    left:30px;
    margin-left:auto;
    padding:0px;
    position:fixed;
    top:260px;
    width:100px;
background-color:white;
    z-index:1000;
}

#page1
{
position:relative;
width:100%;
min-height:100%;
background-color:#999999;
padding-top:108px;
}

#page2
{
position:relative;
width:100%;
min-height:100%;
background-color:#bd1d49;
padding-top:108px;
}

#page3
{
position:relative;
width:100%;
min-height:100%;
background-color:#999999;
padding-top:108px;
}

#page4
{
position:relative;
width:100%;
min-height:100%;
background-color:#bd1d49;
padding-top:108px;
}

#page5
{
position:relative;
width:100%;
min-height:100%;
background-color:#999999;
padding-top:108px;
}

</style>


<script type="text/javascript">

function marchar(){

var elem=document.getElementById('nav').getElementsByTagName('li');

var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop;

var hauteur_div=document.getElementById('page1').clientHeight

if(hauteur_scroll>=0 && hauteur_scroll<=hauteur_div){
var men=0;
}
if(hauteur_scroll>=hauteur_div && hauteur_scroll<=hauteur_div*2){
var men=1;
}
if(hauteur_scroll>=hauteur_div*2 && hauteur_scroll<=hauteur_div*3){
var men=2;
}
if(hauteur_scroll>=hauteur_div*3 && hauteur_scroll<=hauteur_div*4){
var men=3;
}
if(hauteur_scroll>=hauteur_div*4 && hauteur_scroll<=hauteur_div*5){
var men=4;
}


for (var i=0;i<elem.length;i++){

if(elem[i].style.backgroundColor=='red' && elem[men] != elem[i]){

elem[i].style.backgroundColor='white';

break;

}
}
elem[men].style.backgroundColor='red';
}


if(typeof window.addEventListener == 'undefined'){


attachEvent("onscroll",marchar);
}
else{
document.addEventListener("scroll",marchar, false);
}





var kdeme={

sens:0,
inter:0,
vitesse:0,
elem:0,

kasco:function (arg){

clearInterval(kdeme.inter)

var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop;

kdeme.elem=document.getElementById('page'+arg)

var elemval=document.getElementById('page'+arg).offsetTop

var diff=elemval-hauteur_scroll

kdeme.sens=(diff > 0 ? 'plus' : 'moins');

kdeme.vitesse=Math.abs(diff/25)

kdeme.inter=setInterval(kdeme.kasca,20);
},



kasca:function(arg){

var ddl=(navigator.vendor) ? document.body : document.documentElement;

var hauteur_scroll=ddl.scrollTop || document.body.scrollTop;

if(kdeme.sens=='plus'){

if(hauteur_scroll + kdeme.vitesse >= kdeme.elem.offsetTop){

ddl.scrollTop=kdeme.elem.offsetTop
clearInterval(kdeme.inter)
return false;
}

ddl.scrollTop+=kdeme.vitesse
}

else{

if(hauteur_scroll -kdeme.vitesse <= kdeme.elem.offsetTop){

ddl.scrollTop=kdeme.elem.offsetTop
clearInterval(kdeme.inter)
return false;
}

ddl.scrollTop-=kdeme.vitesse
}

}

}

</script>
</head>




<!-- Banniere !-->


Première ligne de titre
Deuxième ligne de titre





   
      <nav id="nav">

<li onclick='kdeme.kasco(1)'>Page1</li>
<li onclick='kdeme.kasco(2)'>Page2</li>
<li onclick='kdeme.kasco(3)'>Page3</li>
<li onclick='kdeme.kasco(4)'>Page4</li>
<li onclick='kdeme.kasco(5)'>Page5</li>

</nav>

 


SALUT PAGE1


SALUT PAGE2


SALUT PAGE3


SALUT PAGE4


SALUT PAGE5


</html>


ca fera 2000 euros
0
Réponse 4 / 4
legaub
21 mai 2013 à 19:37
Nickel, merci beaucoup.

Tu prends les bitcoins ?
0

Discussions similaires

menu en c
sebz10 -
decricri62 -

4 réponses
controle Checkbox a choix unique
Utilisateur anonyme -
petitelarve -

2 réponses
Reload d'une page
jnbrunet -
Anthomicro -

6 réponses
Désactiver une case à cocher
veroderberg -
jordane45 -

3 réponses
comment créer un sous menu
msi79 -
msi79 -

8 réponses
Rejoignez-nous