Barre de navigation réactive

3197 bhanu.sharma55

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 April 2025

Champ de saisie simple

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 de Metehan

Un code par webleb

Champ de saisie simple

HTML

CSS

JS

Recommandé

Un code de Metehan

Un code par webleb

Champ de saisie simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS