با HTML و CSS نویگیشن باری بسازید که ریسپانسیو باشد و در دستگاه هایی با عرض مختلف بدرستی نمایش داده شود.
نویگیشن بار نواری است که معمولا در بالای صفحه سایت قرار میگیرد و لینک صفحات مختلف در آن قرار دارد
<!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');
});
دانلود
تحلیل جواب با 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="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation Bar</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: IRANSans, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
body {
background: #0d0f12;
color: #eee;
}
nav {
width: 100%;
position: fixed;
top: 0;
right: 0;
z-index: 1000;
background: rgba(20, 20, 25, 0.7);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 15px 40px;
display: flex;
justify-content: space-between;
align-items: center;
transition: .4s ease;
}
nav.scrolled {
background: rgba(15, 17, 22, 0.95);
padding: 10px 40px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.logo {
font-size: 1.7rem;
font-weight: 900;
background: linear-gradient(135deg, #00d4ff, #09ffc4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 1px;
user-select: none;
}
.menu {
display: flex;
gap: 35px;
align-items: center;
}
.menu>li {
list-style: none;
position: relative;
}
.menu>li>a {
text-decoration: none;
color: #ccc;
font-size: 1.05rem;
font-weight: 500;
padding: 8px 5px;
position: relative;
transition: color .3s ease;
user-select: none;
}
.menu>li>a::after {
content: '';
position: absolute;
bottom: -3px;
right: 0;
width: 0;
height: 2px;
background: #00eaff;
transition: width .3s ease;
}
.menu>li>a:hover {
color: #00eaff;
}
.menu>li>a:hover::after {
width: 100%;
left: 0;
right: auto;
}
.dropdown {
position: absolute;
top: 48px;
right: 0;
width: 230px;
background: rgba(26, 29, 34, 0.9);
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
padding: 12px 0;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: all .35s cubic-bezier(0.25, 0.8, 0.25, 1);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.dropdown.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.dropdown a {
display: block;
padding: 12px 20px;
color: #bbb;
text-decoration: none;
transition: .3s ease;
font-size: .95rem;
user-select: none;
}
.dropdown a:hover {
background: rgba(40, 45, 52, 0.5);
color: #00eaff;
padding-right: 30px;
}
.sub {
position: relative;
}
.sub-menu {
position: absolute;
top: 0;
right: 230px;
width: 210px;
background: rgba(26, 29, 34, 0.9);
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.05);
opacity: 0;
transform: translateX(-20px);
pointer-events: none;
transition: .35s cubic-bezier(0.25, 0.8, 0.25, 1);
padding: 10px 0;
}
.sub-menu.is-open {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.sub-menu a {
display: block;
padding: 12px 20px;
color: #bbb;
text-decoration: none;
font-size: .95rem;
transition: .3s ease;
user-select: none;
}
.sub-menu a:hover {
background: rgba(40, 45, 52, 0.5);
color: #00eaff;
padding-right: 25px;
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 10px;
margin-left: -10px;
user-select: none;
}
.hamburger span {
width: 28px;
height: 3px;
background: #eee;
border-radius: 3px;
transition: .4s ease;
}
@media (max-width: 900px) {
.menu {
position: fixed;
top: 0;
right: -300px;
width: 280px;
height: 100vh;
background: #14161b;
flex-direction: column;
padding-top: 100px;
transition: .5s cubic-bezier(0.25, 0.8, 0.25, 1);
gap: 25px;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.menu.active {
right: 0;
}
.menu>li>a {
color: #ddd;
font-size: 1.1rem;
padding: 10px 5px;
}
.menu>li>a::after {
display: none;
}
.dropdown,
.sub-menu {
position: static;
width: auto;
transform: none !important;
opacity: 1;
pointer-events: auto;
background: rgba(26, 29, 34, 0.95);
box-shadow: none;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
margin: 8px 18px;
padding: 8px 0;
display: none;
}
.dropdown.is-open,
.sub-menu.is-open {
display: block;
}
.hamburger {
display: flex;
}
}
</style>
</head>
<body>
<nav id="nav">
<div class="logo">Nav bar</div>
<ul class="menu" id="menu">
<li><a href="#">خانه</a></li>
<li class="has-dropdown">
<a href="#">خدمات ▾</a>
<div class="dropdown" data-dropdown>
<a href="#">طراحی وب</a>
<a href="#" class="sub-trigger">دیجیتال مارکتینگ</a>
<div class="sub" style="position:relative;">
<a href="#" class="sub-trigger">سئو ◂</a>
<div class="sub-menu" data-sub>
<a href="#">سئوی فنی</a>
<a href="#">آن‌پیج</a>
<a href="#">آف‌پیج</a>
</div>
</div>
<a href="#">مشاوره</a>
</div>
</li>
<li><a href="#">نمونه کارها</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس</a></li>
</ul>
<div class="hamburger" id="hamburger">
<span></span><span></span><span></span>
</div>
</nav>
<script>
const nav = document.getElementById('nav');
const hamburger = document.getElementById('hamburger');
const menu = document.getElementById('menu');
window.addEventListener('scroll', () => {
nav.classList.toggle('scrolled', window.scrollY > 50);
});
hamburger.addEventListener('click', () => {
menu.classList.toggle('active');
});
document.addEventListener('click', (e) => {
const clickedInside = menu.contains(e.target) || hamburger.contains(e.target);
if (!clickedInside && menu.classList.contains('active')) {
menu.classList.remove('active');
}
});
const CLOSE_DELAY = 120;
const dropdownParents = document.querySelectorAll('.has-dropdown');
dropdownParents.forEach(parent => {
const dropdown = parent.querySelector('[data-dropdown]');
if (!dropdown) return;
let closeTimer = null;
const open = () => {
if (closeTimer) clearTimeout(closeTimer);
dropdown.classList.add('is-open');
};
const scheduleClose = () => {
if (closeTimer) clearTimeout(closeTimer);
closeTimer = setTimeout(() => {
const hovering =
parent.matches(':hover') || dropdown.matches(':hover');
if (!hovering) dropdown.classList.remove('is-open');
}, CLOSE_DELAY);
};
parent.addEventListener('mouseenter', open);
parent.addEventListener('mouseleave', scheduleClose);
dropdown.addEventListener('mouseenter', () => {
if (closeTimer) clearTimeout(closeTimer);
dropdown.classList.add('is-open');
});
dropdown.addEventListener('mouseleave', scheduleClose);
});
const subContainers = document.querySelectorAll('.sub');
subContainers.forEach(sub => {
const subTrigger = sub.querySelector('.sub-trigger');
const subMenu = sub.querySelector('[data-sub]');
if (!subTrigger || !subMenu) return;
let closeTimer = null;
const open = () => {
if (closeTimer) clearTimeout(closeTimer);
subMenu.classList.add('is-open');
};
const scheduleClose = () => {
if (closeTimer) clearTimeout(closeTimer);
closeTimer = setTimeout(() => {
const hovering = sub.matches(':hover') || subMenu.matches(':hover');
if (!hovering) subMenu.classList.remove('is-open');
}, CLOSE_DELAY);
};
subTrigger.addEventListener('mouseenter', open);
sub.addEventListener('mouseenter', open);
subTrigger.addEventListener('mouseleave', scheduleClose);
subMenu.addEventListener('mouseenter', open);
subMenu.addEventListener('mouseleave', scheduleClose);
});
document.addEventListener('mousemove', (e) => {
const withinNav = nav.contains(e.target);
if (!withinNav) {
document.querySelectorAll('.dropdown.is-open, .sub-menu.is-open')
.forEach(el => el.classList.remove('is-open'));
}
});
</script>
</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>
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام