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

تمرین آسان دانلود

413 بازدید

Front-End

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

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

👨‍💻 5 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

افزودن تمرین جدید

4 جواب

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

Rezanajafianez

دانلود

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

نظرتو راجب این جواب بنویس...

ارسال جواب

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

تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

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

4 جواب

ارسال جواب

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

مطالب مرتبط

تشخیص با استفاده از هوش مصنوعی

شمارنده حروف رشته

فروشگاه اینترنتی محصولات فیزیکی

محیط و مساحت دایره

مترجم کدمورس

اندازه ضلع مربع

مصرف سوخت ماشین

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

4 جواب

ارسال جواب

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

مطالب مرتبط

تشخیص با استفاده از هوش مصنوعی

شمارنده حروف رشته

فروشگاه اینترنتی محصولات فیزیکی

محیط و مساحت دایره

مترجم کدمورس

اندازه ضلع مربع

مصرف سوخت ماشین

حساب کاربری

نمیتونم این تمرین رو حل کنم 😞