Tạo menu responsive đơn giản cho website

Hello các bạn, chào mừng quay lại với Tôi Viết Code.
Hôm nay mình sẽ chia sẻ cho các bạn một dạng Menu Repsonsive đơn giản mà không kém phần sang trọng hoàn toàn bằng htmlcss cho website. Let's go!

Bước 1:

Thêm code dưới vào phần bạn muốn đặt menu:
<nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<input type='checkbox'/>
<label><i class='fa fa-bars' style='font-size:16px;color:#fff'></i><b style='font-size:16px;color:#fff'> MENU</b></label>
<ul>
<li><a href='/'>Trang chủ</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
<li><a href='#'>Menu 7</a></li>
<!-- Search -->
<div class='search' id='data-search'>
<a class='search-btn' href='#search'>
<i class='fa fa-search'></i>
<i class='fa fa-times'></i>
</a>
<div class='unstyled-list search-menu'>
<div id='search-box-pc'>
<form action='/search' id='search-form-pc' method='get' target='_top'>
<input id='search-text-pc' name='q' placeholder='Tìm kiếm...' type='text'/>
</form>
</div>
</div>
</div>
<script type='text/javascript'>
(function(){window.Menu=function(){function a(a){this.nav=a,this.menubtn=$(".search-btn",this.nav),this.menubtn.on("click",function(a){return function(b){return a.nav.toggleClass("active"),!1}}(this))}return a.init=function(){return $("#data-search").each(function(b,c){return new a($(c))})},a}(),$(function(){if($("#data-search").length)return Menu.init()})}).call(this);
</script>
</ul>
</nav>

Bước 2:

Thêm CSS vào thẻ style
#navigation{margin-bottom:10px;width:100%;max-width:1080px;height:30px;text-transform:uppercase;font-size:100%;background:#007699;color:#000}
#navigation ul.menus{background:#007699;height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#navigation a{display:block;line-height:30px;padding:0 10px 0;text-decoration:none;color:#fff;font-weight:600;font-size:14px;border-right: 1px solid #006e78; transition: .4s}
#navigation ul,#navigation li{margin:0 auto;padding:0;list-style:none}
#navigation ul{height:30px;width:100%;max-width:1080px}
#navigation li{float:left;display:inline;position:relative}
#navigation input{display:none;margin:0;padding:0;width:100%;height:30px;opacity:0;cursor:pointer}
#navigation label{display:none;height:31px;line-height:31px;text-align:center;margin-left: 10px;}
#navigation label span{font-size:16px;position:absolute;left:35px}
#navigation ul.menus li{display:block;width:100%;text-transform:none;text-shadow:none;border-bottom:1px dashed #31AFDB}
#navigation ul.menus a{color:#FFF;line-height:35px}
#navigation li ul{background:#0F5341;margin:0;width:180px;height:auto;position:absolute;top:30px;left:0;z-index:10;display:none;border-bottom:3px solid #16a085}
#navigation li a:hover{background:#006e78}
#navigation li li{display:block;float:none}
#navigation li ul ul{left:100%;top:0}
#navigation li li > a{font-size:12px;display:block;padding:0 10px;margin:0;line-height:24px;text-decoration:none;color:#fff;border-bottom:1px dotted #777}
.social-right{float: right;width: 20%;}
#search-box{position:relative;border:2px solid #007699;border-radius:5px;margin:0;display:none}
#search-box:hover{border:2px solid #007699}
#search-form{height:30px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#fff;overflow:hidden;line-height: 30px;}
#search-text{font-size:13px;color:#ddd;border-width:0;background:transparent}
#search-box input[type="text"]{width:100%;padding:0 0 0 10px;color:#666;outline:none;font-family: inherit;}
#search-box-pc{position:relative;margin:0}
#search-form-pc{width:120px;height:30px;overflow:hidden;line-height:30px}
#search-text{font-size:13px;color:#ddd;border-width:0;background:transparent}
#search-box-pc input[type="text"]{width:100%;padding:0 10px;color:#fff;outline:none;font-family:inherit;display:block;opacity:1;border:0;background:#006e78}
#search-text-pc::-webkit-input-placeholder{color:#fff}
.unstyled-list{padding:0}
.unstyled-list li{list-style:none;margin:0;padding:0}
.search-menu{position:relative;right:30px;top:-50px;min-width:140px;opacity:0;backface-visibility:hidden;transform:translate3d(0,20px,0);visibility:hidden;background:#006e78;transition:all .2s ease,visibility 0 linear;padding:0;height:30px;line-height:30px;font-size:13px;color:#fff}
.search{float:right}
.search.active .fa-search{opacity:0}
.search.active .fa-times{opacity:1;color:#fff;background:#c0361a}
a.search-btn{border-right:0!important}
.search.active .search-menu{opacity:1;transform:translate3d(0,50px,0);visibility:visible;transition-delay:0}
.search-btn{display:block;transition:all .2s ease;text-align:center;position:relative;z-index:1}
.search-btn .fa{position:absolute;top:0;right:0;font-size:14px;line-height:30px;width:30px;vertical-align:middle;transition:opacity .1s linear}
.search-btn .fa-bars{opacity:1;color:#fff}
.search-btn .fa-times{opacity:0}
.status-msg-body{padding:10px 0;display:none}
.status-msg-wrap{display:none;font-size:14px;margin-left:1px;width:100%;color:#666}
.status-msg-wrap a{color:orange!important}
.status-msg-bg{display:none;background:#ccc;position:relative;width:99%;padding:6px;z-index:1;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:2px #999 solid}
.status-msg-border{display:none;border:0;position:relative;width:99%}
@media screen and (max-width:800px) {
#navigation{position:relative}
#navigation ul{background:#007699;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none}
#navigation ul.menus{width:100%;position:static;padding-left:20px}
#navigation li{display:block;float:none;width:auto}
#navigation input,#navigation label{position:absolute;top:0;left:0;display:block}
#navigation input{z-index:4}
#navigation input:checked + label{color:#fff}
#navigation input:checked ~ ul{display:block;width:100%}
#navigation li:hover > ul{width:100%}
}
Chúc các bạn thành công!
Tác giả: Trịnh Công Sơn

Tôi lang thang trên đường đời, bỏ qua những thứ quan trọng nhất. Để rồi khi ngoảnh lại, chỉ còn Tôi - Các Bạn và Blog!

  • Không sử dụng từ khóa trong tên.
  • Không sử dụng từ ngữ phảm cảm.
  • Không dẫn link tới các trang có nội dung không lành mạnh.
  • Không bình luận về chính trị.
  • Mọi bình luận sẽ bị xóa nếu vi phạm mà không báo trước.
  • 63 nhận xét:

    1. Trả lời
      1. Có chứ, ông bình luận thông tin liên kết đi, onl pc t đặt cho ô sau

        Xóa
    2. https://www.ngoctinhit.info/
      Ngọc Tính IT
      đã đặt

      Trả lờiXóa
    3. Cái phần bình luận không lầm thì mình thấy ở tôi share blog phải ko nhỉ

      Trả lờiXóa
    4. Thêm thanh cuộn vào khung code đi

      Trả lờiXóa
    5. vô bên t xem thử code xóa bài viết thật này :v không phải để cái button không đó

      Trả lờiXóa
      Trả lời
      1. Để button xóa đc thật thì ô nghĩ blog t sẽ đi về đâu :(

        Xóa
      2. À mà đó chỉ là js làm ẩn nên ko sao nhỉ :))

        Xóa
      3. :v muốn xóa thật cũng không dc :v chỉ lưu lại thì dc :3

        Xóa
      4. Hôm nào thử code cái sửa bài ngoài homepage coi

        Xóa
      5. Ý là code cái sửa tiêu đề với mấy cái nội dung trên trang chủ ấy. Như sửa văn bản á

        Xóa
      6. từ thì để nó trong html input là dc :V

        Xóa
    6. https://www.toishare.net/2017/12/tao-menu-responsive-hoan-toan-bang-css-cho-blogger.html

      Trả lờiXóa
      Trả lời
      1. Có thể code giống như mình rip từ blog khác và không hề copy nhé. Thân!

        Xóa
      2. Và làm ơn bạn bình luận đúng danh tính account của bạn giúp mình. Nếu không mình xin delete bình luận này.

        Xóa
      3. Thế bạn cop ở đâu nhỉ

        Xóa
      4. Mình đã nói rồi, mình không cop bài. Mình rip từ HA Student và share lại thôi. Mình cũng không hề để ý thấy bên Tôi Share có bài code giống như vậy.

        Xóa
    7. =)) chuẩn bị đặt thêm 3-4 lk cho tui nhé

      Trả lờiXóa
    8. https://www.starnhanblog.net/
      https://www.lolivn.com/
      https://www.vuisource.net/
      https://www.ctvlikes.net/
      https://www.brliker.com/
      https://www.hethongsongao.net/
      https://www.nhanblogger.com/

      Có một số site không phải blog nhưng ông cứ đặt đi, tôi sẽ phát triển thêm phần lkbb sau này :P
      vd ông đặt ctvlikes.net thì og để tiêu đề là CtvLikes.Net, các domain còn lại tương tự nha, tks ông

      Trả lờiXóa
    9. Share code ông già noel đi bạn

      Trả lờiXóa
      Trả lời
      1. Code của nó quá đơn giản, chỉ có vài dòng code thôi nên mình không share nhé. Thay vào đó bạn nên tự tùm hiểu nha

        Xóa
      2. Nhận xét này đã bị quản trị viên blog xóa.

        Xóa
    10. Trả lời
      1. Ô lấy về xài là biết liền, chứ t lười cập nhật lắm

        Xóa