کد های وبمستر

منو عمودی حرفه ای برای سایت و وبلاگ

Dropdown Menu

Dropdown Menu

زمانی که یک وب سایت را باز می کنیم معمولا دوست داریم هر چه سریعتر مطالب مورد نظر خود را در آن پیدا کنیم. به همین دلیل ابتدا به دنبال یک منو می کردیم تا فهرست سایت را در آن پیدا کرده و هر چه سریعتر به مطالب مورد نظر خود دست پیدا کنیم.

امروز برای شما عزیزان یک منو عمودی بسیار حرفه ای ، شیک و زیبا رو قرار دادم که با html و css ساخته شده. در این منو هیچ تصویری به کار نرفته ؛ به همین دلیل بسیار کم حجم می باشد و در سرعت لود سایت شما تاثیری نمی گذارد. این منو به صورت عمودی باز می شود و کار کردن با آن بسیار جذاب است.

کد اچ تی ام ال (html):

<!-- www.seyedrezabazyar.com -->
  <div class="container">
  <ul>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">First Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">Second Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">Third Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">Fourth Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">Fifth Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- www.seyedrezabazyar.com -->

کد سی اس اس (css):

/* www.seyedrezabazyar.com */
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
  font-family: "Lato", Helvetica, Arial;
  font-size: 16px;
}

*, *:before, *:after {
  -webkit-border-sizing: border-box;
  -moz-border-sizing: border-box;
  border-sizing: border-box;
}

.container {
  width: 350px;
  margin: 50px auto;
}
.container > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.dropdown {
  position: relative;
}
.dropdown a {
  text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
  display: block;
  color: white;
  background: #C0392B;
  -moz-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
  -webkit-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
  box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
  background: #cd3d2e;
}
.dropdown [data-toggle="dropdown"]:before {
  position: absolute;
  display: block;
  content: '\25BC';
  font-size: 0.7em;
  color: #fff;
  top: 13px;
  right: 10px;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown > .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
}
.dropdown > .dropdown-menu li {
  padding: 0;
}
.dropdown > .dropdown-menu li a {
  display: block;
  color: #6f6f6f;
  background: #EEE;
  -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  padding: 10px 10px;
}
.dropdown > .dropdown-menu li a:hover {
  background: #f6f6f6;
}
.dropdown > input[type="checkbox"] {
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.dropdown > input[type="checkbox"]:checked ~ .dropdown-menu {
  max-height: 9999px;
  display: block;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  -moz-animation: showAnimation 0.5s ease-in-out;
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-transition: max-height 2s ease-in-out;
  -o-transition: max-height 2s ease-in-out;
  -webkit-transition: max-height 2s ease-in-out;
  transition: max-height 2s ease-in-out;
}
.dropdown > input[type="checkbox"]:checked + a[data-toggle="dropdown"]:before {
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}

@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
/* www.seyedrezabazyar.com */

دمو آنلاین منو

سیدرضا بازیار

من مهندس فناوری اطلاعات و توسعه دهنده Back end هستم. حس کنجکاوی، تمایل به کشف دنیاهای جدید و علاقه زیادی به حل چالش‌های گوناگون در زمینه‌های مختلف داشتم باعث شد وارد حرفه‌ی پرچالش و عمیق برنامه‌نویسی بشوم و هر روز بیشتر در این دنیای بزرگ غرق می‌شوم. در حال حاضر با مهارت هایی نرم مانند کار تیمی، قدرت مذاکره، خوش برخوردی، پرورش ایده و مهارت های سخت مانند PHP, OOP, Clean Code, Design Patterns و ... با علاقه مشغول به فعالیت در جامعه متن‌باز هستم. معتقدم هر روز بیشتر از دیروز، عمده کارهای انسان‌ها توسط ربات‌ها انجام خواهد شد، به همین دلیل سعی میکنم اسکریپت‌های زیادی با PHP ، Shell Scripting و Bash Scripting بنویسم و سعی می‌کنم کارهایی که برای انسان‌ها سخت و زمانبر هستند،‌ با ربات‌ها در سریعترین زمان و کمترین هزینه ممکن انجام بدهم. در این مسیر با زبان‌های برنامه نویسی مانند C++ و پایتون هم کمی کار کرده‌ام و با سیستم های مدیریت محتوای زیادی مانند وردپرس، جوملا، ویبولتین و... هم به صورت حرفه‌ای درگیر بوده‌ام. گهگاهی سعی میکنم ربات‌هایی طراحی کنم که اطلاعات عظیمی را از طریق اسکرپینگ به دیتابیس های مختلف منتقل میکنند و از طریق API در پلتفرم های مختلف پردازش می‌شوند. در 10 سال گذشته سابقه زیادی در طراحی سایت و فروشگاه‌های اینترنتی، سئو و بهینه سازی، تست امنیت وب‌سایت‌ها، دیجیتال مارکتینگ و... داشته‌ام. خوشحال میشم بتونم تجربیات خودم رو از طریق این وبلاگ در اختیار همه شما عزیزان قرار بدهم.

‫2 نظرها

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

      واسه قرار دادن کافیه کد های css رو در تگ style بزارید و همه کد ها رو در یک فایل فراخوانی کنید

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

نشانی ایمیل شما منتشر نخواهد شد.