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 html và css 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!

html