با HTML و CSS نویگیشن باری بسازید که ریسپانسیو باشد و در دستگاه هایی با عرض مختلف بدرستی نمایش داده شود.
نویگیشن بار نواری است که معمولا در بالای صفحه سایت قرار میگیرد و لینک صفحات مختلف در آن قرار دارد
Front-End
تمرین جدید
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>نویگیشن بار ریسپانسیو</title>
</head>
<body>
<nav class="navbar">
<div class="logo">لوگو</div>
<ul class="nav-links">
<li><a href="#">خانه</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px 20px;
}
.logo {
color: white;
font-size: 24px;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
margin: 0 15px;
}
.nav-links a {
text-decoration: none;
color: white;
transition: color 0.3s;
}
.nav-links a:hover {
color: #f0a500;
}
.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
height: 3px;
width: 25px;
background-color: white;
margin: 3px 0;
}
/* Media Queries */
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
width: 100%;
position: absolute;
top: 60px;
left: 0;
background-color: #333;
}
.nav-links.active {
display: flex;
}
.menu-toggle {
display: flex;
}
}
JavaScript (script.js)
javascript
const mobileMenu = document.getElementById('mobile-menu');
const navLinks = document.querySelector('.nav-links');
mobileMenu.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
JavaScript
HTML & CSS
تحلیل جواب با AI
Python - پایتون
PHP - پی اچ پی
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نویگیشن بار ریسپانسیو</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
background-color: #333;
padding: 10px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 14px 20px;
}
.navbar a:hover {
background-color: #575757;
}
@media (max-width: 600px) {
.navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">خانه</a>
<a href="#services">خدمات</a>
<a href="#about">درباره ما</a>
<a href="#contact">تماس با ما</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نویگیشن بار</title>
</head>
<style>
body{
padding: 0;
margin: 0;
}
ul{
padding: 0;
margin: 0;
}
nav{
background-color: rgb(13, 137, 110);
overflow: hidden;
}
li{
display: inline-block;
}
ul{
color: rgb(153, 7, 7);
text-align: center;
}
li a{
padding: 10px;
display: inline-block;
background-color: rgb(10, 178, 158);
text-decoration: none;
color: rgb(0, 0, 0);
width: 100%;
text-align: justify;
transition: 0.5s;
}
.left{
float: left;
}
.right{
float: right;
}
li:hover a{
background-color: rgb(11, 11, 11);
color: rgb(10, 178, 158); ;
}
@media (max-width:300px){
li{
clear: both;
width: 100%;
}
}
.active a{
background-color: rgb(40, 233, 152);
}
</style>
<body>
<nav>
<ul>
<li class="left active"><a href="#">Home</a></li>
<li class="left"><a href="#">About</a></li>
<li class="left"><a href="#">Index</a></li>
<li class="right"><a href="#">LogOut</a></li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
}
nav {
background-color: rgb(0, 123, 255);
height: 35px;
}
li a {
text-decoration: none;
color: beige;
background-color: rgb(0, 145, 255);
display: inline-block;
padding: 10px;
font-weight: bold;
}
li {
display: inline;
}
ul {
margin: 0px;
padding: 0px;
background-color: rgb(0, 145, 255);
}
#r {
float: right;
}
@media (max-width:400px) {
li a {
clear: both;
width: 100%;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#" id="r">Support</a></li>
</nav>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> نویگیشن بار</title>
<style>
:root{
--a:rgb(255, 196, 0);
--b:rgb(167, 129, 6);
--c:rgb(255, 236, 62);
}
body{
padding: 0;
margin: 0;
}
ul{
padding: 0;
margin: 0;
}
li{
display: inline-block;
}
li a{
padding: 8px;
display: inline-block;
background-color: var(--a);
text-decoration: none;
}
li:hover a{
color: #ffffff;
background-color: var(--b);
}
nav{
background-color: bisque;
overflow: hidden;
}
.right{
float: right;
}
.left{
float: left;
}
.active a{
background-color: var(--c);
}
@media(max-width:360px){
li{
clear: both;
width: 100%;
}
li a{
width: 100%;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li class="left active"><a href="#">awega</a></li>
<li class="left"><a href="#">bwega</a></li>
<li class="left"><a href="#">cwega</a></li>
<li class="right"><a href="#">dwega</a></li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!------------css_icon------------>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-------------------------------->
<title>navbar</title>
<style>
@media(max-width: 992px )
{
.navtop2 > *
{
display: none;
}
}
body{
height: 5000px;
margin: 0;
padding: 0;
background: #262f36;}
.navtop1{
position: sticky;
height: 50px;
top: 0;
background: #262f36;
border-bottom:1px solid #aaabb8;}
.navtop2{
width: 100%;
height: 200px;
box-sizing: border-box;
align-content: center;
text-align: center;
background: #12171b;}
.logo{
float: left;
padding: 9px 5px;
margin: 5px;
color: #00ff0d;
border-radius: 50px;}
.Contact-us{
float: right;
margin: 10px;}
.Contact-us .icon{
text-decoration: none;
margin: 5px;
color: #fdf6f6;}
#navbottom{
display: flex;
position: fixed;
align-items: center;
justify-content: space-around;
text-align: center;
height: 70px;
width: 100%;
bottom: 0;
background: #262f36;
outline: 4px solid #00ff0d;
box-shadow: inset 0 0 10px #1f262c;}
#navbottom .icon{
display: flex;
flex-direction: column;
justify-content: end;
box-sizing: border-box;
font-size: x-large;
text-decoration: none;
width: 100%;
height: 80%;
border-radius: 10px;
color: #aaabb8;}
#navbottom .text{
font-size: xx-small;
margin-bottom: 5px;}
#navbottom .icon:focus{
height: 100%;
box-sizing: border-box;
box-shadow: inset 0 0 8px #0e1214;
border: 3px solid #272f36;
background-color: #262f36; text-shadow: 0px 0px 10px white;
color: white;}
/*+++++++++++___for_desktop___++++++++++++++++*/
@media (min-width: 992px)
{
body
{
height: 100vh;
}
#navbottom
{
display: none;
}
.navtop1
{
position: relative;
float: right;
height:13vh;
width: 100%;
padding: 0;
margin: 0;
margin-top: 0%;
box-sizing: border-box;
border-bottom: none;
background: #12171b;
border-bottom: 2px inset solid #00e70c;
}
.navtop2
{
z-index: 2;
position: absolute;
right: 0;
height: 8.5vh;
width: 90vw;
margin: 0;
padding: 0;
margin-top: 4.5vh;
box-sizing: border-box;
background: #0c0c0c;
}
.navtop1 .icon
{
font-size: 1vw;
margin-right: 50px;
color: #00ff0d;
}
.navtop1 .Contact-us
{
margin-top: 0.5vh;
}
.logo
{
z-index: 999;
position: absolute;
align-content: center;
text-align: center;
height: 4vw;
width: 4vw;
font-size: 2vw;
background: none;
color: #00ff0d;
text-shadow: 0px 0px 5px #00ff0d;
}
.navtop2>:nth-child(2)
{
z-index: 2;
position: absolute;
left: calc(-4vw + -2px);
top: 0;
width: 6vw;
height: 100%;
margin: 0;
transform: skewX(-20deg);
box-sizing: border-box;
border-top-left-radius: 20px ;
border-right: 2px solid black;
box-shadow: 2px 0 0px #00ff0d;
background: #00ff0d;
}
.navtop2>:nth-child(3)
{
z-index: 2;
position: absolute;
top: 0;
left: -10vw;
width: 6vw;
height: 100%;
margin: 0;
transform: skewX(-20deg);
box-sizing: border-box;
border-bottom-right-radius: 20px ;
background: #12171b;
}
.navtop2>:nth-child(4)
{
z-index: 1;
position: absolute;
bottom: 0;
left: -10vw;
width: 6vw;
height: 30%;
margin: 0;
box-sizing: border-box;
background: #00ff0d;
}
.navtop2 a
{
float: right;
margin: 0;
margin-right: 30px;
font-size: 6vh;
vertical-align: middle;
text-decoration: none;
border-radius: 50%;
box-sizing: border-box;
color: #fdf6f6;
}
input[type="text"]
{
position: absolute;
right: 47%;
height: 50%;
width: 15%;
margin-top:4px ;
border-radius: 20px;
}
}
</style>
</head>
<body>
<!-----------NAVTOP_1_------------>
<section class="navtop1">
<div class="logo">logo</div>
<div class="Contact-us">
<a href="#" class="fab fa-instagram icon"> </a>
<a href="#" class="fab fa-telegram-plane icon"></a>
<a href="#" class="fab fa-whatsapp icon"> </a>
<a href="#" class="fas fa-phone icon"> </a>
<a href="#" class="fas fa-envelope icon"> </a>
</div>
</section>
<!-----------NAVTOP_2_------------>
<section class="navtop2">
<div></div>
<div></div>
<div></div>
<div></div>
<a href="#" class="fas fa-user icon"> </a>
<a href="#" class="fas fa-shopping-cart icon"> </a>
<a href="#" class="fas fa-list icon"> </a>
<input type="text" placeholder="search...">
</section>
<!-----------NAVTOP_3_------------>
<section class="navtop3"></section>
<!-----------NAVbottom------------>
<section id="navbottom">
<a href="#" class="fas fa-user icon"> <P class="text">profile </P> </a>
<a href="#" class="fas fa-shopping-cart icon"> <p class="text">shopping cart</p> </a>
<a href="#" class="fas fa-search icon"> <p class="text">search </p> </a>
<a href="#" class="fas fa-list icon"> <p class="text">Category </p> </a>
<a href="#" class="fas fa-home icon"> <p class="text">home </p> </a>
</section>
</body>
</html>
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام