کد ایجاد منو ابشاری زیبا

کد ایجاد منو ابشاری زیبا این کد یکی از کدهای زیبا برای راه اندازی منو ابشاری خودکار بازشو در سایت میباشد که از استایل زیبایی برخوردار بوده و حجم بسیار کمی دارد و سرعت لود بالایی دارد.

شما میتوانید از ادامه مطلب کد را کپی کرده و در سایت و یا بلاگ خود قرار دهید

کد ایجاد منو ابشاری زیبا
کد ایجاد منو ابشاری زیبا

دمو کد

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>
<div dir="rtl"/>
<center>
<h2>منو ابشاری</h2>


<div class="dropdown">
  <button class="dropbtn">باز کردن منو</button>
  <div class="dropdown-content">
    <a href="https://codebazan.ir/">کدبازان</a>
    <a href="https://codebazan.ir/Tools/Tools%20preview/"> ابزار پیش نمایش کدبازان</a>
    <a href="http://porseshkade.codebazan.ir/">پرسشکده کدبازان</a>
  </div>
</div><div style='display:none'><h1><a title="codebazan" href="https://codebazan.ir">codebazan</a></h1></div>



</body>
</html>

برای تست کد فوق میتوانید از ابزار پیش نمایش کدبازان استفاده نمایید

2 Comments

    1. سلام
      اره درسته
      من فقط ترجمش کردم
      در پست اول سایتم ی چیزایی گفتم بخونی بد نیست
      ممنونم از اینکه بازدید کننده سایت ما هستی

      admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *