Tạo dropdown menu responsive đẹp và tương tự như của facebook cho blogspot

Menu là một phần không thể thiếu của bất kì trang web nào. Nó giúp người dùng điều hướng đến các trang web khác nhau cũng như khám phá thêm về trang web của các ông.

Tạo dropdown menu tương tự như của facebook cho blogspot

Với Google các ông có thể tìm kiếm được kha khá những thể loại menu đẹp khác nhau cho các ông, từ đơn giản đến phức tạp với hiệu ứng màu mè. Vậy tại sao các ông không thử một kiểm menu mới giống như của Facebook để tạo sức hấp dẫn và tăng tính thẫm mĩ cho trang web của mình.

Xem mẫu

Tạo menu giống Facebook cho Blogspot

Trong bài viết hôm nay, tớ sẽ chia sẻ cho các ông một loại menu cực đẹp, giống facebook, đơn giản nhưng thanh lịch cho các ông.

Tạo dropdown menu đẹp và tương tự như của facebook cho blogspot

Để sở hữu menu như này, đầu tiên các ông cần đặt những thẻ sau vào phía trước thẻ </head>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&amp;display=swap" rel="stylesheet" />

Trong đó link thứ nhất đó là bộ icon Font Awesome. Nếu blog của các ông cài sẵn rùi thì có thể bỏ qua, còn link thứ hai đó là bộ font để menu có font chữ giống với ảnh. Các ông có thể bỏ qua link đó và sửa lại font cho riêng mình nếu thích.

Tiếp theo copy toàn bộ code sau và dãn vào bên trong thẻ </style> và tất nhiên, các ông có thể chỉnh lại code này phù hợp với ý thích hoặc mặc định như của tui cũng được.

._nav {
    padding: 10px;
    border-radius: 15px;
    background-color: #fff;
    position: relative;

    /* Có thể sửa cái này theo ý thích của các ông */
    font-family: open sans, sans-serif; 
    font-weight: 400;
    line-height: 1.6;
    color: #050505;
    box-sizing: border-box;

}
._nav * {
 box-sizing: border-box;
}
._nav a {
 text-decoration: none;
 color: #050505;
}
._toggle-menu-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #000;
    background-color: #F2F3F5;
    width: 35px;
    height: 35px;
}

._toggle-menu-button-actived {
    color: #377dff;
}

._menu-admin-info {
    display: flex;
    flex-direction: column;
}

._menu-admin-name {
    font-weight: bold;
    font-size: 16px;
}

._menu-admin-contact {
    font-size: 14px;
    color: #65676b;
}

._menu-admin {
    display: flex;
    flex-direction: row;
    align-items: center;
}

._menu-admin > div > img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 15px;
}
._sub-menu-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
._sub-menu-item,
._show-hide-menu-button,
._show-menu-title {
    display: inline-grid;
    grid-template-columns: 40px auto 40px;
    width: 100%;
    align-items: center;
    cursor: pointer;
}

._menu-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: large;
    color: #828282;
}

._background-button {
    background-color: #CCCCCC;
}

._sub-menu-title {
    padding: 0 10px;
    font-weight: bold;
}

._sub-container {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 15px;
}
._sub-container ._sub-menu-item,
._show-hide-menu-button {
    margin-bottom: 10px;
    border-radius: 15px;
    padding: 5px;
}

._sub-menu-item:hover,
._show-hide-menu-button:hover {
    background-color: #F2F3F5;
}

._sub-menu-container {
    display: none;
}

._menu-title {
    font-size: 24px;
    font-weight: bold;
}

._show > ._sub-menu-container {
    display: block;
}

._hidden {
    display: none;
}

._nav-menu {
    position: absolute;
    background-color: #fff;
    margin-top: 20px;
    box-shadow: 0 4px 11px rgba(113, 134, 157, .1);
    width: 100%;
    padding: 15px;
    max-width: 320px;
  width: 95%;
 box-sizing: border-box;
}

Lại tìm đến cuối thẻ </body> và dán đoạn code sau vào trước nó:

function _checkbackbutton(){document.querySelector(".back-menu").addEventListener("click",function(){document.querySelector("._show-here").classList.add("_hidden"),document.querySelector("._show-here").innerHTML="",document.querySelector("._hidden-element").classList.remove("_hidden")})}document.querySelector("._toggle-menu-button").addEventListener("click",function(){if(document.querySelector("._nav-menu").classList.toggle("_hidden"),!document.querySelector("._nav-menu").classList.contains("_hidden"))try{document.querySelector(".back-menu").click()}catch(e){}this.classList.toggle("_toggle-menu-button-actived")}),Array.prototype.forEach.call(document.querySelectorAll("._show-hide-menu-button"),e=>{e.addEventListener("click",function(){document.querySelector("._hidden-element").classList.add("_hidden");var e=this.parentNode.cloneNode(!0);e.classList.add("_show");var t=`<a class='_menu-button back-menu' aria-hidden='true'><i class="fas fa-arrow-left"></i></a><span class='_menu-title'>${e.querySelector("._show-hide-menu-button").querySelector("._sub-menu-title").innerText}</span>`;e.querySelector("._show-hide-menu-button").innerHTML=t,e.querySelector("._show-hide-menu-button").classList.add("_show-menu-title"),e.querySelector("._show-hide-menu-button").classList.remove("_show-hide-menu-button"),document.querySelector("._show-here").appendChild(e),document.querySelector("._show-here").classList.remove("_hidden"),_checkbackbutton()})});/*codevodoi.blogspot.com*/

Như vậy là hoàn thành. Bây giờ các ông tìm đến vị trí muốn cho menu hiển thị và đặt đoạn code sau đây vào:

<div class="_nav">
    <div class="_nav-section">
        <span class="_toggle-menu-button">
   <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"></path>
            </svg>
        </span>
    </div>
    <div class="_nav-menu  _hidden">
        <div class="_nav-section _hidden-element">
            <div class="_menu-admin">
                <div>
                    <img src="https://i.pinimg.com/736x/e3/f3/4d/e3f34de992ae4267f272550a5935447f.jpg" />
                </div>
                <div class="_menu-admin-info">
                    <span class="_menu-admin-name">Trương Hướng</span>
                    <span class="_menu-admin-contact">codevodoi.blogspot.com</span>
                </div>
            </div>
            <ul class="_sub-container">
             <!-- Lặp lại thẻ dưỡi đây cho mỗi sub item -->

             <!-- Có menu phụ -->
                <li >
                    <div class="_show-hide-menu-button">
                        <span class='_menu-button _background-button' aria-hidden='true'><i class="fas fa-cog"></i></span>
                        <span class="_sub-menu-title">Cài đặt</span>
                        <span class='_menu-button' aria-hidden='true'><i class="fas fa-angle-right"></i></span>
                    </div>
                    <div class="_sub-menu-container">
                        <ul class="_sub-container">
                            <li>
                             <a class="_sub-menu-item" href='/'>
                                 <span class='_menu-button _background-button' aria-hidden='true'><i class="fas fa-cog"></i></span>
                                 <span class="_sub-menu-title">Cài đặt chung</span>
                             </a>
                            </li>
                            <li>
                             <a class="_sub-menu-item" href='/'>
                                 <span class='_menu-button _background-button' aria-hidden='true'><i class="fas fa-cog"></i></span>
                                 <span class="_sub-menu-title">Cài đặt riêng</span>
                             </a>
                            </li>
                            <li>
                             <a class="_sub-menu-item" href='/'>
                                 <span class='_menu-button _background-button' aria-hidden='true'><i class="fas fa-cog"></i></span>
                                 <span class="_sub-menu-title">Cài đặt bảo mật</span>
                             </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <!-- Nếu như không có menu phụ -->
                <li >
                 <a class="_sub-menu-item" href='/'>
                     <span class='_menu-button _background-button' aria-hidden='true'><i class="fas fa-cog"></i></span>
                     <span class="_sub-menu-title">Cài đặt</span>
                     <span class='_menu-button' aria-hidden='true'><i class="fas fa-angle-right"></i></span>
                 </a>
                </li>
            </ul>
        </div>
        <ul class="_show-here _sub-container  _hidden">
        </ul>
    </div>
</div>

Như vậy là nhiệm vụ tạo menu gống facebook cho blogspot hoàn thành. Bây giờ các ông chỉ cần thay lại một số mã trong code phía trên nữa là done💁‍♂️.

Có thể thay thẻ sau

<span class='_menu-button _background-button' aria-hidden='true'>{ Đây là một font awesome icon }</span>

thành thẻ img nếu các ông muốn hiển thị hình ảnh thay vì một font awesome icon.

...

BLOGSPOT

TIỆN ÍCH

FACEBOOK

CÔNG CỤ (BETA)

TRÒ CHƠI ONLINE

THÔNG BÁO

Tạo dropdown menu responsive đẹp và tương tự như của facebook cho blogspot

Tạo menu giống Facebook cho Blogspot

Chúc mừng, bạn là người đầu tiên!

PHỐ NHỎ BLOG

THỐNG KÊ WEBSITE

Xem nhiều trong tuần