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

Chi tiết

Liên quan

Nhận xét

Tác giả

Bản Quyền

Xem toàn trang

Nếu muốn xem bài viết một kích thước lớn hãy click xem toàn trang nhé!

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!

Chia sẻ lên Facebook

Chia sẻ lên Zalo

Lưu ý:
Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/xvhDr24.png[/img]

Trịnh Công Sơn

“Đừng so sánh mình với bất cứ ai trong thế giới này. Nếu bạn làm như vậy có nghĩa bạn đang sỉ nhục chính bản thân mình.”

Tất cả bài đăng trên website đều thuộc bản quyền về Tôi Viết Code, chỉ được phát hành lại nội dung từ website này khi có sự đồng ý bằng văn bản của admin