[ Tin nhắn mới · Thành viên · Nội quy diễn đàn · Tìm kiếm · RSS ]
  • Page 1 of 1
  • 1
Forum moderator: Admin, Administrators  
Diễn đàn » Trao đổi kiến thức thiết kế web, lập trình code ... » Chia sẻ code web full sạch đẹp cho các member » Menu ẩn hiện trên top khi click chuột vào (menu ẩn hiện)
Menu ẩn hiện trên top khi click chuột vào
Yasuo
Data: Thứ hai, 2015-09-07, 6:03 PM
Offline
Bài viết: 24
Các bạn coppy code và dán vào dưới Footer ( đáy trang ) tùy chỉnh cho phù hợp với trang của các bạn nhé...!


menu an hien khi click chuot vao tren top

menu top an hien khi click chuot vao

Code
<style>
.ShowHide {
       background: none repeat scroll 0 0 #2e2f2e;
       border-bottom: 2px solid #eee;
       border-bottom-left-radius: 5px;
       border-bottom-right-radius: 5px;
       border-left: 2px solid #eee;
       border-right: 2px solid #eee;
       box-shadow: 1px 2px 9px #555;
       cursor: pointer;
       display: block;
       padding: 0 7px;
       height: 25px;
       position: absolute;
       right: 3px;
       float: right;
       top: 0;
       z-index: 999;
}
#banner {
       visibility: hidden;
       display: none;
}
#banner {
       background-color: #333;
       border-bottom: 1px solid #eee;
       box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.3);
       height: 48px;
       left: 0;
       display: block;
       margin-bottom: 50px;
       padding: 5px 15px;
       position: fixed !important;
       right: 0;
       top: 0;
       z-index: 999;
}
.nav {
       margin: 3%;
}
.nav a {
       margin-left: -3px;
       padding: 12px 18px;
       outline: none;
       border: 1px solid #121212;
       border-right: none;
       background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.34) 100%) repeat scroll 0 0 transparent;
       box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
       color: #777777;
       vertical-align: top;
       text-decoration: none;
       text-shadow: 0 -1px #0F0F0F;
       font-size: 13px;
       line-height: 21px;
       cursor: pointer;
       -webkit-transition: all .6s ease;
       -moz-transition: all .6s ease;
       -ms-transition: all .6s ease;
       -o-transition: all .6s ease;
       transition: all .6s ease;
       -webkit-touch-callout: none;
       -webkit-user-select: none;
       -khtml-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
}
.nav a:hover {
       color: #f6f6f6;
}
.nav a:first-child {
       border-radius: 6px 0 0 6px;
}
.nav a:last-child {
       border-radius: 0 6px 6px 0;
}
.nav a:active {
       box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}
.nav a.highlight {
       background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.44) 100%) repeat scroll 0 0 transparent;
       color: #f6f6f6;
}
.nav a:last-child {
       border-right: 1px solid #121212;
}
</style>
<script type="text/javascript">
var showHeader=false;
       function ShowHideBanner() {
       showHeader=!showHeader;
       var nav=document.getElementById("banner");
       if (showHeader) {
       banner.style.visibility="visible";
       banner.style.display="block";
}
else {
       banner.style.visibility="hidden";
       banner.style.display="none";
}
}
</script>
<div id="banner">
     <script src="http://nvt.ucoz.net/Javascript/Munu-anhien-top-001.js"></script>     
<div class="nav">
     <a href="#" class="highlight">Home</a>     
     <a href="javascript:void(0);">About</a>     
     <a href="javascript:void(0);">Tool</a>     
     <a href="javascript:void(0);">Html Edit</a>     
     <a href="javascript:void(0);">Encode</a>
     <a href="javascript:void(0);">Contact</a>
     <a href="javascript:document.location.reload();" title="Tải lại trang" id="refresh_output">↺</a>
</div>
<div class="ShowHide" name="Hide" style="z-index:999;top:58px;height:28px" title="Hide" onclick="ShowHideBanner();">
<img src="hhttp://nvt.ucoz.net/Hinh-Nen/arrow_up.png" width="20px">
<a style="visibility:hidden;" ></a>
</div>
</div>
<div class="ShowHide" name="Show"style="position:fixed;z-index:990" title="Show Menu Bar" onclick="ShowHideBanner();">
<img src="http://nvt.ucoz.net/Hinh-Nen/down.png" width="20px">
<a style="visibility:hidden;" >
</a></div>


Chúc các bạn thành công.!
File đính kèm: (Bạn chỉ download được 1 file cùng lúc, vui lòng download từng file)
5155522.png (28.1 Kb)
 
Diễn đàn » Trao đổi kiến thức thiết kế web, lập trình code ... » Chia sẻ code web full sạch đẹp cho các member » Menu ẩn hiện trên top khi click chuột vào (menu ẩn hiện)
  • Page 1 of 1
  • 1
Search:


☠ Home | ✯ Diễn đàn | ✡ Download | ☣ Nấu ăn | ☢ Video | ☪ Truyện cười | ♘ Mẹo vặt | ✉ Hỗ trợ | ✉ Tin nhắn | Đăng ký | Đăng nhập

BOX ADMIN