آموزش طراحی منو برای دکمه بیشتر "More"

آموزش ایجاد دکمه More Button in Navbar در وب

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه" more " ایجاد کنیم.

قدم اول : کد HTML را اضافه کنید.
مثال :

یک navigation bar بصورت dropdown ایجاد کنید

یک منوی dropdown ایجاد کنید به این صورت که زمانی که کاربر ماوس را بر روی عناصر داخل navigation bar میبرد ، نمایان گردد.

توضیح مثال : از هر مولفه ای برای باز کردن منوی dropdown استفاده کنید برای مثال مولفه .

از مولفه container ( مانند ) برای ایجاد منوی dropdown استفاده کنید و لینک های dropdown را به آن اضافه کنید.

مولفه را در ابتدا و انتهای دکمه قرار دهید تا منوی dropdown را بخوبی توسط کد css جایدهی کنید.

قدم دوم : کد CSS را اضافه کنید.
مثال :

                                /* Navbar container */
                .navbar {
                  overflow: hidden;
                  background-color: #333;
                  font-family: Arial;
                }

                /* Links inside the navbar */
                .navbar a {
                  float: left;
                  font-size: 16px;
                  color: white;
                  text-align: center;
                  padding: 14px 16px;
                  text-decoration: none;
                }

                /* The dropdown container */
                .dropdown {
                  float: left;
                  overflow: hidden;
                }

                /* Dropdown button */
                .dropdown .dropbtn {
                  font-size: 16px;
                  border: none;
                  outline: none;
                  color: white;
                  padding: 14px 16px;
                  background-color: inherit;
                  font-family: inherit; /* Important for vertical align on mobile phones */
                  margin: 0; /* Important for vertical align on mobile phones */
                }

                /* Add a red background color to navbar links on hover */
                .navbar a:hover, .dropdown:hover .dropbtn {
                  background-color: red;
                }

                /* Dropdown content (hidden by default) */
                .dropdown-content {
                  display: none;
                  position: absolute;
                  background-color: #f9f9f9;
                  min-width: 160px;
                  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                  z-index: 1;
                }

                /* Links inside the dropdown */
                .dropdown-content a {
                  float: none;
                  color: black;
                  padding: 12px 16px;
                  text-decoration: none;
                  display: block;
                  text-align: left;
                }

                /* Add a grey background color to dropdown links on hover */
                .dropdown-content a:hover {
                  background-color: #ddd;
                }

                /* Show the dropdown menu on hover */
                .dropdown:hover .dropdown-content {
                  display: block;
                }

نمونه یک

<div class="navbar">

  <a href="#home">خانه</a>

  <a href="#news">اخبار</a>

  <div class="dropdown">

    <button class="dropbtn">بیشتر 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <a href="#">لینک 1</a>

      <a href="#">لینک 2</a>

      <a href="#">لینک 3</a>

    </div>

  </div> 

</div>

<h3>دکمه بیشتر / منوی کشویی داخل یک نوار پیمایشی</h3>

<p>روی دکمه "بیشتر" با ماوس نگه دارید  تا منو لینک دار باز شود</p>

امتحان کنید

توضیح مثال : ما به navigation bar و لینک های آن توسط background-color ، padding و غیره فرم دادیم.

ما به دکمه dropdown توسط background-color ، padding و غیره فرم دادیم.

کلاس dropdown. یک container برای dropdown-content. می باشد.تا زمانیکه مولفه div باشد، نه مولفه a ، باید از Float استفاده کنیم تا اطمینان حاصل کنیم که در کنار لینک ها قرار میگیرد.

کلاس dropdown-content. در برگیرنده منوی dropdown میباشد. بصورت پیش فرض پنهان است و در هاور ( بصورت زیر) نمایش داده میشود. توجه داشته باشید که مقدار min-width را 160px قرار دهید. و برای تغییر ، میتوانید آنرا مقداردهی نکنید.

بجای استفاده از border ، از ویژگی box-shadow استفاده کردیم تا منوی dropdown به شکل کارت نمایان شود. همچنین از z-index استفاده میکنیم تا dropdown را جلوی سایر عناصر قرار دهیم.

از سلکتور hover: برای نمایش منوی dropdown زمانیکه کاربر ماوس را برروی دکمه dropdown میبرد ، استفاده میشود

نمونه دکمه" more "