API tools faq
paste
Guest User

Untitled

a guest
Apr 18th, 2012
48
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.53 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <head>
  4.     <meta name = "viewport" content = "width = 320,user(-scalable = 1, 0)initial(-Scale() = 3,)maximum-scale = 3"</meta>
  5.     <meta charset="utf-8" />
  6.  
  7.     <title>Web Panel</title>
  8.  
  9.     <link rel="stylesheet" href="css/accordionmenu.css" type="text/css" media="screen" />
  10.  
  11.     <style type="text/css">/* Reset */  .accordion, .accordion ul, .accordion li, .accordion a, .accordion span {   margin: 0;  padding: 0;     border: none;   outline: none; }  .accordion li {   list-style: none; }  /* Layout & Style */  .accordion li > a {  display: block;     position: relative;     min-width: 110px;   padding: 0 10px 0 40px;     height: 50px;   padding-top: 1.5%;      color: #fdfdfd;     font: bold 15px/32px Arial, sans-serif;     text-decoration: none;  text-shadow: 0px 1px 0px rgba(0,0,0, .35);      background: #6c6e74;    background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));  background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);     background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);  background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);     background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);     -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);   -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); }  .accordion > li:hover > a, .accordion > li:target > a, .accordion > li > a.active {    color: #3e5706;     text-shadow: 1px 1px 1px rgba(255,255,255, .2);         /*background: url(../img/active.png) repeat-x;*/    background: #a5cd4e;    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));  background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);     background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);  background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);     background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);  }  /*.accordion li > a span {  display: block;     position: absolute;     top: 7px;   right: 0;   padding: 0 10px;    margin-right: 10px;         font: normal bold 12px/18px Arial, sans-serif;  background: #404247;        -webkit-border-radius: 15px;    -moz-border-radius: 15px;   border-radius: 15px;    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);   -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);  box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); }  .accordion > li:hover > a span, .accordion > li:target > a span, .accordion > li > a.active span {     color: #fdfdfd;     text-shadow: 0px 1px 0px rgba(0,0,0, .35);  background: #3e5706; } */  /* Images */  .accordion > li > a:before {   position: absolute;     top: 23%;   left: 0;    content: '';    width: 24px;    height: 24px;   margin: 4px 8px;        /*  background-repeat: no-repeat;   background-image: url(../img/icons.png);    background-position: 0 0;   */ }  /* .accordion li.files > a:before { background-position: 0px 0px; } .accordion li.files:hover > a:before, .accordion li.files:target > a:before, .accordion li.files > a.active:before { background-position: 0px -24px; }  .accordion li.mail > a:before { background-position: -24px 0px; } .accordion li.mail:hover > a:before, .accordion li.mail:target > a:before, .accordion li.mail > a.active:before { background-position: -24px -24px; }  .accordion li.cloud > a:before { background-position: -48px 0px; } .accordion li.cloud:hover > a:before, .accordion li.cloud:target > a:before, .accordion li.cloud > a.active:before { background-position: -48px -24px; }  .accordion li.sign > a:before { background-position: -72px 0px; } .accordion li.sign:hover > a:before, .accordion li.sign:target > a:before, .accordion li.sign > a.active:before { background-position: -72px -24px; } */  /* Sub Menu */  .sub-menu li a {    color: #797979;     text-shadow: 1px 1px 0px rgba(255,255,255, .2);     background: #e5e5e5;    border-bottom: 1px solid #c9c9c9;   -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);   -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); }  .sub-menu li:hover a { background: #efefef; }  .sub-menu li:last-child a { border: none; }  .sub-menu li > a span {    color: #797979;     text-shadow: 1px 1px 0px rgba(255,255,255, .2);     background: transparent;    border: 1px solid #c9c9c9;      -webkit-box-shadow: none;   -moz-box-shadow: none;  box-shadow: none; }  .sub-menu em {     position: absolute;     top: 0;     left: 0;    margin-left: 14px;  color: #a6a6a6;     font: normal 20px/32px Arial, sans-serif; }  /* Functionality */  .accordion li > .sub-menu {   display: none;  color: white; }  .accordion li:target > .sub-menu {     display: block;     color: white; } body{background:url(img/bg.png) repeat;width:960px;margin:0 auto;font-family:Calibri;font-size:20px;}.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}.footer a{color:#999;text-decoration:none}#wrapper-250{width:100%;}</style>
  12. <meta name="robots" content="noindex,follow" />
  13. </head>
  14.  
  15. <body>
  16.     <div id="wrapper-250">
  17.  
  18.         <ul class="accordion">
  19.            
  20.             <li id="one" class="files">
  21.  
  22.                 <a href="#one">test1</a>
  23.  
  24.                 <ul class="sub-menu">
  25.                     test1
  26.                 </ul>
  27.  
  28.             </li>
  29.            
  30.             <li id="two" class="mail">
  31.  
  32.                 <a href="#two">test2</a>
  33.  
  34.                 <ul class="sub-menu">
  35.                     test2
  36.                 </ul>
  37.  
  38.             </li>
  39.            
  40.             <li id="three" class="cloud">
  41.  
  42.                 <a href="#three">test3</a>
  43.  
  44.                 <ul class="sub-menu">
  45.                     test3
  46.                 </ul>
  47.  
  48.             </li>
  49.            
  50.             <li id="four" class="sign">
  51.  
  52.                 <a href="#four">test4</a>
  53.  
  54.                 <ul class="sub-menu">
  55.                     test4
  56.                 </ul>
  57.  
  58.             </li>
  59.        
  60.         </ul>
  61.        
  62.     </div>
  63.    
  64.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  65.     <script type="text/javascript">
  66.  
  67.         $(document).ready(function() {
  68.             var accordion_head = $('.accordion > li > a'),
  69.                 accordion_body = $('.accordion li > .sub-menu');
  70.             accordion_head.first().addClass('active').next().slideDown('normal');
  71.             accordion_head.on('click', function(event) {
  72.                 event.preventDefault();
  73.                 if ($(this).attr('class') != 'active'){
  74.                     accordion_body.slideUp('normal');
  75.                     $(this).next().stop(true,true).slideToggle('normal');
  76.                     accordion_head.removeClass('active');
  77.                     $(this).addClass('active');
  78.                 }
  79.  
  80.             });
  81.  
  82.         });
  83.  
  84.     </script>
  85.  
  86. </body>
  87.  
  88. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!