JSFiddle - React, Tailwind, and code Playground

by Benahmed Taoufiq

HTML

<script src="https://kit.fontawesome.com/a076d05399.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
 <header role="header">
                <nav class="menu" role="navigation">
                        <div class="m-left">
                            <h1 class="logo">
                                BM
                            </h1>
                        </div>
 
 
                    <div class="m-right">
                        <a href="#presentation" class="m-link">Présentation</a>
                        <a href="#formations" class="m-link">Formations</a>
                        <a href="#competences" class="m-link">Compétences</a>
                        <a href="#projetsprofessionnels" class="m-link">Projets professionnels</a>
                        <a href="#projetspersonnels" class="m-link">Projets personnels</a>
                        <a href="#loisirs" class="m-link">Loisirs</a>
                        <a href="main_contact.php" class="m-link">Contact</a>
                    </div>
                    <div class="m-nav-toggle">
                        <span class="m-toggle-icon"></span>
                    </div>
                </nav>
 
        </header>
        <script charset="utf-8">
           $('.m-nav-toggle').click(function(e){
            e.preventDefault();
            console.log("clic .....");//vérifie si tu vois cette ligne dans la console du navigateur !
            $('.m-right').toggleClass('is-open')
        })
        </script>

CSS

/*header*/
 
*{
    margin: 0;
    padding: 0;
}
 
body{
    background: grey;
}
 
.menu{  
    background: red;
    width: 100%;
    height: 66px;
    line-height: 66px;
}
 
.logo{
    margin: 0;
    padding: 0;
    padding-left: 35px;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Kalam', cursive; 
    font-weight: 500;
    font-size: 25px;
}
 
.m-left{
    float: left;
}
 
.m-right{
    float: right;
    padding-right: 35px;
}
 
.m-link{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0;
    margin: 0 5px;
    transition: all 0.3s ease-in-out; 
    border-bottom: 2px solid transparent;
}
 
.m-link:hover{
    padding-bottom: 3px;
    border-color: #FFF;
}
 
.m-nav-toggle{
    width: 40px;
    height: 70px;
 
    display: none;
    align-items: center;
    float: right;
    cursor: pointer;
}
 
span.m-toggle-icon, span.m-toggle-icon:before, span.m-toggle-icon:after{
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: #FFF;
    position: relative;
}
 
span.m-toggle-icon:before{top : 12px;}
span.m-toggle-icon:after{top : -14px;}
 
.m-right.is-open{
    transform: translateX(0);
    min-height:750px;
}
 
@media only screen and (max-width: 1150px){
    .m-right{
        position: absolute;
        top: 66px;
        right: 0;
        width: 300px;
        height: 100%; 
        background: red;
        transform: translateX(100%);
        transition: all 0.3s ease-in-out;
    } 
    .m-link{
        display: block;
        text-align: center;
        padding: 0;
        margin: 0 25px;
        height: 100px;
    }
    .m-nav-toggle{
        display: flex;
    }
}

JavaScript

/*https://www.developpez.net/forums/d2044144/javascript/general-javascript/non-execution-code-javascript-jquery/#post11356112*/