API tools faq
paste
Guest User

freegamertopbar

a guest
Jul 3rd, 2011
255
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.24 KB | None | 0 0
raw download clone embed print report
  1. <html><head>
  2. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  3. <style type="text/css">
  4. body {
  5. margin: 0;
  6. padding: 0;
  7. }
  8. #navbar {
  9. height: 30px;
  10. border-bottom: 1px solid #c9d7f1;
  11. font: 13px/27px Arial,sans-serif;
  12. }
  13. #navbarl {
  14. background-color: white;
  15. height: 30px;
  16. left: 0;
  17. padding-left: 4px;
  18. position: absolute;
  19. top: 0;
  20. white-space: nowrap;
  21. z-index: 1001;
  22. }
  23. #navbarr {
  24. height: 30px;
  25. padding-right: 4px;
  26. position: absolute;
  27. right: 0;
  28. top: 0;
  29. white-space: nowrap;
  30. z-index: 1000;
  31. }
  32. #navbar ul {
  33. display: block-inline;
  34. line-height: 30px;
  35. list-style: none;
  36. margin: 0;
  37. padding: 0;
  38. white-space: nowrap;
  39. }
  40. #navbar ul li {
  41. display: inline-block;
  42. list-style: none;
  43. margin: 0;
  44. padding: 0;
  45. position: relative;
  46. white-space: nowrap;
  47. }
  48. #navbar ul li a {
  49. color: #36c !important;
  50. display: block;
  51. line-height: 27px;
  52. padding: 0;
  53. text-decoration: none;
  54. white-space: nowrap;
  55. }
  56. /* drop down menu */
  57. #navbard {
  58. background-color: white;
  59. border: 1px solid #ccc;
  60. box-shadow: 0 1px 5px #CCCCCC;
  61. margin: 0;
  62. padding: 0;
  63. position: absolute;
  64. top: 29px !important;
  65. z-index: 999;
  66. }
  67. #navbard.ddpassive {
  68. display: none;
  69. }
  70. #navbard.ddactive {
  71. display: block;
  72. }
  73. #navbard ul li {
  74. padding:0;
  75. margin: 0;
  76. display: list-item;
  77. }
  78. #navbard ul li a {
  79. display: block;
  80. padding-right: 16px;
  81. }
  82. #navbar ul li a {
  83. background-color: white;
  84. }
  85. #navbar ul li a:hover {
  86. background-color: #eef;
  87. }
  88. #navbar ul li a span.item,
  89. #navbar ul li a span.selitem {
  90. border-left: 1px solid white;
  91. border-right: 1px solid white;
  92. border-top: 2px solid transparent;
  93. display: block;
  94. line-height: 27px;
  95. padding: 0 5px;
  96. }
  97. #navbar ul li a span.selitem {
  98. border-top: 2px solid #2c85f0;
  99. color: black !important;
  100. font-weight: bold;
  101. }
  102. #navbar ul li a span.ddactive {
  103. background-color: white;
  104. border-color: #ccc;
  105. padding-bottom: 1px;
  106. position: relative;
  107. z-index: 1000;
  108. }
  109. .symbollight {
  110. color: #ccc;
  111. padding-left: 3px;
  112. }
  113. </style>
  114. <script type="text/javascript" src="lists_files/jquery-1.js"></script>
  115. <script>
  116. /* @version 1.2 fixedMenu + closeOnClick
  117. * @author Lucas Forchino, Iwan Gabovitch
  118. * @webSite: http://www.jqueryload.com, http://qubodup.net
  119. * jquery top fixed menu
  120. * added close-on-click-anywhere functionality
  121. */
  122.  
  123. (function($){
  124. $.fn.fixedMenu=function(){
  125. /* close menus on click */
  126. return this.each(function(){
  127.  
  128. var menu=$(this);
  129. menu.find('ul li > a#dditem').bind('click',function(e){
  130. if ($(this).find('span').hasClass('ddpassive')){
  131. $(this).find('span').removeClass('ddpassive');
  132. $(this).parent().find('div').removeClass('ddpassive');
  133. $(this).find('span').addClass('ddactive');
  134. $(this).parent().find('div').addClass('ddactive');
  135. }
  136. else{
  137. $(this).find('span').removeClass('ddactive');
  138. $(this).parent().find('div').removeClass('ddactive');
  139. $(this).find('span').addClass('ddpassive');
  140. $(this).parent().find('div').addClass('ddpassive');
  141. }
  142. //we don't want to propagate the click event back to the document
  143. e.stopPropagation();
  144. })
  145. });
  146. }
  147. })(jQuery);
  148.  
  149. $('document').ready(function(){
  150. $('#navbar').fixedMenu();
  151. });
  152. $(document).click(function(e) {
  153. //if the menu is opened we well close it
  154. if($('#dditem').find('span').hasClass('ddactive')){
  155. $('#dditem').click();
  156. }
  157. });
  158.  
  159.  
  160. </script>
  161.  
  162. <style></style></head>
  163. <body>
  164. <div id="navbar">
  165. <div id="navbarl">
  166. <ul>
  167. <li>
  168. <a href="http://freegamer.blogspot.com/">
  169. <span class="item selitem">Blog</span>
  170. </a>
  171. </li><li>
  172. <a href="http://forum.freegamedev.net/">
  173. <span class="item">Forums</span>
  174. </a>
  175. </li><li>
  176. <a href="http://freegamedev.net/irc/">
  177. <span class="item">Chat</span>
  178. </a>
  179. </li><li>
  180. <a href="http://freegamedev.net/wiki/">
  181. <span class="item">Wiki</span>
  182. </a>
  183. </li><li>
  184. <a id="dditem">
  185. <span class="item ddpassive">more<span class="symbollight ddpassive">&#9662;</span></span>
  186. </a>
  187. <div id="navbard" class="ddpassive">
  188. <ul>
  189. <li>
  190. <a href="">
  191. <span class="item">Games Planet</span>
  192. </a>
  193. </li><li>
  194. <a href="">
  195. <span class="item">Dev Planet</span>
  196. </a>
  197. </li><li>
  198. <a href="">
  199. <span class="item">Revision Planet</span>
  200.  
  201. </a>
  202. </li><li>
  203. <a href="">
  204. <span class="item">Asset Search</span>
  205.  
  206. </a>
  207. </li><li>
  208. <a href="http:///">
  209. <span class="item">Twitter</span>
  210.  
  211. </a>
  212. </li><li>
  213. <a href="http:///">
  214. <span class="item">Facebook</span>
  215.  
  216. </a>
  217. </li><li>
  218. <a href="http://opengameart.org/">
  219. <span class="item">OpenGameArt</span>
  220.  
  221. </a>
  222. </li><li>
  223. <a href="">
  224. <span class="item">LibreGameWiki</span>
  225.  
  226. </a>
  227. </li><li>
  228. <a href="http://freesound.org/">
  229. <span class="item">FreeSound</span>
  230.  
  231. </a>
  232. </li><li>
  233. <a href="http://blendswap.com/">
  234. <span class="item">BlendSwap</span>
  235.  
  236. </a>
  237. </li>
  238. </ul>
  239. </div>
  240. </li>
  241. </ul>
  242. </div>
  243. <div id="navbarr">
  244. <ul>
  245. <li>
  246. <a href="">
  247. <span class="item">Anon</span>
  248.  
  249. </a>
  250. </li><li>
  251. <a href="">
  252. <span class="item">Settings</span>
  253.  
  254. </a>
  255. </li><li>
  256. <a href="">
  257. <span class="item">Sign Out</span>
  258.  
  259. </a>
  260. </li>
  261. </ul>
  262. </div>
  263. </div>
  264. <div>This is different</div>
  265. <div><p>This is content</p>
  266. <ul><li>stuff</li><li>stuff other</li></ul></div>
  267.  
  268.  
  269. </body></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!