Chủ đề tổng hợp

header ads

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

<!--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