الگو:منوی مناطق: تفاوت میان نسخه‌ها

از دانشنامه ملل
(صفحه‌ای تازه حاوی «.navbar { overflow: hidden; background-color: blue; } .navbar a { float: right; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .subnav { float: right; overflow: hidden; } .subnav .subnavbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hov...» ایجاد کرد)
 
بدون خلاصۀ ویرایش
 
(۳۱ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
.navbar {
<html>
  overflow: hidden;
  background-color: blue;
}
 
.navbar a {
  float: right;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
.subnav {
  float: right;
  overflow: hidden;
}
 
.subnav .subnavbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
 
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: blue;
}
 
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: blue;
  width: 100%;
  z-index: 1;
}
 
.subnav-content a {
  float: right;
  color: white;
  text-decoration: none;
}
 
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}
 
.subnav:hover .subnav-content {
  display: block;
}
</style>
</head>
<body>
 
<div class="navbar">
<div class="navbar">
  <a href="#home">مناطق و کشورها</a>
   <div class="subnav">
   <div class="subnav">
     <button class="subnavbtn">آسیای شرقی <i class="fa fa-caret-down"></i></button>
     <button class="subnavbtn">آسیا <i class="fa fa-caret-down"></i></button>
     <div class="subnav-content">
     <div class="subnav-content">
      <a href="#company">کشور اول</a>
<div class="dropdown">
      <a href="#team">کشور دوم</a>
  <button class="dropbtn">آسیای جنوبی</button>
      <a href="#careers">کشور سوم</a>
  <div class="dropdown-content">
    <a href="https://dmelal.ir/index.php?title=%D8%A7%D9%81%D8%BA%D8%A7%D9%86%D8%B3%D8%AA%D8%A7%D9%86">افغانستان</a>
    <a href="https://dmelal.ir/index.php?title=%D8%A8%D9%86%DA%AF%D9%84%D8%A7%D8%AF%D8%B4">بنگلادش</a>
    <a href="https://dmelal.ir/index.php?title=%D8%B3%D8%B1%DB%8C%D9%84%D8%A7%D9%86%DA%A9%D8%A7">سریلانکا</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">آسیای مرکزی و غربی</button>
  <div class="dropdown-content">
    <a href="https://dmelal.ir/index.php?title=%D8%A7%D8%B1%D8%AF%D9%86">اردن</a>
        <a style="font-size:14px;" href="https://dmelal.ir/index.php?title=%D8%A7%D9%85%D8%A7%D8%B1%D8%A7%D8%AA_%D9%85%D8%AA%D8%AD%D8%AF%D9%87_%D8%B9%D8%B1%D8%A8%DB%8C">امارات متحده عربی</a>
        <a href="https://dmelal.ir/index.php?title=%D8%AA%D8%A7%D8%AC%DB%8C%DA%A9%D8%B3%D8%AA%D8%A7%D9%86">تاجیکستان</a>
                <a href="https://dmelal.ir/index.php?title=%D8%B3%D9%88%D8%B1%DB%8C%D9%87">سوریه</a>
    <a href="https://dmelal.ir/index.php?title=%D9%82%D8%B2%D8%A7%D9%82%D8%B3%D8%AA%D8%A7%D9%86">قزاقستان</a>
    <a href="https://dmelal.ir/index.php?title=%D9%82%D8%B7%D8%B1">قطـــــــــــر</a>
    <a href="https://dmelal.ir/index.php?title=%DA%AF%D8%B1%D8%AC%D8%B3%D8%AA%D8%A7%D9%86">گرجستان</a>
        <a href="https://dmelal.ir/index.php?title=%D9%84%D8%A8%D9%86%D8%A7%D9%86">لبنــــــــــان</a>
 
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">آسیای شرقی و جنوب شرقی</button>
  <div class="dropdown-content">
    <a href="https://dmelal.ir/index.php?title=%D8%AA%D8%A7%DB%8C%D9%84%D9%86%D8%AF">تایلــــند</a>
        <a href="https://dmelal.ir/index.php?title=%DA%86%DB%8C%D9%86">چیــــــــن</a>
    <a href="https://dmelal.ir/index.php?title=%DA%98%D8%A7%D9%BE%D9%86">ژاپــــــن</a>
  </div>
</div>
     </div>
     </div>
   </div>  
   </div>  
   <div class="subnav">
   <div class="subnav">
     <button class="subnavbtn">شبه قاره <i class="fa fa-caret-down"></i></button>
     <button class="subnavbtn">آفریقا <i class="fa fa-caret-down"></i></button>
     <div class="subnav-content">
     <div class="subnav-content">
      <a href="#bring">کشور اول</a>
<div class="dropdown">
      <a href="#deliver">کشور دوم</a>
  <button class="dropbtn">شمال و غرب آفریقا</button>
      <a href="#package">کشور سوم</a>
  <div class="dropdown-content">
      <a href="#express">کشور چهارم</a>
    <a href="https://dmelal.ir/index.php?title=%D8%AA%D9%88%D9%86%D8%B3">تونس</a>
        <a href="https://dmelal.ir/index.php?title=%D8%B3%D8%A7%D8%AD%D9%84_%D8%B9%D8%A7%D8%AC">ساحل عاج</a>
                <a href="https://dmelal.ir/index.php?title=%D8%B3%D9%86%DA%AF%D8%A7%D9%84">سنگال</a>
    <a href="https://dmelal.ir/index.php?title=%D8%B3%D9%88%D8%AF%D8%A7%D9%86">سودان</a>
    <a href="https://dmelal.ir/index.php?title=%D8%B3%DB%8C%D8%B1%D8%A7%D9%84%D8%A6%D9%88%D9%86">سیرالئون</a>
        <a href="https://dmelal.ir/index.php?title=%D9%85%D8%A7%D9%84%DB%8C">مالـــــــی</a>
                <a href="https://dmelal.ir/index.php?title=%D9%85%D8%B5%D8%B1">مصـــــــــر</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">آفریقای شرقی</button>
  <div class="dropdown-content">
    <a href="https://dmelal.ir/index.php?title=%D8%A7%D8%AA%DB%8C%D9%88%D9%BE%DB%8C">اتیوپی</a>
    <a href="https://dmelal.ir/index.php?title=%D8%B2%D9%8A%D9%85%D8%A8%D8%A7%D8%A8%D9%88%D9%87">زیمبابوه</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">آفریقای مرکزی و جنوبی</button>
  <div class="dropdown-content">
  </div>
</div>
     </div>
     </div>
   </div>  
   </div>  
   <div class="subnav">
   <div class="subnav">
     <button class="subnavbtn">آسیای مرکزی و قفقاز <i class="fa fa-caret-down"></i></button>
     <button class="subnavbtn">اروپا <i class="fa fa-caret-down"></i></button>
     <div class="subnav-content">
     <div class="subnav-content">
      <a href="#link1">کشور اول</a>
<div class="dropdown">
      <a href="#link2">کشور دوم</a>
  <button class="dropbtn">اروپای غربی و شمالی</button>
      <a href="#link3">کشور سوم</a>
  <div class="dropdown-content">
      <a href="#link4">کشور چهارم</a>
    <a href="https://dmelal.ir/index.php?title=%D8%A7%D8%B3%D9%BE%D8%A7%D9%86%DB%8C%D8%A7">اسپانیا</a>
    <a href="https://dmelal.ir/index.php?title=%D9%81%D8%B1%D8%A7%D9%86%D8%B3%D9%87">فرانسه</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">اروپای شرقی</button>
  <div class="dropdown-content">
    <a href="https://dmelal.ir/index.php?title=%D8%A7%D9%88%DA%A9%D8%B1%D8%A7%DB%8C%D9%86">اوکراین</a>
    <a href="https://dmelal.ir/index.php?title=%D8%B1%D9%88%D8%B3%DB%8C%D9%87">روسیه</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">اروپای جنوبی</button>
  <div class="dropdown-content">
  </div>
</div>
     </div>
     </div>
   </div>
   </div>
     <div class="subnav">
     <div class="subnav">
     <button class="subnavbtn">عربی <i class="fa fa-caret-down"></i></button>
     <button class="subnavbtn">آمریکا <i class="fa fa-caret-down"></i></button>
     <div class="subnav-content">
     <div class="subnav-content">
      <a href="#link1">کشور اول</a>
<div class="dropdown">
      <a href="#link2">کشور دوم</a>
  <button class="dropbtn">آمریکای شمالی و مرکزی</button>
      <a href="#link3">کشور سوم</a>
  <div class="dropdown-content">
      <a href="#link4">کشور چهارم</a>
    <a href="https://dmelal.ir/index.php?title=%DA%A9%D8%A7%D9%86%D8%A7%D8%AF%D8%A7">کانـــــــادا</a>
    </div>
    <a href="https://dmelal.ir/index.php?title=%DA%A9%D9%88%D8%A8%D8%A7">کوبـــــــــــا</a>
   </div>
   </div>
      <div class="subnav">
</div>
    <button class="subnavbtn">آفریقا <i class="fa fa-caret-down"></i></button>
<div class="dropdown">
    <div class="subnav-content">
  <button class="dropbtn">آمریکای جنوبی</button>
      <a href="#link1">کشور اول</a>
  <div class="dropdown-content">
      <a href="#link2">کشور دوم</a>
    <a href="https://dmelal.ir/index.php?title=%D8%A2%D8%B1%DA%98%D8%A7%D9%86%D8%AA%DB%8C%D9%86">آرژانتین</a>
      <a href="#link3">کشور سوم</a>
      <a href="#link4">کشور چهارم</a>
    </div>
   </div>
   </div>
      <div class="subnav">
</div>
    <button class="subnavbtn">اروپای شرقی <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#link1">کشور اول</a>
      <a href="#link2">کشور دوم</a>
      <a href="#link3">کشور سوم</a>
      <a href="#link4">کشور چهارم</a>
     </div>
     </div>
   </div>
   </div>
       <div class="subnav">
       <div class="subnav">
     <button class="subnavbtn">اروپای غربی <i class="fa fa-caret-down"></i></button>
     <button class="subnavbtn">اقیانوسیه <i class="fa fa-caret-down"></i></button>
     <div class="subnav-content">
     <div class="subnav-content">
       <a href="#link1">کشور اول</a>
       <a href="#link1"></a>
       <a href="#link2">کشور دوم</a>
       <a href="#link2"></a>
      <a href="#link3">کشور سوم</a>
      <a href="#link4">کشور چهارم</a>
     </div>
     </div>
   </div>
   </div>
</div>
</div>
</html>

نسخهٔ کنونی تا ‏۶ ژوئیهٔ ۲۰۲۴، ساعت ۰۷:۱۲