Chủ đề tổng hợp

header ads

Tạo menu góc trên bên phải (có nút thu gọn)

1 Phút Dành Cho Quảng Cáo

<!--tao menu goc-->

  <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: rgba(255, 255, 255, 0);

  border-bottom: 1px solid #eee;

  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.3);

  height: 42px;

  left: 0;

  display: block;

  margin-bottom: 50px;

  padding: 0px 5px;

  position: fixed !important;

  right: 0;

  top: 0;

  z-index: 999;

  }
.menu,.menu ul,.menu li,.menu a{ border:none;outline:none;margin:0; padding:0;z-index:999 } .menu{ height:40px;width:auto; background-color: #222; background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222)); background-image: -webkit-linear-gradient(top, #ED0000, #C20404); background-image: -moz-linear-gradient(top, #555, #222); background-image: -ms-linear-gradient(top, #555, #222); background-image: -o-linear-gradient(top, #555, #222); background-image: linear-gradient(top, #555, #222); -moz-box-shadow: 0 5px 5px #000; -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, 1); box-shadow: 0 5px 5px rgba(255, 255, 255, 1); } .menu li{ position:relative;list-style:none; float:left;display:block;height:40px } .menu li a{ background:url(http://4.bp.blogspot.com/-n7OkwgMuP7Q/UQs19HkuUsI/AAAAAAAABiQ/k3qWwdmqgfQ/s1600/bagi.gif) no-repeat top right; display:block; text-decoration:none;font- family:Arial;font-weight:700; font-size:14px;color:#FFFFFF; text-shadow:1px 1px 1px #1A00FF; -webkit-transition:color .2s ease-in-out; -moz-transition:color .2s ease-in-out; -o-transition:color . 2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color . 2s ease-in-out;margin:0; padding:12px 14px 12px } .menu li:first-child a{ padding:10px 10px 7px } .menu li:hover > a{color:#48d} .menu ul{ position:absolute;top:41px; left:0;opacity:0; background:#fdfdfd url(http://4.bp.blogspot.com/-mlmoMuUf48g/UQu3dezXeFI/AAAAAAAABpE/cDDiKShrEu0/s1600/menuhover.png) repeat-x top; -webkit-border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; border:1px solid #666; border-top:none; -webkit-transition:opacity .25s ease .1s; -moz-transition:opacity .25s ease .1s; -o-transition:opacity .25s ease .1s; -ms-transition:opacity .25s ease .1s; transition:opacity .25s ease .1s } .menu li:hover > ul{opacity:1} .menu ul li{ height:0;overflow:hidden; -webkit-transition:height .25s ease .1s; -moz-transition:height .25s ease .1s; -o-transition:height .25s ease .1s; -ms-transition:height .25s ease .1s; transition:height .25s ease .1s;padding:0 } .menu li:hover > ul li{ height:36px; overflow:visible; padding:0 } .menu ul li a{ color:#111;font-weight:400; width:150px;margin:0; padding:10px 0 10px 30px; text-shadow:none } .menu ul li:first-child a{ padding:10px 14px 10px 30px } .menu ul li:last-child a{ border:none } .menu a.trigger{ background:url(http://3.bp.blogspot.com/-pJAQN5knuO8/UQre-F12FjI/AAAAAAAABgs/6WarLD7FwNw/s1600/arrow.png) no-repeat 6px center } </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 class="fixed-navbar"> <div id="banner"> <div id='kenthir-wrapper'> <ul class='menu'> <li><a href='/'><img alt='home' src='http://1.bp.blogspot.com/-wqzYVSTa638/UQrc7C0UP3I/AAAAAAAABgU/TgbAOmzXLAs/s1600/home.gif' style='padding:0px;'/></a></li> <li><a href='/'>Giới thiệu</a></li> <li><a href='http://www.vanphongpham.pro.gg/search/label/v%C4%83n%20ph%C3%B2ng%20ph%E1%BA%A9m'>Văn phòng phẩm</a></li>
<!-- <li><a href='/'>Menu 1</a> <ul> <li><a class='trigger' href='/'>Sub Menu 1</a></li> <li><a class='trigger' href='/'>Sub Menu 2</a></li> <li><a class='trigger' href='/'>Sub Menu 3</a></li> </ul> </li> <li><a href='/'>Menu 2</a> <ul> <li><a class='trigger' href='/'>Label_01</a></li> <li><a class='trigger' href='/'>Label_02</a></li> <li><a class='trigger' href='/'>Label_03</a></li> </ul> </li> --> <li><a href='/'>Liên hệ</a></li> </ul> </div> <!-- end .menu --> <div class="ShowHide" name="Hide" style="z-index:999;top:52px;height:28px" title="Hide" onclick="ShowHideBanner();"> <img src="http://4.bp.blogspot.com/-lK7sM6ByXrg/VCJoFslTjBI/AAAAAAAAQLQ/mQVizui7X10/s1600/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://2.bp.blogspot.com/-2zfIui4TM6Y/VCJmdUI37VI/AAAAAAAAQLE/SlLx8Qc_HrI/s1600/down.png" width="20px" />-->
<img src="https://lh4.googleusercontent.com/-1Ht7ywfOneY/UXPHIP6oz2I/AAAAAAAAFdU/w9wjP6bQbFE/s30/menu-icon.png" width="20px" />
<a style="visibility:hidden;" > </a></div> </div>
<!--ket thuc menu goc-->

Đăng nhận xét

0 Nhận xét

An tâm mua sắm tại nhà - giao hàng tận nơi - chẳng lo về giá

Shop tại nhà
NCC thớt gỗ, ván ghép, mdf
Tắt Ads

Xem Page Nhà Tài Trợ Click here

Tắt Ads

Máy Ép Chậm
Nồi chiên không dầu
Điện Thoại
LapTop Giá Rẻ
Máy xay sinh tố
1368.com.vn