IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

mouvement d'un menu


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Août 2006
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Août 2006
    Messages : 71
    Par défaut mouvement d'un menu
    j'ai fait un menu qui est attaché a mes page web.

    www.dovelakeglobal.com/test.html

    ce que je n'arrive pas a faite est :

    qaund l'utilisateur dessend avec l'assenseur et et que le menu arrive en haut de la page.
    c'est que le menu decende en meme tempsn pour, le but est d'avoir tous les theme possible que le visiteur soit en haut ou bas de page.

    voici le code CSS

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
     
    a {
    	text-decoration: none;
    }
    a:hover {
    }
    p{
    	font-size: 18px;
    	text-align: justify;
    	font-family: "Comic Sans MS";
    	font-style: italic;
    }
     
    ul#navmenu, ul#navmenu li, ul#navmenu ul {
    	margin: 0;
    	border: 0 none;
    	padding: 0;
    	width: 160px; /*For KHTML*/
    	list-style: none;
    }
    ul#navmenu li {
    	display: block !important; /*For GOOD browsers*/
    	display: inline; /*For IE*/
    	position: relative;
    }
    /* Root Menu */
    ul#navmenu a {
    	border: 1px solid #FFF;
    	border-right-color: #CCC;
    	border-bottom-color: #CCC;
    	padding: 0 6px;
    	display: block;
    	text-decoration: none;
    	height: auto !important;
    	height: 100%; /*For IE*/
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	line-height: 22px;
    	font-weight: bold;
    }
    /* Root Menu Hover Persistence */
    ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a {
    	background-image: url(../images/img-menu.gif);
    }
    /* 2nd Menu */
    ul#navmenu li:hover li a, ul#navmenu li.iehover li a {
     
    }
    /* 2nd Menu Hover Persistence */
    ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a {
     
    }
    /* 3rd Menu */
    ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a {
     
    }
    /* 3rd Menu Hover Persistence */
    ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a {
    	background: #CCC;
    	color: #FFF;
    }
    /* 4th Menu */
    ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a {
    	background: #EEE;
    	color: #666;
    }
    /* 4th Menu Hover */
    ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover {
    	background: #CCC;
    	color: #FFF;
    }
    ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul {
    	display: none;
    	position: absolute;
    	top: 0;
    	left: 160px;
    }
    /* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul {
    	display: none;
    }
    ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul {
    	display: block;
    }
    et une partit mon mon html

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
    <ul id="navmenu">
          <li><a href="index.html">&nbsp;&nbsp;&nbsp;&nbsp;HOME PAGE</a></li>
          <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Children's Page</a></li>
          <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Housing</a></li>
          <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Education</a>
            <ul>
              <li><a href="#">School</a></li>
              <li><a href="#">Vocational training</a></li>
              <li><a href="#">Recreation</a></li>
            </ul>
          </li>
          <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Spiritual Center</a>
            <ul>
              <li><a href="#">Culture</a></li>
            </ul>
          </li>
          <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Clinic</a></li>
    <!-- je fait la meme chose avec tout mes onglets -->
    j'ai pensé a faire un mais cela reste figer au meme endroit, ce n est pas le résultat voulu


    merci de m'aider et m'orienté

  2. #2
    Expert confirmé
    Avatar de vodiem
    Homme Profil pro
    Vivre
    Inscrit en
    Avril 2006
    Messages
    2 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Vivre
    Secteur : Conseil

    Informations forums :
    Inscription : Avril 2006
    Messages : 2 895
    Par défaut
    salut guillaume2vo,

    tu ne peux simuler ce comportement en css.
    il est possible de faire cela en JS, tu as du code pour cela ici


  3. #3
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Août 2006
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Août 2006
    Messages : 71
    Par défaut
    merci, c'est tout a fait ce qu'il me faut

    depuis 6h ce matin, je suis en train de faire, je pense du m'importe quoi, car je n'arrive pas a intégré dans mon site.

    j'ai fait un copier coller de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <script>
    if (!document.layers)
    document.write('<div id="divStayTopLeft" style="position:absolute">')
    </script>
    puis a la place du divStayTopLeft j'ai mis mes div existante...

    vraiment, cela me donne le tournie ce problème!!!!

    j'ai vue sur d'autre forum le meme principe de code, mais c'est toujours pareil!! ca ne marche pas...

Discussions similaires

  1. Menu hover avec effet de mouvement horizontal
    Par Dsphinx dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 22/07/2013, 15h47
  2. question : mouvement d'un menu
    Par the_snip dans le forum jQuery
    Réponses: 1
    Dernier message: 14/12/2011, 01h57
  3. Mouvement d'un menu (floating)
    Par guillaume2vo dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 02/12/2009, 18h16
  4. Menu qui suit le mouvement de la page
    Par Béarmac dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 21/04/2006, 16h13
  5. Menu en GL
    Par Kaïn dans le forum OpenGL
    Réponses: 2
    Dernier message: 06/05/2002, 11h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo