28111 sujets

CSS et mise en forme, CSS3

CSS before et after

Bonjour à tous,

Je rencontre un problème avec les pseudo élément before et after que je n'arrive pas afficher.
Je ne comprend pas d'ou peux venir ce problème.
Mon but final serait de mettre le menu hamburger en haut à droite et de l'afficher en cliquant dessus quand le format de l'écran ne permet pas d'afficher le menu normale.
Merci d'avance pour vos réponse.
Voici mon code html et css :
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>Acceuil</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="CSS/style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="shortcut icon" href="Image/favicon.ico" type="image/x-icon">
    <link rel="icon" href="Image/favicon.ico" type="image/x-icon">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.icon').click(function() {
                $('.icon').toggleClass('active');

            })
        })

    </script>

</head>

<body>


    <header>


        <nav class="menu">

            <div class="inner">
                <div class="menu-left">

                    <h1> <a class="logo" href="index.html">Logo</a> </h1>

                </div>

                <div class="menu-right">




                    <a class="link" href="page2.html"> Première  </a>
                    <a class="link" href="page3.html"> Deuxième  </a>
                    <a class="link" href="presentation.html"> Présentation </a>
                    <a class="link" href="js.html"> Carte </a>
                    <a class="link" href="contact.html"> Contact </a>


                </div>

                <div class="icon">
                    <div class="hamburger">
                       
                    </div>


        </nav>

    </header>


</body>

</html>




/* CSS GLOBALE */

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;

}

.inner {
    width: 80%;
    margin: auto;
}

body {
    background-color: #F5F5F5;
}

a:hover {
    color: #D7CCC8;


}

/* HEADER */

.menu {
    width: 100%;
    height: 40px;
    background-color: #263238;
    line-height: 40px;

}

.logo {
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 25px;
    text-decoration: none;
}

.menu-left {
    float: left;
}

.menu-right {
    float: right;


}

.link {
    text-decoration: none;
    color: white;
    padding: 0;
    margin: 0 50px;

}


body {
    margin: 0;
    padding: 0;
    background: #FF5C40;

}

.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    cursor: pointer;


}

.hamburger {
    width: 50px;
    height: 6px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    transition: .5s;
}


.hamburger:before,
.hamburger:after {
    content: " ";
    position: absolute;
    width: 50px;
    height: 6px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    transition: .5s;
    
}

.hamburger:before {
    top: -16px;
}

.hamburger:after {
    top: 16px;
}

.icon.active .hamburger {
    background: rgba(0, 0, 0, 0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.icon.active .hamburger:before {
    top: 0;
    transform: rotate(45deg);
}

.icon.active .hamburger:after {
    top: 0;
    transform: rotate(135deg);
}


/* MEDIA QUERIES */

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

    .menu-right {
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        width: 100%;
        height: auto;
        background: #263238;
        transform: translateY(-100%);
        text-align: center;


    }



}
Je ne vois pas trop l'intérêt d'utiliser JQuery pour cela alors que HTML+CSS suffit


<input type="checkbox" id="burger" />
<label for="burger"><img src="burger.png" alt="menu" /></label>
<nav>
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</nav>




#burger { display: none;}
#burger + label { position: fixed; top: 0; right: 0 }
#burger + label + nav { position: fixed; top: 2rem; left: -100%; width: 100%; }
#burger:checked + label img { transform: rotate(-90deg;) }
#burger:checked + label + nav { left: 0; }


Reste juste à rajouter les transitions pour faire joli.
Sujet clos
Aller à