Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--IF USING AS IN A THEME ONLY COPY AND PASTE WHAT IS LISTED BETWEEN COMMENTS (best used in a page on your theme)-->
- <!DOCTYPE html>
- <head>
- <title>{Title}</title>
- <!--COPY AND PAST THE CODING BELOW INTO YOUR HEADER-->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <meta name="text:LinkOneURL" content="">
- <meta name="text:LinkOneAmount" content="">
- <meta name="text:LinkOne" content="">
- <meta name="text:LinkTwoURL" content="">
- <meta name="text:LinkTwoAmount" content="">
- <meta name="text:LinkTwo" content="">
- <meta name="text:LinkThreeURL" content="">
- <meta name="text:LinkThreeAmount" content="">
- <meta name="text:LinkThree" content="">
- <meta name="text:LinkFourURL" content="">
- <meta name="text:LinkFourAmount" content="">
- <meta name="text:LinkFour" content="">
- <meta name="text:LinkFiveURL" content="">
- <meta name="text:LinkFiveAmount" content="">
- <meta name="text:LinkFive" content="">
- <meta name="text:LinkSixURL" content="">
- <meta name="text:LinkSixAmount" content="">
- <meta name="text:LinkSix" content="">
- <meta name="text:LinkSevenURL" content="">
- <meta name="text:LinkSevenAmount" content="">
- <meta name="text:LinkSeven" content="">
- <meta name="text:LinkEightURL" content="">
- <meta name="text:LinkEightAmount" content="">
- <meta name="text:LinkEight" content="">
- <meta name="text:LinkNineAmount" content="">
- <meta name="text:LinkNineAmount" content="">
- <meta name="text:LinkNine" content="">
- <meta name="text:LinkTenURL" content="">
- <meta name="text:LinkTenAmount" content="">
- <meta name="text:LinkTen" content="">
- <meta name="text:LinkElevenURL" content="">
- <meta name="text:LinkElevenAmount" content="">
- <meta name="text:LinkEleven" content="">
- <!--END CODING FOR HEADER-->
- <style type="text/css">
- <!--COPY AND PASTE THE CODE BELOW INTO YOUR CSS "STYLE TAGS"-->
- body {
- font-size: 100%;
- }
- a {
- text-decoration: none;
- }
- ul,
- ul ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- #wrapper {
- width: 220px;
- margin: 100px auto;
- font-size: 0.8125em;
- }
- .menu {
- width: auto;
- height: auto;
- -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
- -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
- box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
- }
- .menu > li > a {
- background-color: #616975;
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
- background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
- background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
- background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
- background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
- background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
- border-bottom: 1px solid #33373d;
- -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
- -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
- box-shadow: inset 0px 1px 0px 0px #878e98;
- width: 100%;
- height: 2.75em;
- line-height: 2.75em;
- text-indent: 2.75em;
- display: block;
- position: relative;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-weight: 600;
- color: #fff;
- text-shadow: 0px 1px 0px rgba(0,0,0,.5);
- }
- .menu ul li a {
- background: #fff;
- border-bottom: 1px solid #efeff0;
- width: 100%;
- height: 2.75em;
- line-height: 2.75em;
- text-indent: 2.75em;
- display: block;
- position: relative;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 0.923em;
- font-weight: 400;
- color: #878d95;
- }
- .menu ul li:last-child a {
- border-bottom: 1px solid #33373d;
- }
- .menu > li > a:hover,
- .menu > li > a.active {
- background-color: #35afe3;
- }
- .menu > li > a.active {
- border-bottom: 1px solid #1a638f;
- }
- .menu > li > a:before {
- content: '';
- background-image:url(../images/sprite.png);
- background-repeat: no-repeat;
- font-size: 36px;
- height: 1em;
- width: 1em;
- position: absolute;
- left: 0;
- top: 50%;
- margin: -.5em 0 0 0;
- }
- .item1 > a:before {
- background-position: 0 0;
- }
- .item2 > a:before {
- background-position: -38px 0;
- }
- .item3 > a:before {
- background-position: 0 -38px;
- }
- .item4 > a:before {
- background-position: -38px -38px;
- }
- .item5 > a:before {
- background-position: -76px 0;
- }
- .menu > li > a span {
- font-size: 0.857em;
- display: inline-block;
- position: absolute;
- right: 1em;
- top: 50%;
- background: #48515c;
- line-height: 1em;
- height: 1em;
- padding: .4em .6em;
- margin: -.8em 0 0 0;
- color: #fff;
- text-indent: 0;
- text-align: center;
- -webkit-border-radius: .769em;
- -moz-border-radius: .769em;
- border-radius: .769em;
- -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
- -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
- box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
- text-shadow: 0px 1px 0px rgba(0,0,0,.5);
- font-weight: 500;
- }
- .menu > li > a:hover span, .menu > li a.active span {
- background: #2173a1;
- }
- .menu ul > li > a span {
- font-size: 0.857em;
- display: inline-block;
- position: absolute;
- right: 1em;
- top: 50%; /
- background-color: #fff;
- border: 1px solid #d0d0d3;
- line-height: 1em;
- height: 1em;
- padding: .4em .7em;
- margin: -.9em 0 0 0;
- color: #878d95;
- text-indent: 0;
- text-align: center;
- -webkit-border-radius: .769em;
- -moz-border-radius: 769em;
- border-radius: 769em;
- text-shadow: 0px 0px 0px rgba(255,255,255,.01));
- }
- .menu > li > ul li a:before {
- content: '▶';
- font-size: 8px;
- color: #bcbcbf;
- position: absolute;
- width: 1em;
- height: 1em;
- top: 0;
- left: -2.7em;
- }
- .menu > li > ul li:hover a,
- .menu > li > ul li:hover a span,
- .menu > li > ul li:hover a:before {
- color: #ffffff;
- }
- .menu ul li a:hover{
- background-color:#2173a1;
- }
- <!--END CSS "STYLE" CODING-->
- {CustomCSS}
- </style>
- </head>
- <body>
- <!--COPY AND PASTE THE CODING BELOW INTO YOUR HTML "BODY TAGS"-->
- <ul class="menu">
- <li class="item1"><a href="#">TUTORIALS<span><div id="result2"></div>
- <script>var a = "3" + 4 + 5;
- var b = {text:LinkOneAmount} + {text:LinkTwoAmount} + {text:LinkThreeAmount} + {text:LinkFourAmount} + {text:LinkFiveAmount} + {text:LinkSixAmount} + {text:LinkSevenAmount} + {text:LinkEightAmount} + {text:LinkNineAmount} + {text:LinkTenAmount} + {text:LinkElevenAmount};
- $("#result1").html(a);
- $("#result2").html(b);
- </script>
- </span></a>
- <ul>
- <li><a href="{text:LinkOneURL}"><span>{text:LinkOneAmount}</span> {text:LinkOne} </a></li>
- <li> <a href="{text:LinkTwoURL}"><span>{text:LinkTwoAmount}</span>{text:LinkTwo} </a>
- <li> <a href="{text:LinkThreeURL}"><span>{text:LinkThreeAmount}</span>{text:LinkThree} </a></li>
- <li> <a href="{text:LinkFourURL}"><span>{text:LinkFourAmount}</span>{text:LinkFour} </a></li>
- <li> <a href="{text:LinkFiveURL}"><span>{text:LinkFiveAmount}</span>{text:LinkFive} </a></li>
- <li> <a href="{text:LinkSixnURL}"><span>{text:LinkSixAmount}</span>{text:LinkSix} </a></li>
- <li> <a href="{text:LinkSevenURL}"><span>{text:LinkSevenAmount}</span>{text:LinkSeven} </a></li>
- <li> <a href="{text:LinkEightURL}"><span>{text:LinkEightAmount}</span>{text:LinkEight} </a></li>
- <li> <a href="{text:LinkNineURL}"><span>{text:LinkNineAmount}</span>{text:LinkNine} </a></li>
- <li> <a href="{text:LinkTenURL}"><span>{text:LinkTenAmount}</span>{text:LinkTen} </a></li>
- <li> <a href="{text:LinkElevenURL}"><span>{text:LinkElevenAmount}</span>{text:LinkEleven} </a></li>
- <li> <a href="http://www.slapdashthemes.tumblr.com">Menu by: Slapdash Themes</a></li>
- </ul></li>
- </ul>
- <script type="text/javascript">
- $(function() {
- var menu_ul = $('.menu > li > ul'),
- menu_a = $('.menu > li > a');
- menu_ul.hide();
- menu_a.click(function(e) {
- e.preventDefault();
- if(!$(this).hasClass('active')) {
- menu_a.removeClass('active');
- menu_ul.filter(':visible').slideUp('normal');
- $(this).addClass('active').next().stop(true,true).slideDown('normal');
- } else {
- $(this).removeClass('active');
- $(this).next().stop(true,true).slideUp('normal');
- }
- });
- });
- </script>
- <!--END HTML "BODY" CODING-->
- </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement