API tools faq
paste
dylanohelps

Navigation #3

dylanohelps
Jun 25th, 2013
5,310
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----------------------
  4.  
  5. NAVIGATION PAGE #3 by JAKEHELPS
  6. #1: Do not redistribute & claim as your own.
  7. #2: Do not remove the credit.
  8.  
  9. Credits:
  10. sliding panel script: users on stackoverflow
  11. background: subtlepatterns
  12. fonts: google webfonts
  13.  
  14. ---------------------------->
  15.  
  16. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  17. <head>
  18. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  19.  
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}" />
  22.  
  23. <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
  24.  
  25. <link href='http://fonts.googleapis.com/css?family=Trochut' rel='stylesheet' type='text/css'>
  26.  
  27. <link href='http://fonts.googleapis.com/css?family=Cabin+Condensed' rel='stylesheet' type='text/css'>
  28.  
  29.  
  30. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31. <script type="text/javascript">
  32. jQuery(function($) {
  33.  
  34. $('a.panel').click(function() {
  35. var $target = $($(this).attr('href')),
  36. $other = $target.siblings('.active'),
  37. animIn = function () {
  38. $target.addClass('active').show().css({
  39. left: -($target.width())
  40. }).animate({
  41. left: 0
  42. }, 500);
  43. };
  44.  
  45. if (!$target.hasClass('active') && $other.length > 0) {
  46. $other.each(function(index, self) {
  47. var $this = $(this);
  48. $this.removeClass('active').animate({
  49. left: -$this.width()
  50. }, 500, animIn);
  51. });
  52. } else if (!$target.hasClass('active')) {
  53. animIn();
  54. }
  55. });
  56.  
  57. });
  58.  
  59.  
  60.  
  61. </script>
  62. </head>
  63.  
  64. <style type="text/css">
  65.  
  66. body {
  67. padding: 0;
  68. margin: 0;
  69. list-style: none;
  70. background-color: #FEFEFE;
  71. background-attachment: fixed;
  72. background-image:url('http://25.media.tumblr.com/tumblr_lsdjv9k5E21r2gm7fo4_250.jpg');
  73. margin-bottom: 60px;
  74.  
  75. }
  76.  
  77. a {
  78. text-decoration: none;
  79. color: black;
  80. }
  81.  
  82. ::-webkit-scrollbar-thumb:vertical {
  83. height:10px;
  84. background-color: #101010; }
  85.  
  86. ::-webkit-scrollbar-thumb:horizontal {
  87. height:30px;
  88. background-color: #101010; }
  89.  
  90. ::-webkit-scrollbar {
  91. height: 10px;
  92. width: 5px;
  93. background-color: transparent; }
  94.  
  95. #centered {
  96. width: 900px;
  97. height: auto;
  98. margin: auto;
  99. text-align: center;
  100. background-color: #202020;
  101. }
  102.  
  103. #right {
  104. position: relative;
  105. float: left;
  106. margin: 0 5px 0 0;
  107. width: 400px;
  108. height: 400px;
  109. overflow: hidden;
  110. margin-left: 120px;
  111. margin-left: 280px;
  112. margin-top: 100px;
  113. border-radius: 3px;
  114. }
  115.  
  116. div.panel {
  117. position: absolute;
  118. height: 100%;
  119. width: 100%;
  120. display: none;
  121. background-image:url('http://static.tumblr.com/kamm2qy/TuZmos2l4/black_lozenge.png');
  122. }
  123.  
  124. #left {
  125. width: 60px;
  126. padding: 10px;
  127. text-align: center;
  128. background-color: #202020;
  129. height: 500px;
  130. position: fixed;
  131. float: left;
  132. margin-left: 200px;
  133. margin-top: 50px;
  134. border-radius: 3px;
  135. }
  136.  
  137. #left a {
  138. font-family: fjalla one;
  139. font-size: 12px;
  140. color: #FFFFFF;
  141. margin: 5px;
  142. display: block;
  143. padding: 3px;
  144. text-decoration: none;
  145. text-transform: uppercase;
  146. }
  147.  
  148. .name {
  149. display: block;
  150. padding: 10px;
  151. text-align: center;
  152. font-family: trochut;
  153. text-transform: uppercase;
  154. letter-spacing: 3px;
  155. font-size: 20px;
  156. color: #FFFFFF;
  157. background-color: #303030;
  158. }
  159.  
  160. .links {
  161. display: block;
  162. height: 350px;
  163. overflow: auto;
  164. }
  165.  
  166. .links a {
  167. display: inline-block;
  168. width: 160px;
  169. height: auto;
  170. padding: 5px;
  171. margin: 5px;
  172. background-color: #101010;
  173. font-family: arial;
  174. font-size: 10px;
  175. text-transform: uppercase;
  176. text-align: center;
  177. color: #FFFFFF;
  178. letter-spacing: 1px;
  179. -webkit-transition: all 0.2s ease-in-out;
  180. -moz-transition: all 0.2s ease-in-out;
  181. -o-transition: all 0.2s ease-in-out;
  182. -ms-transition: all 0.2s ease-in-out;
  183. transition: all 0.2s ease-in-out;
  184. }
  185.  
  186. .links a:hover {
  187. background-color: transparent;
  188. }
  189.  
  190. #navigation {
  191. background-color: #202020;
  192. padding: 10px 10px 12px 10px;
  193. height: auto;
  194. width: 100%;
  195. text-align: center;
  196. display: inline-block;
  197. }
  198.  
  199. #navigation a {
  200. display: inline-block;
  201. width: 100px;
  202. background-color: transparent;
  203. color: #FFFFFF;
  204. font-family: arial;
  205. font-size: 10px;
  206. text-transform: uppercase;
  207. padding: 2px 10px;
  208. }
  209.  
  210. #navigation a:hover {
  211. background-color: #303030;
  212. }
  213.  
  214.  
  215.  
  216.  
  217.  
  218. </style>
  219. <body>
  220. <div id="centered">
  221. <div id="navigation">
  222. <a href="#">Home</a>
  223. <a href="#">Message</a>
  224. <a href="#">Link 1</a>
  225. <a href="#">Link 2</a>
  226. <a href="http://jakehelps.tumblr.com">&copy;</a>
  227. </div>
  228.  
  229. <div id="left">
  230. <a href="#target1" class="panel">I .</a><br/>
  231. <a href="#target2" class="panel">I I .</a><br/>
  232. <a href="#target3" class="panel">I I I .</a><br/>
  233. <a href="#target4" class="panel">I V .</a><br/>
  234. </div>
  235.  
  236. <div id="right">
  237. <div class="panel" id="target1">
  238. <div class="name">Celebrities</div>
  239. <div class="links">
  240. <a href="#">Aaron Johnson</a>
  241. <a href="#">Blake Lively</a>
  242. <a href="#">Candice Swanepoel</a>
  243. <a href="#">Daniel Sharman</a>
  244. <a href="#">Erin Heatherton</a>
  245. <a href="#">Felicity Jones</a>
  246. <a href="#">Geroge Shelley</a>
  247. <a href="#">Hilary Duff</a>
  248. <a href="#">Ian Somerhalder</a>
  249. <a href="#">Jesse McCartney</a>
  250. <a href="#">Karlie Kloss</a>
  251. <a href="#">Logan Lerman</a>
  252. <a href="#">Miranda Kerr</a>
  253. <a href="#">Nina Dobrev</a>
  254. <a href="#">Oprah Winfrey</a>
  255. <a href="#">Paul Wesley</a>
  256. <a href="#">Queen Elizabeth</a>
  257. <a href="#">Rachel McAdams</a>
  258. <a href="#">Steven Strait</a>
  259. <a href="#">Tanner Patrick</a>
  260. <a href="#">Uma Thurman</a>
  261. <a href="#">Vanessa Hudgens</a>
  262. <a href="#">Will Smith</a>
  263. <a href="#">Xavier Samuel</a>
  264. <a href="#">Yo Mamma</a>
  265. <a href="#">Zachary Quinto</a>
  266.  
  267. </div>
  268. </div>
  269.  
  270. <div class="panel" id="target2">
  271. <div class="name">Resources</div>
  272. <div class="links">
  273. <a href="#">Actions</a>
  274. <a href="#">Borders</a>
  275. <a href="#">Fonts</a>
  276. <a href="#">PSDs</a>
  277. <a href="#">Textures</a>
  278. <a href="#">Tutorials</a>
  279. <a href="#">Downloads</a>
  280. </div>
  281. </div>
  282.  
  283. <div class="panel" id="target3">
  284. <div class="name">heading</div>
  285. <div class="links">
  286. <a href="#">Link</a>
  287. <a href="#">Link</a>
  288. <a href="#">Link</a>
  289. <a href="#">Link</a>
  290. <a href="#">Link</a>
  291.  
  292. </div>
  293.  
  294. </div>
  295.  
  296. <div class="panel" id="target4">
  297. <div class="name">heading</div>
  298. <div class="links">
  299. <a href="#">Link</a>
  300. <a href="#">Link</a>
  301. <a href="#">Link</a>
  302. <a href="#">Link</a>
  303. <a href="#">Link</a>
  304. <a href="#">Link</a>
  305. <a href="#">Link</a>
  306. <a href="#">Link</a>
  307. <a href="#">Link</a>
  308.  
  309. </div>
  310. </div>
  311.  
  312. <!---- ADD SECTIONS HERE -->
  313.  
  314. </div>
  315.  
  316. <!----- HOW TO ADD ANOTHER SECTION
  317.  
  318. STEP 1: Copy "<a href="#target4" class="panel">I V .</a><br/>" and paste it on how many number of sections you want in the navbar. Change "#target4" to "#target5/6/7/whatever number"
  319.  
  320. STEP 2: Copy THIS:
  321.  
  322. <div class="panel" id="target4">
  323. <div class="name">heading</div>
  324. <div class="links">
  325. <a href="#">Link</a>
  326. <a href="#">Link</a>
  327. <a href="#">Link</a>
  328. <a href="#">Link</a>
  329. <a href="#">Link</a>
  330. <a href="#">Link</a>
  331. <a href="#">Link</a>
  332. <a href="#">Link</a>
  333. <a href="#">Link</a>
  334.  
  335. </div>
  336. </div>
  337.  
  338. and change the "target4" to the number target you placed in the navbar link like "target5" "target6" etc. Add this new section under the indicate region that says ADD SECTIONS HERE.
  339.  
  340. Repeat the process until you have the number of boxes you desire.
  341.  
  342. -->
  343.  
  344. </div>
  345.  
  346.  
  347.  
  348. </body>
  349. </html>
Advertisement
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!