Chia sẻ code tạo menu Mobile Và Máy tính chuẩn, đẹp cho blogspot

Cập nhật ngày 23/07/2024 Bởi Legend Phim

Chào bạn! Nay Yingvn tiếp tực chia sẻ miễn phí thủ thuật blogger (blogspot) Menu Ngang, Dọc khá đẹp mắt để bạn áp dụng và trang web của mình nhìn nó đẹp hơn.

Chia sẻ code tạo menu Mobile Và Máy tính chuẩn đẹp cho blogspot

Menu code Ngang, dọc và cách sử dụng.

Menu Ngang dọc trên PC này khá đơn giản , chúng ta không cần phải dán theo tùng vũng của mã code, mà chúng ta chỉ dán sau thẻ mở <body> là được.

Trước khi áp dụng thì chúng ta sẽ ẩn đi phần Header hoặc tùy biến và nơi mà bạn muốn nó hiển thị, sử dụng bộ code CSS hoặc thẻ điều kiện Javascript.

- Cách làm menu này: Copy code bên dưới và dán sau thẻ <body>

<style>
div.fixed-navbar {z-index:9999;position: fixed; top: 0; left: 0;text-align: left;width: 100%;}
.menutrai{position:absolute;left:5px;top:3px;padding:10px 14px;color:#fff;background:#222;font-weight:400;font-size:18px;line-height:20px;cursor:pointer;z-index:9999;transition:background-color .3s ease 0s}
#css-menu{position:fixed;top:0;left:-250px;z-index:9999;background:#eee;height:100%;transition:all .5s ease-in-out;}
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a{margin:0;padding:0;border:0;list-style:none;font-weight:normal;text-decoration:none;line-height:1;font-family:"Open Sans",sans-serif;font-size:13px;position:relative}
#cssmenu a{line-height:1.3;padding:12px 15px}
#cssmenu{width:240px}
#cssmenu >ul >li{cursor:pointer;background:#efefef;}
#cssmenu >ul >li:first-child{border-top:none}
#cssmenu >ul >li >a{font-weight:600;font-size:13px;display:block;color:#16A085;background:#eee;padding:12px 15px;transition:initial}
#cssmenu >ul >li >a:hover{text-decoration:none;background:#fafafa;color:#34495e;transition:initial}
#cssmenu >ul >li.active{font-weight:400}
#cssmenu >ul >li.home .close-menu{background:#16A085;color:#fff;font-size:14px;padding:15px 15px 15px 60px;display:block;text-transform:uppercase;font-weight:bold}
#cssmenu >ul >li.home .close-menu:before{content:'\f00d';display:inline-block;font-family:FontAwesome;line-height:20px;margin-right:5px;transform:rotate(0);font-size:20px;font-style:normal;font-weight:normal;top:3px;left:5px;position:absolute;padding:8px 15px;color:#fff;background:rgba(0,0,0,0.1)}
#cssmenu >ul >li.has-sub >a:after{content:'';position:absolute;top:15px;right:10px;border:5px solid transparent;border-left:5px solid #666;transition:initial}
#cssmenu >ul >li.has-sub >a:hover:after{border-left:5px solid #444}
#cssmenu >ul >li.has-sub.active >a:after{right:14px;top:17px;border:5px solid transparent;border-top:5px solid #666;transition:initial}
#cssmenu >ul >li.has-sub.active >a:hover:after{border-top:5px solid #444}
#cssmenu ul ul{padding:0;display:none}
#cssmenu ul ul.expand{max-height: 250px;overflow:auto}
#cssmenu ul ul a{background:#34495e;display:block;color:#fff;font-size:13px;transition:initial}
#cssmenu ul ul a:hover{background:#16A085;color:#fff;transition:initial}
#cssmenu ul ul li:first-child{border-top:none}
#cssmenu ul ul li:last-child{border-bottom:none}
#cssmenu ul ul li{border-bottom:1px solid #34495e}
.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
.form-control::-moz-placeholder{color:#999;opacity:1}
.form-control:-ms-input-placeholder{color:#999}
.form-control::-webkit-input-placeholder{color:#999}
.form-control::-ms-expand{background-color:transparent;border:0}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}
.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}
textarea.form-control{height:auto}
input[type=search]{-webkit-appearance:none}
</style>
<div class='fixed-navbar'>
<div class='menutrai'></div>
</div>
<div id='css-menu'>
<nav id='cssmenu'>
<ul>
<li class='home'> Đóng Menu</li>
<li><a href='/' title='Trang Chủ'> Trang Chủ</a></li>
<li class='active'><a href='/search/label/Wordpress Themes' title='Woredpress Themes'> Wordpress Themes</a></li>
<li class='active'><a href='/search/label/Blogger Template' title='Blogger Template'> Blogger Template</a></li>
<li class='has-sub'><a href='#' title='Thủ Thuật'> Hướng Dẫn</a>
<ul class='expand'>
<li><a href='/p/huong-dan-cai-dat-blogger-template.html'> Cài Đặt Blogger Template</a></li>
<li><a href='#'> Sub Menu 2</a></li>
<li><a href='#'> Sub Menu 3</a></li>
</ul>
</li>
<li class='has-sub'><a href='#' title='Tiện ích online'> Tiện Ích Online</a>
<ul class='expand'>
<li class='even'><a href='/p/responsive-design.html' target='_blank'> Test Responsive</a></li>
<li class='even'><a href='/p/up-anh.html' target='_blank'> Up Ảnh</a></li>
<li class='even'><a href='/p/nen-anh.html' target='_blank'> Nén Ảnh</a></li>
<li class='even'><a href='/p/dem-ky-tu.html' target='_blank'> Đếm Ký Tự</a></li>
<li class='even'><a href='/p/test-code.html' target='_blank'> Test Code</a></li>
<li class='even'><a href='/p/ma-hoa-code.html' target='_blank'> Mã Hóa Ký Tự</a></li>
<li class='even'><a href='/p/nen-css.html' target='_blank'> Nén CSS</a></li>
<li class='even'><a href='/p/ma-hoa-code-web.html' target='_blank'> Mã Hóa Code Web</a></li>
<li class='even'><a href='/p/ma-hoa-javascript.html' target='_blank'> Mã Hóa Javascript</a></li>
<li class='even'><a href='/p/ma-hoa-va-giai-ma-url-base64-hex.html' target='_blank'> Mã Hóa Base64</a></li>
<li class='even'><a href='/p/bang-ma-mau.html' target='_blank'> Bảng Mã Màu</a></li>
<li class='even'><a href='/p/photoshop-online.html' target='_blank'> Photoshop Online</a></li>
</ul>
</li>
<li class='has-sub'><a href='#' title='Về Chúng Tôi'> Về Chúng Tôi</a>
<ul class='expand'>
<li class='active'><a href='#' target='_blank' title='Giới Thiệu'> Giới Thiệu</a></li>
<li class='active'><a href='#' target='_blank' title='Liên Hệ'> Liên Hệ</a></li>
<li class='active'><a href='/p/sitemap.html' target='_blank' title='Sitemaps'> Sitemaps</a></li>
<li class='active'><a href='#' target='_blank' title='Phản Hồi Độc Giả'> Phản Hồi Độc Giả</a></li>
</ul>
</li>
<li><a href='/p/blogger-template-pack.html' itemprop='url'> Blogger Template Pack</a></li>
<li><a>
<form action='/search' itemprop='potentialAction' itemscope='itemscope' itemtype='https://schema.org/SearchAction' method='get' role='search'><meta content='/search?q= { q; } ' itemprop='target'/>
<div class='form-group'>
<input class='form-control' itemprop='query-input' name='q' placeholder='Tìm kiếm...' required='required' type='text'/>
</div></form></a></li>
</ul>
</nav>
</div>
<script type='text/javascript'>
//<![CDATA[	
//Side Menu
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
 $('#cssmenu li').removeClass('active');
 $(this).closest('li').addClass('active');	
 var checkElement = $(this).next();
 if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
 $(this).closest('li').removeClass('active');
 checkElement.slideUp('normal');
 }
 if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
 $('#cssmenu ul ul:visible').slideUp('normal');
 checkElement.slideDown('normal');
 }
 if($(this).closest('li').find('ul').children().length == 0) {
 return true;
 } else {
 return false;	
 }		
});
$(function() { 
 $('.menutrai').click(function () {
 $('#css-menu').css({left:'0'});
});
 $('.close-menu').click(function() {
 $('#css-menu').css({left:'-400px'});
});
 });
//]]>
</script>


<style>
.maxwrap {max-width:1200px;margin:0 auto;}
.nav_wrapper{position:fixed;left:0;top:0;width:100%;transition:top .2s ease-out}
#menu{background:#34495e;display:block;margin:0 auto;padding:0;word-wrap:break-word;width:100%;position:fixed;z-index:99;height:46px;line-height:46px;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 1px 5px rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.16);}
.scroll{top:-90px}
.no-scroll{top:0;z-index:9999}
@media only screen and (max-width: 1200px){
 #menupc{margin:0 0 0 50px}
 }
@media only screen and (max-width: 768px){
 #menupc{display:none}
 }
#menupc{font-size:0;padding:0;float:left}
#menupc ul.menus{height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#menupc a{display:block;height:46px;line-height:46px;color:#fff;font-size:14px;overflow:hidden;padding:0 7px;text-transform:uppercase;transition:initial}
#menupc ul > li a i {color:#fff}
#menupc ul > li a:hover i {color:#fff}
#menupc ul{margin:0 auto;padding:0;float:left}
#menupc ul li{position:relative;margin:0;list-style:none}
#menupc ul > li {float:left;}
#menupc input {display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer}
#menupc label {display:none;width:55px;height:48px;line-height:48px;text-align:center}
#menupc label span {font-size:16px;position:absolute;left:55px}
#menupc ul.menus li {display:block;width:100%;text-transform:none;text-shadow:none;}
#menupc ul.menus a {color:#ee9622;line-height:55px}

#menupc li ul{display:none;background:#34495e;margin:0;height:auto;position:absolute;top:99%;left:0;z-index:12;box-shadow:1px 2px 5px rgba(0,0,0,0.1);}
#menupc li:hover ul.menus,#menupc li:hover > ul{display:block;}
#menupc li:hover ul.menus,#menupc li:hover > ul{visibility:visible;opacity:1;}
#menupc li li{display:block;float:none;font-size:13px;height:auto;clear:both;margin-left:0;line-height:36px;}
#menupc li li:last-child {border:0;}
#menupc li ul ul {left:100%;top:0}
#menupc li li > a{background:#34495e;color:#fff;display:block;margin:0;text-decoration:none;text-transform:none;min-width:180px;height:36px;line-height:36px;padding:0 10px;font-size:14px;margin-top:0;transition:initial;}
#menupc li li a:hover{background:rgba(0,0,0,0.1);color:#fff}
#search-us{float:right;margin:0;padding:0;overflow:hidden;width:180px}
#search-us table{width:100%;margin:0;position:relative;height:30px}
#search-us td.search-boxy1{color:#cbd1e1!important}
#search-us input#search-boxy1[type="text"]{background:rgba(255,255,255,1);height:30px;line-height:30px;margin:0;padding:0 10px;width:100%;border:0;border-radius:3px;font-size:13px;color:rgba(0,0,0,.65)!important}
#search-us input#search-boxy1[type="text"]:hover{color:rgba(0,0,0,.95)!important;}
#search-us input#search-boxy1[type="text"]:focus{outline:none;color:rgba(0,0,0,.95)!important}
@media only screen and (max-width: 768px){
 #search-us{margin:0 20px 0 0}
 }
</style>
<div class='nav_wrapper' id='menu' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<div class='maxwrap'>
<nav id='menupc' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul id='simplify-click'>
<li><a class='active' href='/'> Trang Chủ</a></li>
<li><a href='/search/label/Wordpress Themes' itemprop='url'> Wordpress Themes</a>
<ul>
<li><a href='/search/label/Premium Wordpress Themes' itemprop='url'> Premium Themes</a></li>
<li><a href='/search/label/Wordpress Themes Tin Tức - Tạp Chí' itemprop='url'> Tin Tức - Tạp Chí</a></li>
<li><a href='/search/label/Wordpress Themes Cá Nhân' itemprop='url'> Cá Nhân</a></li>
<li><a href='/search/label/Wordpress Themes Bán Hàng' itemprop='url'> Bán Hàng</a></li>
<li><a href='/search/label/Wordpress Themes Video - Phim' itemprop='url'> Video - Phim</a></li>
<li><a href='/search/label/Wordpress Themes Manga - Anime' itemprop='url'> Manga - Anime</a></li>
<li><a href='/search/label/Wordpress Themes Landing Page' itemprop='url'> Landing Page</a></li>
</ul>
</li>
<li><a href='/search/label/Blogger Template' itemprop='url'> Blogger Template</a>
<ul>
<li><a href='/search/label/Premium Blogger Template' itemprop='url'> Premium Template</a></li>
<li><a href='/search/label/Blogger Template Tin Tức - Tạp Chí' itemprop='url'> Tin Tức - Tạp Chí</a></li>
<li><a href='/search/label/Blogger Template Cá Nhân' itemprop='url'> Cá Nhân</a></li>
<li><a href='/search/label/Blogger Template Bán Hàng' itemprop='url'> Bán Hàng</a></li>
<li><a href='/search/label/Blogger Template Landing Page' itemprop='url'> Landing Page</a></li>
<li><a href='/search/label/Blogger Template Landing Profile' itemprop='url'> Landing Profile</a></li>
<li><a href='/search/label/Blogger Template Video - Phim' itemprop='url'> Video - Phim</a></li>
<li><a href='/search/label/Blogger Template Manga - Anime' itemprop='url'> Manga - Anime</a></li>
<li><a href='/search/label/Blogger Template Hình Ảnh' itemprop='url'> Hình Ảnh</a></li>
<li><a href='/search/label/Blogger Template Sách' itemprop='url'> Sách</a></li>
<li><a href='/search/label/Blogger Template Forum' itemprop='url'> Template Forum</a></li>
<li><a href='/search/label/Blogger Template Đếm Ngược' itemprop='url'> Đếm Ngược</a></li>
</ul>
</li>
<li><a href='/search/label/Other Template' itemprop='url'> Other Template</a>
<ul>
<li><a href='/search/label/HTML Template' itemprop='url'> HTML Template</a></li>
<li><a href='/search/label/PSD Template' itemprop='url'> PSD Template</a></li>
</ul>
</li>
<li><a href='#' itemprop='url'> Hướng Dẫn</a>
<ul>
<li><a href='/p/huong-dan-cai-dat-blogger-template.html' itemprop='url'> Cài Đặt Blogger Template</a></li>
<li><a href='#' itemprop='url'> Cài Đặt Wordpress Theme</a></li>
<li><a href='#' itemprop='url'> Cài Đặt HTML Template</a></li>
</ul>
</li>
<li><a href='/p/blogger-template-pack.html' itemprop='url'> Blogger Template Pack</a></li>
</ul>
</nav>
<form action='/search' id='search-us' method='get'>
<table>
<tbody>
<tr>
<td class='search-boxy1'>
<input id='search-boxy1' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Tìm kiếm...'/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class='clear'></div>

Các bạn thay tên menu cho phù hợp với blog của các bạn nhé! Và cuối cùng lưu lại và tận hưởng thành quả.

Chúc bạn thành công !

Chia sẻ code tạo menu Mobile Và Máy tính chuẩn, đẹp cho blogspot

Chia sẻ code tạo menu Mobile Và Máy tính chuẩn, đẹp cho blogspot

Comments

Post a Comment

Liên quan