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!

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