Menu fix bám sát lề bên phải cho website wordpress

Hôm nay DANDEV chia sẻ với các bạn cách thêm menu fix bám sát lề bên phải cho website wordpress. Cụ thể ở đây mình dùng themes flatsome là một themes bán hàng khá nổi tiếng và được nhiều bạn tin dùng để customize lại.

Trước tiên bạn vào thư mục themes của wordpress cụ thể là flatsome. Mở file footer.php bằng trình edit code. ví dụ dùng Notepad++, sublimeText, Visual Studio Visual Code ... Sau đó bạn tìm tới trước thể đóng của body () Thêm những phần sau:

CSS:

 <style type="text/css">
    .see-more-pc {
        position: fixed;
        right: 0;
        top: 8vh;
        z-index: 9999;
        width: 52px;
        height: 56px;
        background-color: #03375e;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        cursor: pointer;
    }
    .see-more-pc img {
        padding: 10px;
        animation: rotate_square linear 3s infinite;
    }
    .see-more-show {
        width: 60px;
        right: 85px;
        transition: .55s;
    }
    .fix-item {
        width: 95px;
        position: fixed;
        right: 0;
        top: 8vh;
        background-color: #03375e;
        padding: 15px 10px;
        z-index: 9999;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        display: none;
    }
    .fix-item .see-more-mb {
        display: none;
    }
    .fix-item .par .item {
        text-align: center;
        border: 1px solid #527691;
        border-radius: 5px;
        padding: 15px 10px;
        margin-bottom: 15px;
    }
    .fix-item .par .item .img {
        position: relative;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .fix-item .par .item p {
        font-size: 13px;
        font-weight: normal;
        color: #fff;
        font-family: MYRIADPRO-REGULAR;
        padding-top: 10px;
    }
    .fix-item .par .item:first-child .img {
        background: url('<?php echo get_template_directory_uri() ?>/images/img1.png');
        width: 23px;
        height: 25px;
    }
    .fix-item .par .item:nth-child(2) .img {
        background: url('<?php echo get_template_directory_uri() ?>/images/img2.png');
        width: 44px;
        height: 23px;
    }
    .fix-item .par .item:nth-child(3) .img {
        background: url('<php echo get_template_directory_uri() ?>/images/img3.png');
        width: 25px;
        height: 25px;
    }
    .fix-item .par .item:last-child .img {
        background: url('<?php echo get_template_directory_uri() ?>/images/img4.png');
        width: 30px;
        height: 21px;
    }
    .fix-item .see-more-mb {
        display: none;
    }
    @keyframes rotate_square {
        /* line 1174, style.less */
        10% {
            transform: rotate(72deg);
            animation-delay: 0.3s;
        }
        /* line 1178, style.less */
        20% {
            transform: rotate(144deg);
            animation-delay: 0.3s;
        }
        /* line 1182, style.less */
        30% {
            transform: rotate(216deg);
            animation-delay: 0.3s;
        }
        /* line 1186, style.less */
        40% {
            transform: rotate(288deg);
            animation-delay: 0.3s;
        }
        /* line 1190, style.less */
        50% {
            transform: rotate(360deg);
            animation-delay: 0.3s;
        }
        /* line 1194, style.less */
        60% {
            transform: rotate(432deg);
            animation-delay: 0.3s;
        }
        /* line 1198, style.less */
        70% {
            transform: rotate(504deg);
            animation-delay: 0.3s;
        }
        /* line 1202, style.less */
        80% {
            transform: rotate(576deg);
            animation-delay: 0.3s;
        }
        /* line 1206, style.less */
        90% {
            transform: rotate(648deg);
            animation-delay: 0.3s;
        }
        /* line 1210, style.less */
        100% {
            transform: rotate(720deg);
            animation-delay: 0.3s;
        }
    }
    @media (max-width: 480px){

        .see-more-pc {
            display: none;
        }
        .fix-item .see-more-mb {
            display: block;
            text-align: center;
            font-size: 17px;
            color: #fff;
            padding: 5px 0;
            font-family: MYRIADPRO-REGULAR;
            animation: animate_small linear 1s infinite;
        .fix-item {
            bottom: 0;
            left: 0;
            width: 100%;
            top: unset;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 0;
            border: 1px solid #527691;
            display: block;
            padding: 5px;
        }
        .fix-item .par {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        .fix-item .par .item {
            display: none;
            -ms-flex: 0 0 48%;
            flex: 0 0 48%;
            max-width: 48%;
            margin: 10px 1% 5px 1%;
            padding: 10px;
        }
        .fix-item .par .item p {
            font-size: 11px;
        }
    }
</style>
 

Tiếp theo là thêm HTML

 <div class="see-more-pc">
 <img src="<?php echo get_template_directory_uri() ?>/images/iconbx.png" alt="">
 </div>
<div class="fix-item">
   <div class="see-more-mb">
    <img src="{C}{C}{C}{C}{C}{C}>/images/arrow-topw.png" alt="">
    </div>
    <div class="par">
        <div class="item">
            <a href="#" target="">
                <div class="img">
                </div>
                <p>Request</p>
            </a>
        </div>
        <div class="item">
           <a href="#" target="">
               <div class="img"></div>
                <p>Booking</p>
            </a>
        </div>
       <div class="item">
           <a href="#" target="">
               <div class="img"></div>
                <p>Kiểm tra>
            </a>
        </div>
        <div class="item">
            <a href="#" target="">
                <div class="img"></div>
                <p>Q&A</p>
            </a>
        </div>
    </div>
</div>

Cuối cùng là thêm Javascript để khi click vào biểu tượng bánh xe thì show các item ra

 <script type="text/javascript">
    jQuery('.see-more-pc').click(function(){
        if(!jQuery('.see-more-pc').hasClass('see-more-show'))
        {
            jQuery(this).addClass('see-more-show');
            jQuery('.fix-item').show(300);
        }else{
            jQuery(this).removeClass('see-more-show');
            jQuery('.fix-item').hide();
        }
    });
jQuery('.fix-item .see-more-mb').click(function(){
        var nameIcon = jQuery(this).find('img').attr('src');
        if(nameIcon == "{C}{C}{C}/images/arrow-topw.png"){
            jQuery(this).find('img').attr('src',"<?php echo get_template_directory_uri() ?>/images/arrow-topd.png");
            jQuery('.fix-item .item').show(300);
        }else{
            jQuery(this).find('img').attr('src',"<?php echo get_template_directory_uri() ?>/images/arrow-topw.png");
            jQuery('.fix-item .item').hide(300);
        }
    });
</script> 

Bạn tải source hoàn chỉnh tại đây

Video