Posted By

talkaboom on 05/03/15


Tagged

css


Versions (?)

Hover Menu


 / Published in: CSS
 

MasterStyleSheet.css

  1. *{margin:0;padding:0;border:0;} /*basic reset*/
  2. body{
  3. width:100%;
  4. font-family:'Arial',sans-serif;
  5. margin:auto;
  6. }
  7. a {
  8. text-decoration:none;
  9. }
  10. .displayarea { /* Don't remember why I put this! */
  11. position:fixed;
  12. width:100%;
  13. }
  14. .masthead {
  15. width:100%;
  16. /*border:1px dashed magenta;
  17. clear:both;
  18. height:100px;*/
  19. position:fixed;
  20. border-bottom:black solid 4px;
  21. }
  22. .navbar {
  23. position:relative;
  24. margin: 30px 0 0 0;
  25. }
  26. .navbar > ul > li {
  27. list-style-type:none;
  28. height:30px;
  29. line-height:30px;
  30. /*border:1px solid red;*/
  31. width:10%;
  32. text-align:center;
  33. float:right;
  34. /*border-bottom:#1a1a1a solid 4px;*/
  35. -webkit-transition:all 200ms ease-out;
  36. -moz-transition:all 200ms ease-out;
  37. -ms-transition:all 200ms ease-out;
  38. -o-transition:all 200ms ease-out;
  39. transition:all 200ms ease-out;
  40. }
  41. .navbar a {
  42. display:block;
  43. color:#111;
  44. border-bottom:#1a1a1a solid 4px;
  45. padding:0;
  46. font-size:0.9em;
  47. -webkit-transition:all 200ms ease-out;
  48. -moz-transition:all 200ms ease-out;
  49. -ms-transition:all 200ms ease-out;
  50. -o-transition:all 200ms ease-out;
  51. transition:all 200ms ease-out;
  52. }
  53. .navbar a:hover { /* Subtle as a cannon hover effects */
  54. border-bottom:#a55 solid 4px;
  55. color:#bad;
  56. font-size:1em;
  57. -webkit-transition:all 200ms ease-out;
  58. -moz-transition:all 200ms ease-out;
  59. -ms-transition:all 200ms ease-out;
  60. -o-transition:all 200ms ease-out;
  61. transition:all 200ms ease-out;
  62. }
  63. .navbar li.active a{ /* for active link state. - useless on index 1, useful elsewhere */
  64. border-bottom:orange solid 4px;
  65. font-size:1.2em;
  66. }
  67.  
  68. /* /
  69. / Dynamic Hover Menu /
  70. / */
  71.  
  72. .bodylinks {
  73. position:fixed;
  74. /*border: 1px solid navy;*/
  75. width:300px;
  76. max-height: 50%;
  77. height: 50%;
  78. min-height: 50%;
  79. overflow: none;
  80. /*float:left; ---- not serving any purpose, or is it? ---- */
  81. margin:102px 0 0 0;
  82. }
  83. .bodylinks a { /* Default link state */
  84. /* border-bottom: 1px dashed blue;*/
  85. display:block;
  86. margin:0;
  87. height:100px;
  88. background:#DDDDDD;
  89. border-right: #AAAAAA solid 5px;
  90. -webkit-transition:all 200ms ease-in-out;
  91. -moz-transition:all 200ms ease-in-out;
  92. transition:all 200ms ease-in-out;
  93. }
  94. .bodylinks > a:hover { /* Hover State - Enlarge the link. Engorgio */
  95. background:#FE8;
  96. height:300px;
  97. border-right: #a55 solid 5px;
  98. -webkit-transition:all 200ms ease-in-out;
  99. -moz-transition:all 200ms ease-in-out;
  100. transition:all 200ms ease-in-out;
  101. }
  102. .bodylinks > a:focus { /* for Keyboard users and stuff */
  103. background:#FE8;
  104. height:300px;
  105. border-right: #a55 solid 5px;
  106. -webkit-transition:all 200ms ease-in-out;
  107. -moz-transition:all 200ms ease-in-out;
  108. transition:all 200ms ease-in-out;
  109. }
  110. .bodylinks:hover > a:not(:hover) { /* **magic** condition to reduce size of non hover links. Reducio! */
  111. background:#AAA;
  112. height:50px;
  113. border-right: #888 solid 5px;
  114. -webkit-transition:all 200ms ease-in-out;
  115. -moz-transition:all 200ms ease-in-out;
  116. transition:all 200ms ease-in-out;
  117. }
  118. .bodylinks:focus > a:not(:focus) { /* Not working! Need to work out the magic condition for focus - more classes? */
  119. background:#AAA;
  120. height:50px;
  121. border-right: #888 solid 5px;
  122. -webkit-transition:all 200ms ease-in-out;
  123. -moz-transition:all 200ms ease-in-out;
  124. transition:all 200ms ease-in-out;
  125. }
  126. .bodylinks .active {
  127. border-right: orangered solid 5px; /* okay so i used orangered - bite me! */
  128. }
  129.  
  130. /* Hover Menu Ends */
  131.  
  132. .content {
  133. width:auto;
  134. height:500px;
  135. position:fixed;
  136. overflow:auto;
  137. float:left;
  138. margin:110px 5% 0 400px;
  139. z-index:-2;
  140. }
  141. .content p {
  142. margin: 0 5% 2% 0;
  143. }
  144. .content > header {
  145. /*margin-left:100px;*/
  146. margin:5% 5% 0 0;
  147. font-size:1.2em;
  148. color:darkred;
  149. }
  150. .content > footer { /* for annotaions on certain pages/articles */
  151. margin:1% 1% 3% 50%;
  152. font-size:0.8em;
  153. color:darkgray;
  154. }
  155. .pagefooter {
  156. position:fixed;
  157. width:86%;
  158. margin:650px 2% 10px 2%;
  159. color:#222;
  160. /*border:1px solid red;*/
  161. clear:both;
  162. }
  163. .bottomnavbar {
  164. position:relative;
  165. margin: 1%;
  166. }
  167. .bottomnavbar > ul > li {
  168. list-style-type:none;
  169. height:14px;
  170. line-height:12px;
  171. /*border:1px solid navy;*/
  172. text-align:center;
  173. float:left;
  174. }
  175. .bottomnavbar a {
  176. display:block;
  177. color:#111;
  178. padding:0;
  179. font-size:0.7em;
  180. }
  181. .copyright {
  182. position:relative;
  183. width:auto;
  184. margin: 1%;
  185. float:left;
  186. font-size:0.7em
  187. }
  188.  
  189. /*worry about responsive design later. Get the skeleton to work */
  190. @media (min-width:601px) and (max-width:1200px) {
  191. nav a {font-size:0.8em;}
  192. }
  193.  
  194. @media (max-width:600px) { /*not working?????? */
  195. nav > ul > li {width:85%;}
  196. }

Report this snippet  

You need to login to post a comment.