Mấy bác xem hộ em với sao lại không thể mởi được nav thế này
Link demo nav ban đầu: http://studymore.forumvi.com/h10-page
Code hơi dài, mong mấy bác làm ơn giúp đỡ để em nâng cao trình độ và có thêm nghị lực để tiếp tục học lập trình code
Link demo nav ban đầu: http://studymore.forumvi.com/h10-page
- Code trước khi thêm:
- Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:700,500,400,300,300italic" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
if(typeof(_userdata) == "undefined")
var _userdata = new Object();
_userdata["session_logged_in"] = 1;
_userdata["username"] = "MạnhLinh2002";
_userdata["user_id"] = 1;
_userdata["user_level"] = 1;
_userdata["user_lang"] = "vi";
_userdata["activate_toolbar"] = 0;
_userdata["fix_toolbar"] = 0;
_userdata["notifications"] = 1;
_userdata["avatar"] = "<img src=\"http://r36.imgfast.net/users/3612/21/65/38/avatars/1-8.jpg\" alt=\"\" />";
_userdata["user_posts"] = 49;
_userdata["user_nb_privmsg"] = 0;
_userdata["point_reputation"] = 36;
if(typeof(_lang) == "undefined") {
var _lang = new Object();
}
_lang["Twitter"] ="Forumotion";
//]]>
</script>
<script>
$(document).ready(function(){
$("a#myname").attr(href,'/u' + _userdata.user_id + 'wall');
});
function navoption(n){
$('.navoption a').removeClass('navactive');
$('.navmain ul').slideUp("0.2");
$('#navbtn' + n).addClass('navactive');
$('#nav' + n).slideDown("0.2");
};
function navopen(){
$("nav#linhnav").animate({
left: '0px',
},"fast");
};
function navclose(){
$("nav#linhnav").animate({
left: '-300px',
},"fast");
};
function changeColor(id) {
var $color = $(".transparent");
$color.removeClass("red blue yellow");
$color.addClass(id);
}
</script>
<style>
*{box-sizing:border-box;margin:0;padding:0}
ul{list-style-type:none}
a{text-decoration:none}
body{background:rgba(0,0,0,0.06);background-attachment:scroll;color:#565656;font-family:Roboto,sans-serif;font-size:12px;line-height:135%;margin:0 auto;text-decoration:none}
/*Change color*/
.blue .navoption a{color:#0052b9;background:#c3ddff;border-bottom:3px solid #5d8fff;}
.blue .navactive {background:#1e78ea!important;border-bottom:3px solid #0a4da2!important}
.blue .navoption a:hover{color:#0052b9;background:#b0d2ff;border-bottom:3px solid #1e78ea}
.blue ul#nav2 a:hover {background:#3C7CCE;}
.blue input.tool-checkbox-on:checked + .slider{background-color:#2196F3}
.blue #closenav {background: #1e78ea;}
.blue #closenav:hover {color: #1e78ea;border: 2px solid #1e78ea;background: #ffffff;}
.blue div#color-input {background-color: #1e78ea;}
.blue div#color-input:hover {color: #1e78ea;border: 2px solid #1e78ea;background: #ffffff;}
#linhtoolbar.blue {background-color: #1e78ea}
.blue .finding input[type="text"] {background-color: white}
.blue .finding input[type*="text"] {background:#42a1ff}
.blue .searchbtn {background:#42a1ff}
.red .navoption a{color:#d81000;background:#ffcaca;border-bottom:3px solid #ff665a;}
.red .navactive {background:#de3d30!important;border-bottom:3px solid #940000!important}
.red .navoption a:hover{color:#d81000;background:#ffb5b5;border-bottom:3px solid #de3d30}
.red ul#nav2 a:hover {background:#de3d30;}
.red input.tool-checkbox-on:checked + .slider{background-color:#2196F3}
.red #closenav {background: #de3d30;}
.red #closenav:hover {color: #de3d30;border: 2px solid #de3d30;background: #ffffff;}
.red div#color-input {background-color: #de3d30;}
.red div#color-input:hover {color: #de3d30;border: 2px solid #de3d30;background: #ffffff;}
#linhtoolbar.red {background-color: #de3d30}
.red .finding input[type="text"] {background-color: white}
.red .finding input[type*="text"] {background:#ff6767}
.red .searchbtn {background:#ff6767}
.yellow .navoption a{color:#bb9400;background:#ffe5aa;border-bottom:3px solid #ffbe2b;}
.yellow .navactive {background:#f5aa00!important;border-bottom:3px solid #b98000!important}
.yellow .navoption a:hover{color:#bb9400;background:#ffdf98;border-bottom:3px solid #f5aa00}
.yellow ul#nav2 a:hover {background:#f5aa00;}
.yellow input.tool-checkbox-on:checked + .slider{background-color:#2196F3}
.yellow #closenav {background: #f5aa00;}
.yellow #closenav:hover {color: #f5aa00;border: 2px solid #f5aa00;background: #ffffff;}
.yellow div#color-input {background-color: #f5aa00;}
.yellow div#color-input:hover {color: #f5aa00;border: 2px solid #f5aa00;background: #ffffff;}
#linhtoolbar.yellow {background-color: #f5aa00}
.yellow .finding input[type="text"] {background-color: white}
.yellow .finding input[type*="text"] {background:#ffc540}
.yellow .searchbtn {background:#ffc540}
/*Toolbar*/
.listbutton {height:46px;font-size:26px;color:#fff;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.listbutton:hover {color:#55ACEE;border-bottom: 2px solid #55ACEE}
.btnav{float:left;}
.btnav>a {font-size:26px;color:#fff;padding:5px 0px;display: inline-block;width: 46px;cursor: pointer;}
.btnav i {font-size: 32px;}
.linedashed {border-bottom: 1px solid rgba(0, 0, 0, 0.23);}
#linhtoolbar {box-shadow:0 2px 5px rgba(0, 0, 0, 0.43);-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.43);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.43);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;display:inline-block;list-style-type: none;margin: 0;padding: 0;position: fixed;top: 0;width: 100%;z-index:3;}
#linhtoolbar>div>li {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#linhtoolbar>div>li>a:not(.menuAvatar){background-color: transparent;text-align: center;text-decoration: none;height:46px;position: relative;}
.fmname {float:left;}
.fmname>a {display:none;width:46px;font-size: 26px; color: #fff;padding:10px 0 ; margin:0;font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;cursor: pointer;}
.fmname>a:after,.btnav>a:after{content:"";background:rgba(255,255,255,0.35);display:block;visibility:hidden;position:absolute;right:0;bottom:0;top:0;left:0;opacity:0;transition:.4s;z-index:1}
.btnav>a:hover:after,.fmname>a:hover:after{padding:0;margin:0;opacity:1;visibility:visible}
.fmname span{display:none}
.cach {margin:0 5px;}
.li-phai {float:right!important;}
.menuAvatar {display: none;padding:10px;margin:0;height:46px}
.menuAvatar > img{height:26px;bottom:0px;background: #39b6ff;}
.menuAvatar > strong{font-size:15px;font-weight:500;padding:6px;float:right;height:28px;background:#39b6ff;color:#efefef;text-shadow:1px 1px 1px #3c3c3c}
/*search*/
form.finding{margin:0;padding: 8px;width: 100%;float: right;}
.finding input {float:left;}
.finding input[type*="text"] {text-indent: 8px;float:left;font-weight: 400;text-decoration: none;font-size: 14px;padding: auto; min-height: 30px;border: none;width: 90%;color:#fff}
.finding input[type*="text"]:focus {outline-offset: 0px;outline: rgba(255, 255, 255, 0);background-color: white;color: #383838}
.searchbtn {border:none;color: #fff;font-size:17px;font-family:'Material Icons';cursor: pointer;height:30px;width:10%;}
.searchform {position: relative;margin-left: 46px;}
.searchbtn:hover{background:#585858;}
nav#linhnav{z-index:9999;background:#fff;position:fixed;top:0;left:0;height:100%;width:280px;box-shadow:0 7px 14px rgba(0,0,0,0.68);overflow:auto}
.navhead{height:36px;width:100%}
.navoption{float:left;width:100%}
.navoption li{float:left;width:50%}
.navoption a{padding:10px;font-size:16px;display:block;float:left;text-align:center;width:100%}
.navactive{color:#fff!important;}
.navmain{float:left;width:100%}
.navmain ul{float:left;width:100%}
.navmain li{width:100%}
.navmain a{color:#545454;cursor:pointer;display:block}
ul#nav1 a{font-size:18px;padding:12px 6px;transition:.2s;height:52px}
ul#nav1 a:hover{background:#DEDEDE}
ul#nav1 span{float:left;height:28px;padding:7px}
ul#nav1 i{font-size:28px;display:block;float:left;height:28px;width:42px;text-align:center}
ul#nav2 a{font-size:17px;padding:7px;font-family:Roboto,sans-serif;height:44px}
ul#nav2 a:before{font-family:Material Icons;width:37px;display:block;float:left;font-size:23px}
ul#nav2 a:hover{color:#fff;transition:.5s}
ul#nav2 a:hover:after{content:"keyboard_arrow_right";font-family:Material Icons;float:right;font-size:20px;margin-right:6px;margin-top:7px}
ul#nav2>li:last-child >a:hover{background:#F34141}
ul#nav2 i{font-size:28px;display:block;float:left;height:28px;width:42px;text-align:center}
ul#nav2 span{display:block;float:left;height:28px;padding:7px}
.tool-checkbox-on{height:40px;background:red}
.tool-checkbox-off{background:#00ff1f;height:40px}
.root{height:300px;background:#06f;display:block}
.hide{height:0;overflow:hidden}
.switch{position:relative;display:inline-block;width:38px;height:23px;float:left}
.switch input.tool-checkbox-on{display:none}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}
.slider:before{position:absolute;content:"";height:17px;width:17px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}
input.tool-checkbox-on:focus + .slider{box-shadow:0 0 1px #2196F3}
input.tool-checkbox-on:checked + .slider:before{-webkit-transform:translateX(-14px);-ms-transform:translateX(-14px);transform:translateX(-14px)}
#tool{margin-top:36px}
#tool dt{width:226px;border-bottom:2px solid #afafaf;margin:0 22px 8px;float:left}
#tool dd{float:left;padding:9px}
span.tool-span-dt{padding:4px 7px!important;font-size:16px;width:78px;color:#5f5f5f}
#tool dd{float:left;padding:10px;margin-left:22px}
span.tool-span-dl{font-size:16px;text-decoration:none;font-weight:400;padding:4px 9px!important}
.tool-span-dl strong{font-weight:400}
span.myname{position:absolute;top:52px;left:100px;font-size:30px;color:#efefef;text-shadow:3px 3px #585858}
img#myavatar{position:absolute;top:28px;left:26px;border-radius:50%;box-shadow:1px 1px 11px #151515}
#closenav{position:absolute;right:0;top:0;display:block;color:#fff;cursor:pointer;height:33px;width:33px;text-align:center;padding:5px}
#closenav:hover{padding:3px}
#changecolor{position:absolute;display:inline-block}
#changecolor-input{display:inline-block;width:27px;height:27px}
#changecolor input{display:none}
#changecolor-box{position:absolute;cursor:pointer;left:0;top:27px;width:136px;background-color:#fff;padding:2px;border:1px solid #797979;box-shadow:1px 1px 10px #636363}
div#changecolor-box>a{display:block;float:left;padding:8px;width:130px;color:#fff;font-size:14px;font-weight:500}
div#changecolor-box>a:first-child{background:#1e78ea}
div#changecolor-box>a:nth-child(2){background:#EA4335}
div#changecolor-box>a:nth-child(3){background:#f5aa00}
div#changecolor-box>a:hover{background:#505050}
#changecolor input:checked + .changecolor-box{background-color:#2196F3}
#changecolor input:focus + .changecolor-box{box-shadow:0 0 1px #2196F3}
#changecolor input:checked + .changecolor-box:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}
div#color-input{height:27px;width:27px;background-image:url(http://2img.net/i/fa/wysiwyg/color_swatch.png)!important;float:left;padding:4px;background-position:center center!important;background-repeat:no-repeat!important}
@media only screen and (min-height: 615px) {
.navhead{height:130px;}
}
@media only screen and (min-width: 426px) {
.fmname>a {display:block;}
.searchform {position: relative;margin-left: 92px;}
}
@media only screen and (min-width: 768px) {
.finding input[type*="text"] {width: 463px;}
.fmname>a {width: initial;padding:10px}
.fmname span{display: block;margin-top: 6px;margin-left: 5px;}
li.fmname * { float: left;}
.searchform {width: 539px;position:static;float:right;margin:0}
.searchbtn {width:60px}
.fmrow1 .last-user {font-size: 12px;}
a.last-post-icon{margin-right:10px;}
}
@media only screen and (min-width: 1024px) {
.li-phai>a{display: block;}
.searchform {float:left;}
a.lastpost-title {overflow: visible;}
.forumtd img ,.forumicon {display:block}
.fmrow2 img {display:none}
a.forum-desc {font-size:14px}
.forumrow {margin-left:80px}
}
@media only screen and (min-width: 1100px) {
.cach{margin:0 30px}
#emptyidcc{margin:0 30px;}
}
</style>
</head>
<body>
<ul id="linhtoolbar" class="transparent blue">
<div class="cach">
<li class="btnav"><a onclick="navopen();"><i class="material-icons">menu</i></a></li>
<li class="fmname"><a href="{U_INDEX}"><i class="material-icons">chat</i> <span>Terashare</span></a></li>
<li class="searchform">
<form action="/h6-page" method="get" name="searchform" class="finding">
<input type="text" name="search_keywords" id="keyfind" placeholder="Nhập và tìm kiếm..." required/>
<input type="hidden" name="google" value=""/>
<input type="submit" value="search" onclick="document.searchform.google.value='';" class="searchbtn"/>
</form>
</li>
<!-- BEGIN switch_user_logged_in -->
<li class="li-phai"><div class="uProfile" >Script ko hoạt động</div></li>
<script type="text/javascript">
$(".uProfile").replaceWith( ' <a class="menuAvatar">' + _userdata.avatar + ' ' + ' <strong>' + _userdata.username + ' </strong></a>');var $numberNewmess = $(".numberNewmess > strong");$numberNewmess.length && $(".numberNewmess").text($numberNewmess.text()).show();
</script>
<!-- END switch_user_logged_in -->
</div>
</ul>
<nav id="linhnav" class="transparent blue" style="left:-300px">
<div class="navhead">
<img scr=""/>
<span class="fmname"></span>
<img id="myavatar" src=""/>
<span class="myname"></span>
<a id="closenav" onclick="navclose();"><i class="material-icons">keyboard_arrow_left</i></a>
<div id="changecolor">
<label id="changecolor-input">
<input type="checkbox" onchange="toggle()">
<div id="color-input">
</div>
</label>
<div id="changecolor-box" style="display:none">
<a onclick="changeColor('blue')"><div class="colorbox" style="background:#054aa2"></div><span>Xanh dương</span></a>
<a onclick="changeColor('red')"><div class="colorbox" style="background:#b50e00"></div><span>Đỏ</span></a>
<a onclick="changeColor('yellow')"><div class="colorbox" style="background:#f5aa00"></div><span>Vàng</span></a>
</div>
</div>
</div>
</div>
<div class="navbody">
<div class="navoption">
<ul>
<li><a href="#" onclick="navoption('1')" id="navbtn1" class="navactive">Forum</a></li>
<li><a href="#" onclick="navoption('2')" id="navbtn2" class="">Cá Nhân</a></li>
<ul>
</div>
<div class="navmain">
<ul id="nav1">
<li><a href="/"><i class="material-icons">home</i><span>Trang Chủ</span></a></li>
<li><a href="/"><i class="material-icons">games</i><span>Box Trò Chơi</span></a></li>
<li><a href="/faq"><i class="material-icons">live_help</i><span>Hướng Dẫn</span></a></li>
<li><div id="tool">
<dl>
<dt><i class="material-icons" style="width: 32px;font-size: 23px;color: #5f5f5f;">build</i><span class="tool-span-dt">Công Cụ</span></dt>
<dd><label class="switch"><input type="checkbox" class="tool-checkbox-on" id="bc1" onclick="toggleCategory.call(this)"/><div class="slider"></div></label><span class="tool-span-dl"><strong>Tắt</strong> quảng cáo</span></dd>
</dl>
</div></li>
</ul>
<ul id="nav2" class="transparent blue" style="display:none">
<li><a id="mynamex" href="/profile?mode=editprofile"><i class="material-icons">account_box</i><span>Tường cá nhân</a></span></li>
<li><a class="" href="/profile?mode=editprofile"><i class="material-icons">settings</i><span>Sửa đổi thông tin</span></a></li>
<li><a class="" href="/profile?mode=editprofile&page_profil=preferences"><i class="material-icons">lock</i><span>Tùy chọn riêng tư</span></a></li>
<li><a class="" href="/profile?mode=editprofile&page_profil=signature"><i class="material-icons">border_color</i><span>Sửa đổi chữ ký</span></a></li>
<li><a class="" href="/profile?mode=editprofile&page_profil=avatars"><i class="material-icons">insert_photo</i><span>Thay ảnh đại diện</span></a></li>
<li class="line"><a class="" href="/search?search_id=watchsearch"><i class="material-icons">bookmark</i><span>Bài đang theo dõi</span></a></li>
<li><a href="/search?search_id=favouritesearch" class=""><i class="material-icons">favorite</i><span>Bài viết ưa thích</span></a></li>
<li><a class="" href="/search?search_id=egosearch"><i class="material-icons">person</i><span>Bài viết của bạn</span></a></li>
<li><a href="/search?search_id=unanswered" class=""><i class="material-icons">block</i><span>Bài chưa trả lời</span></a></li>
<li class="line "><a href="{U_LOGIN_LOGOUT}" class=""><i class="material-icons">power_settings_new</i><span>Thoát</span></a></li>
</ul>
</div>
</div>
<div class="navfoot">
</div>
</nav>
<script>
function toggle(){
$("#changecolor-box").slideToggle('slow');
};
</script>
</body>
</html>
- Code sau khi thêm:
- Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:700,500,400,300,300italic" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
if(typeof(_userdata) == "undefined")
var _userdata = new Object();
_userdata["session_logged_in"] = 1;
_userdata["username"] = "MạnhLinh2002";
_userdata["user_id"] = 1;
_userdata["user_level"] = 1;
_userdata["user_lang"] = "vi";
_userdata["activate_toolbar"] = 0;
_userdata["fix_toolbar"] = 0;
_userdata["notifications"] = 1;
_userdata["avatar"] = "<img src=\"http://r36.imgfast.net/users/3612/21/65/38/avatars/1-8.jpg\" alt=\"\" />";
_userdata["user_posts"] = 49;
_userdata["user_nb_privmsg"] = 0;
_userdata["point_reputation"] = 36;
if(typeof(_lang) == "undefined") {
var _lang = new Object();
}
_lang["Twitter"] ="Forumotion";
//]]>
</script>
<script>
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return 'blue';
}
$(document).ready(function(){
$("a#myname").attr(href,'/u' + _userdata.user_id + 'wall');
});
function navoption(n){
$('.navoption a').removeClass('navactive');
$('.navmain ul').slideUp("0.2");
$('#navbtn' + n).addClass('navactive');
$('#nav' + n).slideDown("0.2");
};
function navopen(){
$("nav#linhnav").animate({
left: '0px',
},"fast");
};
function navclose(){
$("nav#linhnav").animate({
left: '-300px',
},"fast");
};
function changeColor(id) {
var $color = $(".transparent");
$color.removeClass("red blue yellow");
$color.addClass(id);
setCookie("colorchange",id,365);
}
$(function(){
$(".transparent").each(function{
var colorchange = getCookie("colorchange");
var $color = $(".transparent");
$color.removeClass("red blue yellow");
$color.addClass(colorchange);
});
});
</script>
<style>
*{box-sizing:border-box;margin:0;padding:0}
ul{list-style-type:none}
a{text-decoration:none}
body{background:rgba(0,0,0,0.06);background-attachment:scroll;color:#565656;font-family:Roboto,sans-serif;font-size:12px;line-height:135%;margin:0 auto;text-decoration:none}
/*Change color*/
.blue .navoption a{color:#0052b9;background:#c3ddff;border-bottom:3px solid #5d8fff;}
.blue .navactive {background:#1e78ea!important;border-bottom:3px solid #0a4da2!important}
.blue .navoption a:hover{color:#0052b9;background:#b0d2ff;border-bottom:3px solid #1e78ea}
.blue ul#nav2 a:hover {background:#3C7CCE;}
.blue input.tool-checkbox-on:checked + .slider{background-color:#2196F3}
.blue #closenav {background: #1e78ea;}
.blue #closenav:hover {color: #1e78ea;border: 2px solid #1e78ea;background: #ffffff;}
.blue div#color-input {background-color: #1e78ea;}
.blue div#color-input:hover {color: #1e78ea;border: 2px solid #1e78ea;background: #ffffff;}
#linhtoolbar.blue {background-color: #1e78ea}
.blue .finding input[type="text"] {background-color: white}
.blue .finding input[type*="text"] {background:#42a1ff}
.blue .searchbtn {background:#42a1ff}
.red .navoption a{color:#d81000;background:#ffcaca;border-bottom:3px solid #ff665a;}
.red .navactive {background:#de3d30!important;border-bottom:3px solid #940000!important}
.red .navoption a:hover{color:#d81000;background:#ffb5b5;border-bottom:3px solid #de3d30}
.red ul#nav2 a:hover {background:#de3d30;}
.red input.tool-checkbox-on:checked + .slider{background-color:#2196F3}
.red #closenav {background: #de3d30;}
.red #closenav:hover {color: #de3d30;border: 2px solid #de3d30;background: #ffffff;}
.red div#color-input {background-color: #de3d30;}
.red div#color-input:hover {color: #de3d30;border: 2px solid #de3d30;background: #ffffff;}
#linhtoolbar.red {background-color: #de3d30}
.red .finding input[type="text"] {background-color: white}
.red .finding input[type*="text"] {background:#ff6767}
.red .searchbtn {background:#ff6767}
.yellow .navoption a{color:#bb9400;background:#ffe5aa;border-bottom:3px solid #ffbe2b;}
.yellow .navactive {background:#f5aa00!important;border-bottom:3px solid #b98000!important}
.yellow .navoption a:hover{color:#bb9400;background:#ffdf98;border-bottom:3px solid #f5aa00}
.yellow ul#nav2 a:hover {background:#f5aa00;}
.yellow input.tool-checkbox-on:checked + .slider{background-color:#2196F3}
.yellow #closenav {background: #f5aa00;}
.yellow #closenav:hover {color: #f5aa00;border: 2px solid #f5aa00;background: #ffffff;}
.yellow div#color-input {background-color: #f5aa00;}
.yellow div#color-input:hover {color: #f5aa00;border: 2px solid #f5aa00;background: #ffffff;}
#linhtoolbar.yellow {background-color: #f5aa00}
.yellow .finding input[type="text"] {background-color: white}
.yellow .finding input[type*="text"] {background:#ffc540}
.yellow .searchbtn {background:#ffc540}
/*Toolbar*/
.listbutton {height:46px;font-size:26px;color:#fff;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.listbutton:hover {color:#55ACEE;border-bottom: 2px solid #55ACEE}
.btnav{float:left;}
.btnav>a {font-size:26px;color:#fff;padding:5px 0px;display: inline-block;width: 46px;cursor: pointer;}
.btnav i {font-size: 32px;}
.linedashed {border-bottom: 1px solid rgba(0, 0, 0, 0.23);}
#linhtoolbar {box-shadow:0 2px 5px rgba(0, 0, 0, 0.43);-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.43);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.43);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;display:inline-block;list-style-type: none;margin: 0;padding: 0;position: fixed;top: 0;width: 100%;z-index:3;}
#linhtoolbar>div>li {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#linhtoolbar>div>li>a:not(.menuAvatar){background-color: transparent;text-align: center;text-decoration: none;height:46px;position: relative;}
.fmname {float:left;}
.fmname>a {display:none;width:46px;font-size: 26px; color: #fff;padding:10px 0 ; margin:0;font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;cursor: pointer;}
.fmname>a:after,.btnav>a:after{content:"";background:rgba(255,255,255,0.35);display:block;visibility:hidden;position:absolute;right:0;bottom:0;top:0;left:0;opacity:0;transition:.4s;z-index:1}
.btnav>a:hover:after,.fmname>a:hover:after{padding:0;margin:0;opacity:1;visibility:visible}
.fmname span{display:none}
.cach {margin:0 5px;}
.li-phai {float:right!important;}
.menuAvatar {display: none;padding:10px;margin:0;height:46px}
.menuAvatar > img{height:26px;bottom:0px;background: #39b6ff;}
.menuAvatar > strong{font-size:15px;font-weight:500;padding:6px;float:right;height:28px;background:#39b6ff;color:#efefef;text-shadow:1px 1px 1px #3c3c3c}
/*search*/
form.finding{margin:0;padding: 8px;width: 100%;float: right;}
.finding input {float:left;}
.finding input[type*="text"] {text-indent: 8px;float:left;font-weight: 400;text-decoration: none;font-size: 14px;padding: auto; min-height: 30px;border: none;width: 90%;color:#fff}
.finding input[type*="text"]:focus {outline-offset: 0px;outline: rgba(255, 255, 255, 0);background-color: white;color: #383838}
.searchbtn {border:none;color: #fff;font-size:17px;font-family:'Material Icons';cursor: pointer;height:30px;width:10%;}
.searchform {position: relative;margin-left: 46px;}
.searchbtn:hover{background:#585858;}
nav#linhnav{z-index:9999;background:#fff;position:fixed;top:0;left:0;height:100%;width:280px;box-shadow:0 7px 14px rgba(0,0,0,0.68);overflow:auto}
.navhead{height:36px;width:100%}
.navoption{float:left;width:100%}
.navoption li{float:left;width:50%}
.navoption a{padding:10px;font-size:16px;display:block;float:left;text-align:center;width:100%}
.navactive{color:#fff!important;}
.navmain{float:left;width:100%}
.navmain ul{float:left;width:100%}
.navmain li{width:100%}
.navmain a{color:#545454;cursor:pointer;display:block}
ul#nav1 a{font-size:18px;padding:12px 6px;transition:.2s;height:52px}
ul#nav1 a:hover{background:#DEDEDE}
ul#nav1 span{float:left;height:28px;padding:7px}
ul#nav1 i{font-size:28px;display:block;float:left;height:28px;width:42px;text-align:center}
ul#nav2 a{font-size:17px;padding:7px;font-family:Roboto,sans-serif;height:44px}
ul#nav2 a:before{font-family:Material Icons;width:37px;display:block;float:left;font-size:23px}
ul#nav2 a:hover{color:#fff;transition:.5s}
ul#nav2 a:hover:after{content:"keyboard_arrow_right";font-family:Material Icons;float:right;font-size:20px;margin-right:6px;margin-top:7px}
ul#nav2>li:last-child >a:hover{background:#F34141}
ul#nav2 i{font-size:28px;display:block;float:left;height:28px;width:42px;text-align:center}
ul#nav2 span{display:block;float:left;height:28px;padding:7px}
.tool-checkbox-on{height:40px;background:red}
.tool-checkbox-off{background:#00ff1f;height:40px}
.root{height:300px;background:#06f;display:block}
.hide{height:0;overflow:hidden}
.switch{position:relative;display:inline-block;width:38px;height:23px;float:left}
.switch input.tool-checkbox-on{display:none}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}
.slider:before{position:absolute;content:"";height:17px;width:17px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}
input.tool-checkbox-on:focus + .slider{box-shadow:0 0 1px #2196F3}
input.tool-checkbox-on:checked + .slider:before{-webkit-transform:translateX(-14px);-ms-transform:translateX(-14px);transform:translateX(-14px)}
#tool{margin-top:36px}
#tool dt{width:226px;border-bottom:2px solid #afafaf;margin:0 22px 8px;float:left}
#tool dd{float:left;padding:9px}
span.tool-span-dt{padding:4px 7px!important;font-size:16px;width:78px;color:#5f5f5f}
#tool dd{float:left;padding:10px;margin-left:22px}
span.tool-span-dl{font-size:16px;text-decoration:none;font-weight:400;padding:4px 9px!important}
.tool-span-dl strong{font-weight:400}
span.myname{position:absolute;top:52px;left:100px;font-size:30px;color:#efefef;text-shadow:3px 3px #585858}
img#myavatar{position:absolute;top:28px;left:26px;border-radius:50%;box-shadow:1px 1px 11px #151515}
#closenav{position:absolute;right:0;top:0;display:block;color:#fff;cursor:pointer;height:33px;width:33px;text-align:center;padding:5px}
#closenav:hover{padding:3px}
#changecolor{position:absolute;display:inline-block}
#changecolor-input{display:inline-block;width:27px;height:27px}
#changecolor input{display:none}
#changecolor-box{position:absolute;cursor:pointer;left:0;top:27px;width:136px;background-color:#fff;padding:2px;border:1px solid #797979;box-shadow:1px 1px 10px #636363}
div#changecolor-box>a{display:block;float:left;padding:8px;width:130px;color:#fff;font-size:14px;font-weight:500}
div#changecolor-box>a:first-child{background:#1e78ea}
div#changecolor-box>a:nth-child(2){background:#EA4335}
div#changecolor-box>a:nth-child(3){background:#f5aa00}
div#changecolor-box>a:hover{background:#505050}
#changecolor input:checked + .changecolor-box{background-color:#2196F3}
#changecolor input:focus + .changecolor-box{box-shadow:0 0 1px #2196F3}
#changecolor input:checked + .changecolor-box:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}
div#color-input{height:27px;width:27px;background-image:url(http://2img.net/i/fa/wysiwyg/color_swatch.png)!important;float:left;padding:4px;background-position:center center!important;background-repeat:no-repeat!important}
@media only screen and (min-height: 615px) {
.navhead{height:130px;}
}
@media only screen and (min-width: 426px) {
.fmname>a {display:block;}
.searchform {position: relative;margin-left: 92px;}
}
@media only screen and (min-width: 768px) {
.finding input[type*="text"] {width: 463px;}
.fmname>a {width: initial;padding:10px}
.fmname span{display: block;margin-top: 6px;margin-left: 5px;}
li.fmname * { float: left;}
.searchform {width: 539px;position:static;float:right;margin:0}
.searchbtn {width:60px}
.fmrow1 .last-user {font-size: 12px;}
a.last-post-icon{margin-right:10px;}
}
@media only screen and (min-width: 1024px) {
.li-phai>a{display: block;}
.searchform {float:left;}
a.lastpost-title {overflow: visible;}
.forumtd img ,.forumicon {display:block}
.fmrow2 img {display:none}
a.forum-desc {font-size:14px}
.forumrow {margin-left:80px}
}
@media only screen and (min-width: 1100px) {
.cach{margin:0 30px}
#emptyidcc{margin:0 30px;}
}
</style>
</head>
<body>
<ul id="linhtoolbar" class="transparent blue">
<div class="cach">
<li class="btnav"><a onclick="navopen();"><i class="material-icons">menu</i></a></li>
<li class="fmname"><a href="{U_INDEX}"><i class="material-icons">chat</i> <span>Terashare</span></a></li>
<li class="searchform">
<form action="/h6-page" method="get" name="searchform" class="finding">
<input type="text" name="search_keywords" id="keyfind" placeholder="Nhập và tìm kiếm..." required/>
<input type="hidden" name="google" value=""/>
<input type="submit" value="search" onclick="document.searchform.google.value='';" class="searchbtn"/>
</form>
</li>
<!-- BEGIN switch_user_logged_in -->
<li class="li-phai"><div class="uProfile" >Script ko hoạt động</div></li>
<script type="text/javascript">
$(".uProfile").replaceWith( ' <a class="menuAvatar">' + _userdata.avatar + ' ' + ' <strong>' + _userdata.username + ' </strong></a>');var $numberNewmess = $(".numberNewmess > strong");$numberNewmess.length && $(".numberNewmess").text($numberNewmess.text()).show();
</script>
<!-- END switch_user_logged_in -->
</div>
</ul>
<nav id="linhnav" class="transparent blue" style="left:-300px">
<div class="navhead">
<img scr=""/>
<span class="fmname"></span>
<img id="myavatar" src=""/>
<span class="myname"></span>
<a id="closenav" onclick="navclose();"><i class="material-icons">keyboard_arrow_left</i></a>
<div id="changecolor">
<label id="changecolor-input">
<input type="checkbox" onchange="toggle()">
<div id="color-input">
</div>
</label>
<div id="changecolor-box" style="display:none">
<a onclick="changeColor('blue')"><div class="colorbox" style="background:#054aa2"></div><span>Xanh dương</span></a>
<a onclick="changeColor('red')"><div class="colorbox" style="background:#b50e00"></div><span>Đỏ</span></a>
<a onclick="changeColor('yellow')"><div class="colorbox" style="background:#f5aa00"></div><span>Vàng</span></a>
</div>
</div>
</div>
</div>
<div class="navbody">
<div class="navoption">
<ul>
<li><a href="#" onclick="navoption('1')" id="navbtn1" class="navactive">Forum</a></li>
<li><a href="#" onclick="navoption('2')" id="navbtn2" class="">Cá Nhân</a></li>
<ul>
</div>
<div class="navmain">
<ul id="nav1">
<li><a href="/"><i class="material-icons">home</i><span>Trang Chủ</span></a></li>
<li><a href="/"><i class="material-icons">games</i><span>Box Trò Chơi</span></a></li>
<li><a href="/faq"><i class="material-icons">live_help</i><span>Hướng Dẫn</span></a></li>
<li><div id="tool">
<dl>
<dt><i class="material-icons" style="width: 32px;font-size: 23px;color: #5f5f5f;">build</i><span class="tool-span-dt">Công Cụ</span></dt>
<dd><label class="switch"><input type="checkbox" class="tool-checkbox-on" id="bc1" onclick="toggleCategory.call(this)"/><div class="slider"></div></label><span class="tool-span-dl"><strong>Tắt</strong> quảng cáo</span></dd>
</dl>
</div></li>
</ul>
<ul id="nav2" class="transparent blue" style="display:none">
<li><a id="mynamex" href="/profile?mode=editprofile"><i class="material-icons">account_box</i><span>Tường cá nhân</a></span></li>
<li><a class="" href="/profile?mode=editprofile"><i class="material-icons">settings</i><span>Sửa đổi thông tin</span></a></li>
<li><a class="" href="/profile?mode=editprofile&page_profil=preferences"><i class="material-icons">lock</i><span>Tùy chọn riêng tư</span></a></li>
<li><a class="" href="/profile?mode=editprofile&page_profil=signature"><i class="material-icons">border_color</i><span>Sửa đổi chữ ký</span></a></li>
<li><a class="" href="/profile?mode=editprofile&page_profil=avatars"><i class="material-icons">insert_photo</i><span>Thay ảnh đại diện</span></a></li>
<li class="line"><a class="" href="/search?search_id=watchsearch"><i class="material-icons">bookmark</i><span>Bài đang theo dõi</span></a></li>
<li><a href="/search?search_id=favouritesearch" class=""><i class="material-icons">favorite</i><span>Bài viết ưa thích</span></a></li>
<li><a class="" href="/search?search_id=egosearch"><i class="material-icons">person</i><span>Bài viết của bạn</span></a></li>
<li><a href="/search?search_id=unanswered" class=""><i class="material-icons">block</i><span>Bài chưa trả lời</span></a></li>
<li class="line "><a href="{U_LOGIN_LOGOUT}" class=""><i class="material-icons">power_settings_new</i><span>Thoát</span></a></li>
</ul>
</div>
</div>
<div class="navfoot">
</div>
</nav>
<script>
function toggle(){
$("#changecolor-box").slideToggle('slow');
};
</script>
</body>
</html>
Code hơi dài, mong mấy bác làm ơn giúp đỡ để em nâng cao trình độ và có thêm nghị lực để tiếp tục học lập trình code