طراحي دکمه های چند بخشی (split button) در سایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html ، دکمه های چند بخشی (split button) ایجاد کنیم.

Split Button Dropdowns

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

ماوس را بر روی آیکون فلش ببرید تا منوی dropdown باز شود.

                                   
                

                Button
                

                  
                    
                  
                  

                    Link 1
                    Link 2
                    Link 3
                  
                
                 

<h2>Split Button Dropdowns</h2>

<p>Move the mouse over the arrow icon to open the dropdown menu.</p>

<button class="btn">Button</button>

توضیح مثال :از هر مولفه ای برای باز کردن منوی dropdown استفاده کنید برای مثال مولفه < button > ،< a >،یا < p > .

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

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

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

                                /* Dropdown Button */
                .btn {
                  background-color: #2196F3;
                  color: white;
                  padding: 16px;
                  font-size: 16px;
                  border: none;
                  outline: none;
                }

                /* The container 
 - needed to position the dropdown content */
                .dropdown {
                  position: absolute;
                  display: inline-block;
                }

                /* Dropdown Content (Hidden by Default) */
                .dropdown-content {
                  display: none;
                  position: absolute;
                  background-color: #f1f1f1;
                  min-width: 160px;
                  z-index: 1;
                }

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

                /* Change color of dropdown links on hover */
                .dropdown-content a:hover {background-color: #ddd}

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

                /* Change the background color of the dropdown button when the dropdown content is shown */
                .btn:hover, .dropdown:hover .btn  {
                  background-color: #0b7dda;
                }
                

<h2>Split Button Dropdowns</h2>

<p>Move the mouse over the arrow icon to open the dropdown menu.</p>

<button class="btn">Button</button>