Sticky Menu

Pierre Ftn
Javascript

Salut ,

j'ai utilisé le script sticky pour faire un menu collant tout simple mais n'arrive pas à m'en servir pourtant j'ai tout fait comme indiqué sur leur site , une piste ?

<?php
if (isset($_POST)){
  $mail=addslashes($_POST'mail']);
  $message=addslashes($_POST'message']);
  $pseudo=addslashes($_POST'pseudo']);
    $destinataire="pierre-font78@hotmail.fr";
    $sujet="Formulaire de contact";
    $msg="Nouveau message du formulaire \n
    Nom: $pseudo \n
    Email: $mail \n
    Message: $message";
    $entete="From: $nom \n
    Reply-To: $mail";
    mail ( $destinaire , $sujet , $msg, $entete);
}
?> 

<!DOCTYPE html>
<html>
  <head>
    <title>PierreDesign</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/style.css">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <link rel="stylesheet" type="text/css" href="styles/tonic_gallery.css"/>
         <link rel="stylesheet" type="text/css" href="styles/tonic_gallery.css"/>
<link rel="stylesheet" type="text/css" href="styles/demo_styles.css"/>
<link rel="stylesheet" type="text/css" href="styles/colorbox.css"/>

  </head>
  <body>
<script src="js/jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $(".menu").sticky({topSpacing:0});
  });
</script>
      <div id="header">
        <div class="conteneur">
          <div class="row">
          <div class="span8 offset2">
            <img src="img/logo.png" alt="">
            <h2> DESIGNER ET VIDEOMAKER SPECIALISE DANS <b>L’ESPORT</b> </h2>
            <img src="img/barre.png" alt="">
            <p>J'AI TRAVAILLE POUR DIFFERENTES ORGANISATIONS</p>
          </div>
          </div>
            <div class="row">
                <ul class="ch-grid">
                  <li>
                    <div class="ch-item">       
                      <div class="ch-info">
                        <div class="ch-info-front ch-img-1"></div>
                          <div class="ch-info-back" style="background:#6e0e0e;">
                            <h3>Gamoniac</h3>
                        </div>  
                      </div>
                  </div>
              </li>
              <li>
                    <div class="ch-item">       
                      <div class="ch-info">
                        <div class="ch-info-front ch-img-2"></div>
                          <div class="ch-info-back" style="background:#1255b1;">
                            <h3>Avenger</h3>
                        </div>  
                      </div>
                  </div>
              </li>
              <li>
                    <div class="ch-item">       
                      <div class="ch-info">
                        <div class="ch-info-front ch-img-3"></div>
                          <div class="ch-info-back" style="background:#9c7901;">
                            <h3>Inception</h3>
                        </div>  
                      </div>
                  </div>
              </li>
              <li>
                    <div class="ch-item">       
                      <div class="ch-info">
                        <div class="ch-info-front ch-img-4"></div>
                          <div class="ch-info-back" style="background:#f51a24;">
                            <h3>3DMax</h3>
                        </div>  
                      </div>
                  </div>
              </li>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
      <div id="menu" class="menu">

      </div>
      <div id="service">
        <div class="conteneur">
        <div class="row">
          <div class="span8 offset2">
            <h2> MES SERVICES</b> </h2>
            <img src="img/barre_blanche.png" alt="">
            <p>CE QUE JE PEUX REALISER POUR VOUS</p>
          </div>
        </div>
        <div class="row icones">
          <div class="span3"><img src="img/identite.png" alt="">
            <h1>LOGO</h1>
            <p>LOGO 100% VECTORIEL</p>
            <p>DELAI DE 7 JOURS MAX</p>
            <p>DISPONIBLE EN PLUSIEURS COLORIS</p>
            <p>SANS APPORT </p>

          </div>
          <div class="span3"><img src="img/wb.png" alt="">
          <h1>WEBDESIGN</h1>
            <p>LOGO 100% VECTORIEL</p>
            <p>DELAI DE 2 SEMAINES MAX</p>
            <p>REDUCTION POUR UNE INTEGRATION WEB</p>
            <p>SANS APPORT<p></div>
          <div class="span3"><img src="img/social.png" alt="">
            <h1>RESAUX 
            SOCIAUX</h1>
            <p>YOUTUBE</p>
            <p>TWITTER</p>
            <p>FACEBOOK</p>
            <p>POUR TOUT AUTRES BACKGROUNDS ME CONTACTER<p></div>
          <div class="span3"><img src="img/integration.png" alt="">
            <h1>INTEGRATION
            WEB</h1>
            <p>100 % PRET A L’USAGE</p>
            <p>ASSISTANCE A L’INSTALLATION</p>
            <p>DELAI LE PLUS COURT POSSIBLE</p>
            <p>FACILE A MODIFIER</p></div>
        </div>
        <div class="row">
          <p style="font-size:20px;">POUR TOUT AUTRES COMMANDES ( MAILLOT , MANETTE ETC... ) CONTACTER MOI VIA LE FORMULAIRE</p>
        </div>
      </div>
      </div>
      </div>
      <div id="port">
        <div class="conteneur">
          <div class="row">

            <h2> PORTFOLIO </h2>
            <img src="img/barre_blanche.png" alt="">
            <p>VOICI MES REALISATIONS</p>
              </div>
          </div>
          <div class="row">
        <div id="portfolio"></div>
      </div></div>
      </div>
      <div id="contact">
        <div class="row ctc">
          <h2> CONTACT </h2>
          <img src="img/barre_blanche.png" alt="">
          <p>N'HESITEZ PAS A ME CONTACTER</p>
         </div>
         <div class="row">
          <div class="conteneur">
           <div class="span6">
              <form action="index.php" method="POST">
                <label for="pseudo">PSEUDO :</label>
                <p><input type="text" id="pseudo" name="pseudo" required/> </p>
                <label for="mail">MAIL :</label>
                <p><input type="email" id="mail" name="mail" required/> </p>
                <label for="message">MESSAGE :</label>
                <p><textarea name="message" id="message" cols="50" rows="10" required></textarea> </p>
                <input type="submit" value ="Envoyer" name="envoi">
              </form>
                         </div>
           <div class="span6 social">
             <ul "images">
               <li><a href="#"><img src="img/yt.png" alt=""></a></li>
               <li><a href="#"><img src="img/twitter.png" alt=""></a></li>
               <li><a href="#"><img src="img/facebook.png" alt=""></a></li>
             </ul>

           </div>
           </div>
         </div>
      </div>
      <div id="footer">
        PierreDesign.Fr - Designed and Coded By PierreDesign.fr - Ne pas Reproduire - Do not Copy
      </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="script/jquery-1.4.js"></script>

  });
</script>
<script type="text/javascript" src="jquery-scrolltofixed-min.js"></script>
<script type="text/javascript" src="script/jquery-1.4.js"></script>
<script type="text/javascript" src="script/jquery-easing.js"></script>
<script type="text/javascript" src="script/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="script/portfolio-setter.js"></script>
<script type="text/javascript">$(function(){
    // init the portfolio functionality
    $('#portfolio').portfolioSetter({xmlSource:'portfolio.xml'});

</script>
  </body>
</html>

*{
    margin:0;
    padding:0;
    font-family: 'Titillium Web' , sans-serif ;
    font-weight: 30px;
    color:#e9e9e9;
}
* p { margin:0;}
#portfolio { margin: auto; height: 100% !important ; width: 100%;}
.conteneur {
    height: 100:;
    width:960px;
    margin: auto
}
#header {
    position:relative;
    z-index: 0;
    width: 100%;
    height: 1000px; 
    background-color: #efeeee;
    text-align: center;
}
#service {
    position:relative;
    z-index: 0;
    width: 100%;
    background-color: #11a2f5;
    height: 900px;
}
#port {
    position:relative;
    z-index: 0;
    width: 100% !important;
    background-color: #ca2121;

}

#contact {
    position:relative;
    z-index: 0;
    width: 100%;
    background-color:#2ba244;
    height: 100%
}

#footer {
    position:relative;
    z-index: 0;
    font-weight: 500;
    width: 100%;
    background-color:#efeeee;
    height: 20px;
    padding-top: 10px;
    font-size: 20px;
    text-transform: uppercase;
    color:black;
    text-align: center;
}
#menu {
    position:relative;
    z-index: 15;
    width: 100%;
    height:35px;
    background-color: black;
}

}
.header
{ 
    width: 69px;
    height: 74px;
    background:url(../img/home.png);
}
.service
{ 
    width: 69px;
    height: 74px;
    background:url(../img/service.png);
}
.portfolio_image
{ 
    width: 69px;
    height: 74px;
    background:url(../img/portfolio.png);
}

}
.contact
{ 
    width: 69px;
    height: 74px;
    background:url(../img/contact.png);
}
#header img { 
    margin:20px auto;
}
#header h2 { 
    font-weight: 500;
    margin-top:5px;
    margin-bottom: 5px;
    font-size: 28px;
    text-decoration: none;
    color:#1d1d1d;
}
#header p {
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 22px;
    color:#1d1d1d;
}

#header ul {
    margin-top: 50px;
    display:inline;
    float:left;
    list-style: none;
} 
#header ul li {
    display:inline;
    float left
}
#header img { 
    margin-right: 3px;
    margin-left: 3px;
}
#header ul a {
    display:inline-block;
}
.ch-item {
    float:left;
    width: 233px;
    height: 240px;
    border-radius: 50%;
    position: relative;
    cursor: default;
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
    -o-perspective: 900px;
    -ms-perspective: 900px;
    perspective: 900px;
}
.ch-info{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 px rgba(0,0,0,0.3);
}
.ch-info .ch-info-back {
    -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}
.ch-img-1 { 
    background: no-repeat url(../img/gamoniac.png);
}
.ch-img-2 { 
    background: no-repeat url(../img/avenger.png);
}
.ch-img-3 { 
    background: no-repeat url(../img/inception.png);
}
.ch-img-4 { 
    background: no-repeat url(../img/3dmax.png);
}
.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin: 0 15px;
    padding: 100px 0 0 0;
    height: 110px;
    font-family: 'Titillium', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}
.ch-item:hover .ch-info-front {
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}
.ch-item:hover .ch-info-back {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}
.client {
    margin:auto;
}
.rouge {
    background:red;
}
#service { text-align:center;}
#service h2 { 
    font-weight: 600;
    margin-top:50px;
    margin-bottom: 5px;
    font-size: 50px;
    text-decoration: none;
    color:#e9e9e9;
}
#service p {
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 24px;
    color:#e9e9e9;
}
#port { text-align: center;}
#port h2 { 
    font-weight: 600;
    margin-top:50px;
    margin-bottom: 5px;
    font-size: 50px;
    text-decoration: none;
    color:#e9e9e9;
}
#port p {
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 24px;
    color:#e9e9e9;
}

.ctc { text-align: center;}
#contact label {
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 24px;
    color:#e9e9e9;
}
#contact input {
    background: transparent!important;
    border : solid 2px #e9e9e9;
    border-radius:0px;
    font-weight: 500;
        font-size: 18px;
    color:#e9e9e9;
    padding:3px;
    box-shadow: none;
}
#contact input:focus:invalid {
    border : solid 2px red ; 
    box-shadow: none;
}
#contact textarea:focus:invalid {
    border : solid 2px red ;
    box-shadow: none;
}
#contact input:focus:valid {
    border : solid 2px #56C93F ; 
    box-shadow: none;
}
#contact textarea:focus:valid {
    border : solid 2px #56C93F ;
    box-shadow: none;}
#contact textarea {
    background: transparent!important;
    border : solid 2px #e9e9e9;
    border-radius:0px;
    font-weight: 500;
        font-size: 18px;
    color:#e9e9e9;
    width:100%;
    box-shadow: none;
}
#contact input:hover {
}
#contact h2 { 
    font-weight: 600;
    margin-top:50px;
    margin-bottom: 5px;
    font-size: 50px;
    text-decoration: none;
    color:#e9e9e9;
}
#contact p {
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 24px;
    color:#e9e9e9;
}
#contact ul { margin-left: 30px;
margin-top: 30px;}
#contact ul li {
    float:left ;
    margin-left: 20px;
    list-style:none;
}
.skype { margin-top:30px; float:left}
.icones {
    text-align:center;
    margin:50px auto;
}
.icones img {
    margin:15px auto !important;
}
.icones h1 {
    margin-bottom:20px !important;
    font-weight: 600; 
    font-size: 35px !important;
    color:#e9e9e9; 
}
.icones p {
    font-size: 22px !important;
    font-weight:500 !important;
    color:#e9e9e9;
    line-height:25px;
    margin-top:20px !important;
}

Merci pour votre aide

3 réponses

Vallyan

On peut pas trop voir a quoi ressemble ton problème ... t'as pas un lien ?

Lartak

Bonsoir.
Pourrais-tu nous dire :

  • 1 : À quoi nous sert d'avoir les 241 lignes de la page ?
  • 2 : À quoi nous sert tes 413 lignes de ton fichier CSS ?

  • 3 : Quel est ton problème exactement et donc ta demande ?
    Car tu as bien ceci :

    <script src="js/jquery.sticky.js"></script>
    <script>
    $(document).ready(function(){
    $(".menu").sticky({topSpacing:0});
    });
    </script>

Et ceci :

<div id="menu" class="menu">

      </div>

sur ta page concernant le système de ton menu, mais comment fait-il pour savoir quelles données il doit utiliser pour générer les éléments de ton menu ?
Il faudrait peut-être les lui indiquer, tu ne crois pas ?

Tackacoder

Bonjour,
Pourquoi charges-tu tous tes scripts en bas de page, et celui-ci tout en haut ?
As-tu regarder ta "console" sur le navigateur, voir s'il y a des erreurs.
Est-ce que ton plugin est compatible avec la version de ton jQuery ?