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

تمرین آسان 1004 visibility link download

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

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

reply 6 

<!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');
});
Mma123 JavaScript 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>
    <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>
Hadi.jalooli HTML & CSS 
<!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>
Programmer HTML & CSS 
<!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>
F.sarli HTML & CSS 
<!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>
Unun..ali..nunu HTML & CSS

reply ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • در متن جواب اطلاعات شخصی شامل ایمیل و شماره موبایل و آی دی و... ننویس
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن