[ Blogger ] Chia sẽ thanh Menu Responsive tuyệt đẹp giống Dii Nô Blog

KIỀU GIA HUY / lúc 19:27 ngày Thứ Bảy, 1 tháng 7, 2017 / 9 bình luận

Kết bạn Kiều Gia Huy để cùng trao đổi, học hỏi và nhận nhiều bài viết hay, hữu ích nhé!

Chào các bạn. Hôm nay Star Huy Blog xin chia sẽ cho các bạn một thanh menu từ code blogspot tuyệt đẹp ngay cả website nổi tiếng Dii Nô Blog đang sử dụng thanh menu này.

Bước 1 : Các Bạn Tìm Thẻ Này: = C. Header Section

Các bạn xóa tất cả HTML trong phần đó đi

Thay đoạn mã mới như sau:

.menu ul li ul{box-shadow:0 3px 10px 1px rgba(0,0,0,0.14);position:absolute;visibility:hidden;z-index:999;padding-top:0;display:none;width:180px;-moz-transform:inherit;-o-transform:scale(0.7);-webkit-transform:scale(0.7);transform:scale(0.7);transition:all .3s ease-in-out!important;display:block!important;opacity:0;border-top:2px solid #3b5998;margin-top:0}.hasSub:hover>ul{visibility:visible;opacity:1;-moz-transform:scale(1.0);-o-transform:scale(1.0);-webkit-transform:scale(1.0);transform:scale(1.0)}#header-wrapper{max-width:100%;margin:0 0 10px;z-index:9;background:#fff;box-shadow:0 0 11px 1px #ccc}#header-content{display:table;padding:0px;color:#555}.header,.topad{display:table-cell;vertical-align:middle;width:100%}.header .widget{max-width:250px}.topad{max-width:728px;height:90px}.topad h2{display:none}.topad .widget{line-height:0}.header a{color:#555}.fa-home:before{color:#000}#header-tail{height:38px;position:relative;z-index: 1;background-color:#fff;transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease;}.selectnav{font:normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;border:0}.sub-menu{display:none}#menu li,#menu ul{transition:all 0s ease;-webkit-transition:all 0 ease;-moz-transition:all 0s ease;-o-transition:all 0 ease}.menu ul li{padding:10px 0;display:inline}.menu ul li a:hover{color:#9dce28}.menu ul li a{text-transform:uppercase;font-size:14.6px;color:#222;font-weight:400;padding:0 10px;display:block;height:45px;line-height:20px;margin:0;position:relative;}.menu ul li a span{font-size:11px;font-weight:bold;display:block;margin-top:5px;color:#EEEEEE}.home-icon .fa{font-size:27px;line-height:32px;margin-left:130px}.menu ul li ul li{padding:0;margin:0;display:block;float:none;}.menu ul li ul li a:hover{background-color:#f5f5f5}.menu ul li ul a:hover{color:#222;box-shadow:none;padding-left:17px;transition:.3s;}.menu ul li ul a:before{font-family:fontawesome;vertical-align:middle;font-size:9px}.home-icon{font-size:25px;position:absolute;top:3px;width:60px;height:35px;padding:0;text-align:center;z-index:9;color:#FFFFFF}.home-icon:hover{color:#FFFFFF}.hasSub a:after{font-family:'FontAwesome';top:-1px;position:absolute;color: #000;font-size: 13px;font-weight: 400;}.hasSub ul a:after{content:'';line-height:0}.menu ul li ul{position:absolute;z-index:999;top:37px;display:none;border-top: 1.5px solid #9dce28;width:182px}.menu ul li ul a{margin-top:0;color:#000;height:auto;line-height:16px;border:0;line-height:36px;height:36px;font-size:15px;text-transform: none;font-weight:400;padding:0 17px;background-color:#fff}.search-icon:before{content:"\f002";font-family:'FontAwesome'}.search-icon{background-color:#f2f2f2;right: 0;color:#000;line-height:36px;height:38px;display:block;width:50px;text-align:center;font-size:19px;position:absolute;z-index:99;right:0}.search-icon:hover{background-color:#9dce28;color:#FFF}#header-search .searchbox{position:absolute;top:0;height:38px;opacity: 1!important;border:0;z-index:98;background-color:#9dce28;color:#FFF;font-size:15px;width:100%}.searchbox::-webkit-input-placeholder{color:#FFF}#header-search.open-search {width: 100%;}#header-search {float: left;right: 0;top:0;position: absolute;transition: width .3s;width: 55px;}#header-top {background-color:#ffffff;height: 60px;border-bottom: 2px solid #9dce28;}.menu-top li{display:inline-block;line-height:38px;padding:-1}.menu-top li a{color:#222222;text-transform:uppercase;line-height: 60px;font-size:13px}.menu-top li a:hover{color:#9dce28}.menu-top li a:after{content:'-'}.menu-top li:last-child a:after{content:''}

Các bạn chèn nó như thế này:

Lưu mẫu là xong. Bạn nào có Template BMAG giống Dii Nô Blog thì cứ tạo thanh menu này, ông nào không có thì lấy Template BMAG tại đây ( Template này khá giống Dii Nô có cái thanh menu khá xấu, thì các bạn cứ áp dụng thanh menu trên là được. )