1486 sujets

Web Mobile et responsive web design

Menu responsive disparu

Bonsoir,
Pouvez-vous m'aider à résoudre le problème svp?
Mon menu latéral n'apparaît pas quand le site est hébergé, seulement en local.

Merci de votre aide

    /* Sidebar menu*/
    (function ($) {
        $('#header-icon').click (function(e) {
            e.preventDefault();
            $('body').toggleClass('with--sidebar');
        })
    }) (jQuery);


    /*Scroll to top when arrow up clicked BEGIN*/
    $(window).scroll(function() {
        var height = $(window).scrollTop();
        if (height > 100) {
            $('#back2Top').fadeIn();
        } else {
            $('#back2Top').fadeOut();
        }
    });
    $(document).ready(function() {
        $("#back2Top").click(function(event) {
            event.preventDefault();
            $("html, body").animate({ scrollTop: 0 }, "slow");
            return false;
        });

    });
     /*Scroll to top when arrow up clicked END*/
      /* Deactivate ctrl+ u  for last page*/
    document.onkeydown = function(e) {
        if (e.ctrlKey &&
            (e.keyCode === 85 )) {
            return false;
        }
    };




/*Body
    ------------------------------------*/
    body {
        line-height: 2.5;
        font-family: 'Playfair Display', serif;
        font-size: 12pt;
        background-color:#FFFAFA;
        margin: 0;
        width: 100%;

    }

    a {
        text-decoration: none;
    }


    /*back to top button*/
    #back2Top {
        width: 40px;
        line-height: 40px;
         overflow: hidden;
         z-index: 999;
         display: none;
         cursor: pointer;
        -moz-transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
        position: fixed;
        bottom: 50px;
        right: 21px;
        background-color: #00CED1;
        color: #FFFAFA;
        text-align: center;
        font-size: 30px;
        text-decoration: none;
    }
    #back2Top:hover {
        background-color: #FFFAFA;
        color: #00CED1;
    }

    /* end back to top button */


    /*fin body
    --------------------------------------*/

    /*Titres
    ------------------------------------*/
    h2 {
        color:#00CED1;
        font-size: 18pt;
    }

    h2::after {
        content: url(../Images/divider-h2.png);
        position: relative;
        display: flex;
        justify-content: center;
    }

    h3 {
        color: #696969;
        font-size: 14pt;
        margin: -25px;
        text-align: center;
    }

    h3::after {
        content: url(../Images/divider-h3.png);
    }

    h4 {
        font-size: 13pt;
        color: #696969;
        font-weight: bolder;
    }

    h5 {
        color: #696969;
        line-height: 0;
        font-size: 12pt;
        font-weight: bold;
    }
    /*---------------FIN TITRES------------------------*/


    /* Titre H2 du contenu principal*/
    main h2 {
        font-size: 20pt;
        line-height:1.5;
        padding-top:25px ;
        text-align: center;
    }
    /* fin titres h2 du contenu principal*/


    main ul li {
        list-style-type: none;
    }
    /* fin Main- contenu principal
    ----------------------------------------------*/

    /*------------------ EFFETS SPECIAUX---------------*/
    .text {
        animation-duration: 3s;
        animation-delay: 0.9s;
        animation-iteration-count: infinite;
    }

    .image {
        animation-duration: 3s;
        animation-delay: 1s;
        animation-iteration-count:infinite;
    }

    .comp1 {
        animation-duration: 3s;
        animation-delay: 1s;
        animation-iteration-count:infinite;
    }

    .comp2 {
        animation-duration: 3s;
        animation-delay: 2s;
        animation-iteration-count:infinite;
    }

    .comp3 {
        animation-duration: 3s;
        animation-delay: 3s;
        animation-iteration-count:infinite;
    }

    .frise {
        animation-duration: 3s;
        animation-delay: 1s;
        animation-iteration-count:infinite;
    }

    /*fin effets spéciaux
    ---------------------------------------------*/

    /*---------------------------PAGES-------------------------*/


    /* PAGE ACCEUIL
    --------------------------------------------------------------*/
    .paragraphe-objectif {
        text-align: center;
    }

    #image-profile {
        display: flex;
        justify-content: center;
        padding-bottom: 20px;
    }

    /* FIN PAGE ACCUEIL
    --------------------------------------------------------------------*/



    /* PAGE COMPETENCES ET APTITUDES
    ------------------------------------------------*/
    #positionnement-textes-comp-apt {
        display: flex;
        justify-content: space-between;
        overflow-x: hidden;
        padding-top: 20px;
    }

    .list-comp {
    text-align: center;
    }


    /* FIN PAGE COMPETENCES ET APTITUDES
    ------------------------------------------------------*/


    /* PAGE INFORMATIONS COMPLEMENTAIRES
    ------------------------------------------------*/

    #paragraphe-infos {
        text-align: center;
    }

    /* FIN PAGE INFORMATIONS COMPLEMENTAIRES
    ------------------------------------------------*/

    /* PAGE EXPERIENCES PROFESSIONNELLLES
    -------------------------------------------------*/

    .paraexp {
        font-weight: lighter;

    }


    /* PAGE FORMATIONS
    -------------------------------------------------*/

      /* Styling */
      .timeline {
        padding-top: 20px;
        margin: 4em auto;
        position: relative;
        max-width: 30em;
      }
      .timeline:before {
        background-color:#00CED1;
        content: '';
        margin-left: -1px;
        position: absolute;
        left: 4.5em;
        width: 2px;
        height: 100%;
        top:0;
      }

      .timeline-event {
        position: relative;
      }

      .timeline-event:hover .timeline-event-icon {
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        background-color: #00CED1;
      }
      .timeline-event:hover .timeline-event-thumbnail {
        -moz-box-shadow: inset 40em 0 0 0 #00CED1;
        -webkit-box-shadow: inset 40em 0 0 0 #00CED1;
        box-shadow: inset 40em 0 0 0 #00CED1;
        color: #FFFAFA;
      }

      .timeline-event-copy {
        padding: 2em;
        position: relative;
        left: 2.5em;
        width: 70%;
        top: -3.5em;
      }

      .timeline-event-icon {
        -moz-transition: -moz-transform 0.2s ease-in;
        -o-transition: -o-transform 0.2s ease-in;
        -webkit-transition: -webkit-transform 0.2s ease-in;
        transition: transform 0.2s ease-in;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: black;
        outline: 10px solid rgb(235, 235, 235);
        display: block;
        margin: 0.5em 0.5em 0.5em -0.5em;
        position: absolute;
        left: 2em;
        width: 1em;
        height: 1em;
      }


      .timeline-event-thumbnail {
        -moz-transition: box-shadow 0.5s ease-in 0.3s;
        -o-transition: box-shadow 0.5s ease-in 0.3s;
        -webkit-transition: box-shadow 0.5s ease-in;
        -webkit-transition-delay: 0.1s;
        transition: box-shadow 0.2s ease-in 0.3s;
        color:black;
        font-weight: bold;
        background-color: rgb(235, 235, 235);
        display: inline-block;
        margin-bottom: 1.2em;
        padding: 0.25em 1em 0.2em 1em;
      }

    /* FIN PAGE FORMATIONS
    ------------------------------------------------*/



    /*---------------------HEADER----------------------------------*/
    header {
        background-color: #00CED1;
        height: 120px;
        padding-top: 30px;
        position: relative;
    }


    .header-logo {
        display:block;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        width: 530px;
    }

    /* FIN HEADER
    --------------------------------------------*/



    /*Menu
    -----------------------------------------------*/
    nav {
        font-size: 12pt;
        font-weight: 900;
        padding-bottom: 8px;
        position: relative;
    }

    nav ul {
        display: flex;
        align-content: center;
        justify-content: space-around;
        list-style-type: none;
        position: relative;
    }

    nav li {
        position: relative;
        width: 235px;
    }

    nav a {
        display: flex;
        justify-content: center;
        height: 40px;
        border-radius: 8px;
        text-decoration: none;
        color:rgb(0, 0, 0);
        background-color: rgb(235, 235, 235);
    }

    nav a:hover {
        color: #00CED1;
        background-color:#FFFAFA;
    }

    /* fin menu
    -------------------------------------------------*/


    /*------------------------FOOTER-------------------*/


    .footer-repositionnement {
        position: fixed;
        width: 100%;
        bottom: 0;
        background-color: rgb(235, 235, 235);
    }

    footer {
        background-color: rgb(235, 235, 235);
        text-align: center;
        line-height: 1.5;
        overflow-x:hidden ;
        bottom: 0 !important;
    }

    footer a {
        text-decoration: none;
        color: black;
    }


    /* FIN FOOTER
    -------------------------------------------------------*/


    /*------------------SITE RESPONSIVE---------------------------*/
    @media screen and (max-width: 750px) {
        .header-logo {
            content: url(../Images/Logo/mylogo.png);
            width: 220px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    }

    @media only screen and (max-width: 1270px) {

        /* HAMBURGER ICONE*/

        .header-icon {
        position: absolute;
        width: 24px;
        margin: 3px 20px;
        height: 4px;
        background: #000;
        }

        .header-icon::before, .header-icon::after {
        content: "";
        display: block;
        }

        .header-icon, .header-icon::before, .header-icon::after {
        position: absolute;
        width: 24px;
        height: 4px;
        background: #000;
        }

        .header-icon::before {
        margin-top: -8px;
        }

        .header-icon::after {
        margin-top: 8px;
        }
        /* END HAMBURGER ICONE*/
        .header-logo {
           padding-top: 25px;
        }

        /*POSITIONNEMENT FOOTER FORCE POUR  PAGE COMPETENCES*/


        #footer-position-page-comp {
            position: static;
        }

        /* DIVIDER*/

        h3::after {
            content: url(../Images/divider-h3-300px.png);
            position: relative;
            display: flex;
            justify-content: center;
        }

        h2::after {
            content: url(../Images/divider-h2-300px.png);
            position: relative;
            display: flex;
            justify-content: center;
        }
        /* END DIVIDER*/


        h2 {
            font-size: 16pt !important;
        }
        h3 {
            padding: 30px;
        }

        /* MENU*/

        .menu {
            position: absolute;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            right: 0;
            width: 270px;
            top: 0;
            background: #00c4c7;
            transform: translateX(270px);
        }

        nav ul  {
            display: flex;
            flex-direction: column;
        }

        nav li {
            width: 235px;
            right: 22px;
            height: 60px;
            line-height: 60px;
        }

        nav a {
            display: flex;
            align-items: center;
        }

        /* MENU LATERAL*/

        .with--sidebar {
            transition-duration: 0.6s;
            transform: translateX(270px);
            overflow: hidden;
            height: 100%;
            position: fixed;
        }

        /* END MENU */


        /* FLECHE VERS LE HAUT*/

        #back2Top {
            right: 30px;
            bottom: 40px;
        }

        /*TEXTES PAGES COMPETENCES ET APTITUDES*/

        #positionnement-textes-comp-apt {
            display:block;
        }


        /*Pour ne pas que le contenu bouge dans la version mobile*/

        #position_contenu_mobile {
            overflow: hidden;
            height: 100%;
        }

        body {
            width: 100%;
            margin: 0;
        }
    }





<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>George Mc Fly- Traveller</title>
<link rel="icon" type="image/png" sizes="32x32" href="../Favicon/favicon-32x32.png">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./../js/JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="../style/style.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body class="container"  id="top" onselectstart="return false" oncontextmenu="return false" ondragstart="return false" onMouseOver="window.status='Il est strictement interdit de copier les images sur ce site'; return true;">
<div id="position_contenu_mobile">
<header class="header">
<a href="#" class="header-icon" id="header-icon"></a>
<a href="index.html" class="header-logo"><img src="../Images/Logo/mylogo-535px.png" alt="logo"></a>
<nav class="menu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="competences_et_aptitudes.html">Compétences et aptitudes</a></li>
<li><a href="experiences_professionnelles.html">Expériences professionnelles</a></li>
<li><a href="formations.html">Formations</a></li>
<li><a href="informations_complementaires.html">Informations complémentaires</a></li>
</ul>
</nav>
</header>
<main class="contenuPrincipal">
<div class="text; animated slideInLeft delay-0.9s" id="paragraphe-infos">
<h2>Informations complémentaires</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</main>
<footer id="footer-repositionnement">
<div class="footer-repositionnement">
<h2>Informations de contact</h2>
<a href="tel:+330102030405">+33(0)1.02.03.04.05</a><br>
<a href="mailto:myemail@gmail.com" target="_blank">myemail@gmail.com</a>
<p><small>2020 <a href="#" target="_blank">Lorem Ipsum</a> | Tous droits réservés</small></p>
</div>
</footer>
<!--désactivation clic droit-->
<script>
$(document).bind("contextmenu",function()
{
return false;
});
</script>
</div>
</body>
</html>
Modérateur
Et l'eau,

Le chemin du fichier ? (pas de majuscule et le mieux étant un chemin absolu. 

<script src="./../js/JavaScript.js"></script>
Sujet clos
Aller à