حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
همهٔ تمرین‌ها

ساخت نویگیشن بار

تمرین آسان 1224 visibility link download flag

با HTML و CSS نویگیشن باری بسازید که ریسپانسیو باشد و در دستگاه هایی با عرض مختلف بدرستی نمایش داده شود.

نویگیشن بار نواری است که معمولا در بالای صفحه سایت قرار میگیرد و لینک صفحات مختلف در آن قرار دارد

👨‍💻 16 ساعت قبل User 4011 این تمرین رو مشاهده کرد
👨‍💻 1 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد
🔥 16 ساعت قبل User 4011 جواب جدیدی برای این تمرین ارسال کرد

پاسخ‌ها 11

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

      header{
        background-color: #b3b3b3;
      }

      header nav{
        display: flex;
        direction: ltr;
      }

      .nav-li{
        display: flex;
        flex-wrap: wrap;
        border: solid 1px #000000;
        padding:5px;
        margin: 5px;
        flex-basis: 15%;
        justify-content: center;
      }
      .nav-li:hover{
        background-color: #f0f8ff;
      }

      li a{
        display:inline-block;
        text-decoration: none;
        color: #4f4f4f;

      }
      li a:hover{
        font-weight: bold;
      }


      .nav-li:first-child {
      margin-right: auto;
      }

      @media(max-width: 480px){
        nav{
          flex-direction:column;
        }

        .nav-li:first-child{
          margin-right: 0;
        }
      }


    </style>
</head>

<body>
  <header>
    <nav>
      <li class="nav-li" >
        <a href="#home">
          home
        </a>
      </li>

      <li class="nav-li">
        <a href="#about">
          about
        </a>
      </li>

      <li class="nav-li">
        <a href="#log in">
          log in
        </a>
      </li>

      <li class="nav-li">
        <a href="#log out">
          log out
        </a>
      </li>
    </nav>
  </header>

</body>
</html>
<!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');
});
<!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>
پاسخ هوش مصنوعی Ai HTML & CSS
<!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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            font-family: Arial, sans-serif;
        }

        .navbar{
            background-color: crimson;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .nav-toggle{
            display: none;
        }

        .nav-toggle-btn{
            display: none;
            color: white;
            font-size: 28px;
            padding: 10px 15px;
            cursor: pointer;
            user-select: none;
        }

        .nav-menu{
            display: flex;
            list-style: none;
            width: 100%;
            align-items: center;
        }

        .nav-menu li a{
            display: block;
            text-decoration: none;
            color: white;
            padding: 14px 18px;
            background-color: crimson;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .nav-menu li a:hover{
            background-color: rgb(195, 180, 183);
            color: crimson;
        }

        .nav-menu .right{
            margin-left: auto;
        }

        @media (max-width: 768px){

            .nav-toggle-btn{
                display: block;
            }

            .nav-menu{
                display: none;
                flex-direction: column;
                width: 100%;
            }

            .nav-toggle:checked ~ .nav-menu{
                display: flex;
            }

            .nav-menu li{
                width: 100%;
            }

            .nav-menu .right{
                margin-left: 0;
            }

            .nav-menu li a{
                text-align: center;
                border-top: 1px solid rgba(255, 255, 255, 0.2);
            }
        }
    </style>
</head>

<body>

    <nav class="navbar">
        <input type="checkbox" id="nav-toggle" class="nav-toggle">
        <label for="nav-toggle" class="nav-toggle-btn">☰</label>

        <ul class="nav-menu">
            <li class="left"><a href="#">Home</a></li>
            <li class="left"><a href="#">Index</a></li>
            <li class="left"><a href="#">About</a></li>
            <li class="right"><a href="#">Login</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" />
    <title>Navigation bar</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      header {
        background-color: #730808;
      }

      nav ul {
        position: relative;
        display: flex;
        list-style: none;
        gap: 20px;
        padding: 15px 20px;
        justify-content: center;
        align-items: center;
      }

      nav ul li:last-child {
        position: absolute;
        right: 20px;
        background-color: #0a0a4d;
        padding: 6px 14px;
        border-radius: 4px;
      }

      nav a {
        text-decoration: none;
        color: #e9e98b;
        font-family: sans-serif;
        font-size: 1rem;
      }

      nav a:hover {
        color: #ffcccf;
      }

      @media (max-width: 650px) {
        nav ul {
          flex-direction: column;
          gap: 15px;
        }

        nav ul li:last-child {
          position: static;
          margin-top: 10px;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">ContactUs</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </nav>
    </header>
  </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 name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NavigationBar</title>
  <style>
    body{
      padding: 0;
      margin: 0;
    }
    nav{
      background-color: rgb(82, 163, 213);
      height: 50px;


    }
    ul{
      margin: 0;
      padding: 0;
      list-style-type: none;

    }
    li {
      display: inline;

    }
    li a{
      background-color: rgba(5, 5, 218, 0.364);
      text-decoration: none;
      display: inline-block;
      padding: 16px;
      color: white;
      font-weight: bold;
    }
    .call{
      float: right;
    }
    li a:hover{
      background-color: rgb(56, 61, 115);
      color: white;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#" class="call">Call Us</a></li>
    </ul>
  </nav>

</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>

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×
بستن