Menu xổ xuống có responsive

Với sự phát triển không ngừng của công nghệ, làm cho việc sở hữu thiết bị di động ngày càng trở dễ dàng và phổ biến hơn bao giờ hết.
Chính vì lẽ đó mà lượng người sử dụng thiết bị di động để truy cập vào website ngày càng tăng và là xu thế tất yếu của tương lai.
Từ đó đòi hỏi những nhà thiết kế web phải làm sao cho các website của mình thân thiện với thiết bị di động hơn nhằm thu hút lượng người truy câp.
Menu là một phần không thể thiếu trên một website hay blog, vậy làm thế nào để menu có thể thân thiện với thiết bị di động.

Hướng làm menu xổ xuống có chức năng responsive cho blogspot để chạy trên thiết bị di động.

Đặt đoạn javascript sau vào trước </body>

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

Copy đoạn html vào vị trí muốn hiển thị menu của bạn.

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

Cuối cùng là copy CSS vào

.topnav{overflow:hidden;background-color:#333}
.topnav a{float:left;display:block;color:#f2f2f2;text-align:center;padding:14px 16px;text-decoration:none;font-size:17px}
.active{background-color:#4CAF50;color:white}
.topnav .icon{display:none}
.dropdown{float:left;overflow:hidden}
.dropdown .dropbtn{font-size:17px;border:none;outline:none;color:white;padding:14px 16px;background-color:inherit;font-family:inherit;margin:0}
.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1}
.dropdown-content a{float:none;color:black;padding:12px 16px;text-decoration:none;display:block;text-align:left}
.topnav a:hover,.dropdown:hover .dropbtn{background-color:#555;color:white}
.dropdown-content a:hover{background-color:#ddd;color:black}
.dropdown:hover .dropdown-content{display:block}
@media screen and (max-width:600px){.topnav a:not(:first-child),.dropdown .dropbtn{display:none}.topnav a.icon{float:right;display:block}}
@media screen and (max-width:600px){.topnav.responsive{position:relative}.topnav.responsive .icon{position:absolute;right:0;top:0}.topnav.responsive a{float:none;display:block;text-align:left}.topnav.responsive .dropdown{float:none}.topnav.responsive .dropdown-content{position:relative}.topnav.responsive .dropdown .dropbtn{display:block;width:100%;text-align:left}}

Nguồn: w3schools.com