Barre de navigation réactive

3392 bhanu.sharma55

Ouvrir dans l'éditeur Publiez votre code

Recommandé

5 June 2025

Page d'accueil de Matrice Rouge

10 June 2025

Un code de Mete

HTML

<!DOCTYPE html>

<head>

<title>Responsive_Navbar</title>

</head>

<body>

<nav>

</label>

<ul>

<li><a href="#">About-Us</a></li>

<li><a href="#">Service</a></li>

<li><a href="#">Contact-Us</a></li>

<li><a href="#">Feedback</a></li>

</ul>

</nav>

</body>

</html>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
* {

margin: 0;

padding: 0;

text-decoration: none;

list-style: none;

box-sizing: border-box;

}

body {

font-family: monospace;

}

nav {

background-color: rgb(17, 17, 51);

height: 80px;

width: 100%;

}

.logo {

color: white;

font-size: 35px;

line-height: 80px;

padding: 0 100px;

font-weight: bold;

}

nav ul {

float: right;

margin-right: 20px;

}

nav ul li {

display: inline-block;

line-height: 80px;

margin: 0 5px;

}

nav ul li a {

color: white;

font-size: 17px;

padding: 7px 13px;

border-radius: 3px;

text-transform: uppercase;

}

.active,a:hover {

background: #1B9BFF;

transition: .5s;

}

.checkbtn {

font-size: 30px;

color: white;

float: right;

line-height: 80px;

margin-right: 40px;

cursor: pointer;

display: none;

}

#check {

display: none;

}

.main {

background-image: url("background.jpg");

width: 100%;

height: 89vh;

background-repeat: no-repeat;

background-size: cover;

}

@media (max-width : 950px) {

.logo {

font-size: 30px;

padding-left: 50px;

}

nav ul li a {

font-size: 16px;

}

@media (max-width : 850px) {

.checkbtn {

display: block;

}

ul {

position: fixed;

width: 100%;

height: 100vh;

background: #2C3E50;

top: 80px;

left: -100%;

text-align: center;

transition: all .5s;

}

nav ul li {

display: block;

margin: 50px 0;

line-height: 30px;

}

nav ul li a {

font-size: 20px;

}

a:hover,.active {

background: none;

color: #0083E6;

}

#check:checked ~ ul {

left: 0;

}

Barre de navigation réactive

Recommandé

Un code par alejandrokundrah

Page d'accueil de Matrice Rouge

Un code de Mete

HTML

CSS

JS

Recommandé

Un code par alejandrokundrah

Page d'accueil de Matrice Rouge

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS