Nguyễn Đức Thịnh: Test Code Online

Khung nhập mã cần thử

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
    <style>
    *{margin:0;padding:0;font-family:sans-serif}
.header{height:60px;background:#fff;padding:0 20px;color:#999}
.logo{line-height:60px;float:left}
.logo a{text-transform:uppercase;text-decoration:none;color:#004080;font-weight:bold;font-size:30px}
#direction{line-height:10px;text-transform:none;font-size:15px}
.menu{float:right;line-height:60px;padding-right:20px}
.menu a{color:#999;text-transform:uppercase;text-decoration:none;padding:0 10px;transition:0.4s}
.show-menu-btn,.hide-menu-btn{transition:0.4s;font-size:30px;cursor:pointer;display:none}
.show-menu-btn{float:left}
.show-menu-btn i{line-height:60px}
.menu a:hover,.show-menu-btn:hover,.hide-menu-btn:hover{color:#3498db}
#chk{position:absolute;visibility:hidden;z-index:-1111}
@media screen and (max-width:600px){
  .logo{float:none;text-align:center}
  .show-menu-btn,.hide-menu-btn{display:block}
  .menu{position:fixed;width:100%;height:100%;background:#fff;left:-100%;top:0;text-align:left;padding-top:50px;line-height:normal;transition:0.5s}
  .menu a{display:block;padding:20px}
  .hide-menu-btn{position:absolute;top:30px;right:30px}
  #chk:checked ~ .menu{left:0}
}
.sub-nav{position:relative;display:inline-block}
.sub-content{display:none;position:absolute;background-color:#f1f1f1;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1}
.sub-content a{text-decoration:none;display:block}
.sub-content a:hover{background-color:#ddd}
.sub-nav:hover .sub-content{display:block}
.sub-nav:hover .sub-nav{background-color:#3e8e41}
#search{position:fixed;right:0;top:60px;width:100%;height:50px;z-index:1;background-color:#ff4379;border-radius:5px;box-sizing:border-box;padding:10px;-moz-transform:translateY(10px);transform:translateY(10px);transition:all .3s ease}
#search-o,#search-cl{float:right;cursor:pointer;right:20px;top:25px;position:absolute}
#search form{display:block;background:rgba(0,0,0,0);width:100%;height:30px;box-sizing:border-box;overflow:hidden;padding:0;border:0}
#search{display:none}
#search input{width:95%;height:26px;display:block;margin:0 auto;padding-left:15px;border:1px solid #dfe1e5;border-radius:4px;background:#fff;transition:all .5s ease;line-height:1.66}
.close{position:relative;z-index:99999;color:#000;display:none}  
    </style>
  </head>
  <body>
<div class="header">
    <input type="checkbox" id="chk" />
    <label for="chk" class="show-menu-btn">
        <i class="fas fa-bars"></i>
    </label>
    <div class='logo'>
        <a href="#">NDT <span id='direction'>Blog</span></a>
    </div>
    <ul class="menu">
        <a href="#">Home</a>
        <a href="#">About</a>
         <ul class="sub-nav">
            <a href="#">Dropdown <i class="fa fa-caret-down"></i></a>
            <div class="sub-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </ul>
        <a href="#">Works</a>
          <label for="chk" class="hide-menu-btn">
            <i class="fas fa-times"></i>
        </label>
        <div id='search'>
            <form action='/search' id='searchform' method='get'>
                <input id='s' name='q' placeholder='Enter to search...' type='text' />
            </form>
        </div>
    </ul>
    <span>  
<span id='search-o' onclick="searchnav()"><i class="fa fa-search"></i></span>
    <span href="javascript:void(0)" id='search-cl' class="close" onclick="closesearch()"><i class="fas fa-times"></i></span></span>
</div>
    
<script>
function searchnav(){var x=document.getElementById("search");if(x.style.display==="block"){x.style.display="none"}else{x.style.display="block"};document.getElementById("search-cl").style.display="block";document.getElementById("search-o").style.display="none"}
function closesearch(){var x=document.getElementById("search");if(x.style.display==="none"){x.style.display="block"}else{x.style.display="none"};document.getElementById("search-o").style.display="block";document.getElementById("search-cl").style.display="none"}
</script>
  </body>
</html>

Khung xem trước kết quả