1. <body id="boy">
  2. <div id="wrapper">
  3. <header>
  4. <div class="inner">
  5. <ul class="links">
  6. <li class="link1"><a href="#"><i></i>トップページ</a></li>
  7. <li class="link2"><a href="#"><i></i>はじめての方へ</a></li>
  8. <li class="link3"><a href="#"><i></i>ご利用ガイド</a></li>
  9. <li class="link4"><a href="#"><i></i>お問い合わせ</a></li>
  10. <li class="link5"><a href="#"><i></i>Boys&Girlsについて</a></li>
  11. </ul>
  12. <nav>
  13. <ul>
  14. <li class="boy"><a href="#"><i></i>男の子</a></li>
  15. <li class="girl"><a href="#"><i></i>女の子</a></li>
  16. <li class="pickup"><a href="#"><i></i>限定商品</a></li>
  17. <li class="shop"><a href="#"><i></i>店舗検索</a></li>
  18. <li class="login"><a href="#"><i></i>ログイン</a></li>
  19. </ul>
  20. </nav>
  21. </div>
  22. </header>
  23. </div>
  24. </body>
  1. @charset "UTF-8";
  2. header ul {
  3. margin: 0;
  4. padding: 0;
  5. list-style: none;
  6. }
  7. header ul li {
  8. float: left;
  9. font-size: 15px;
  10. font-family: mplus-2c-medium;
  11. line-height: 1.2;
  12. white-space: nowrap;
  13. }
  14. header ul li a {
  15. display: block;
  16. overflow: hidden;
  17. transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
  18. -moz-transition-property: color, background-color;
  19. -webkit-transition-property: color, background-color;
  20. -o-transition-property: color, background-color;
  21. -ms-transition-property: color, background-color;
  22. -moz-transition-duration: 0.3s;
  23. -webkit-transition-duration: 0.3s;
  24. -o-transition-duration: 0.3s;
  25. -ms-transition-duration: 0.3s;
  26. }
  27. /* :::::: header button :::::: */
  28. header ul li i {
  29. position: relative;
  30. display: inline-block;
  31. }
  32. header ul li i:after {
  33. content: "";
  34. display: block;
  35. position: absolute;
  36. top: 0;
  37. left: 0;
  38. transition: opacity 0.3s ease 0s;
  39. -moz-transition-property: opacity;
  40. -webkit-transition-property: opacity;
  41. -o-transition-property: opacity;
  42. -ms-transition-property: opacity;
  43. -moz-transition-duration: 0.3s;
  44. -webkit-transition-duration: 0.3s;
  45. -o-transition-duration: 0.3s;
  46. -ms-transition-duration: 0.3s;
  47. }
  48. /* :::::: links :::::: */
  49. ul.links {
  50. float: right;
  51. margin-bottom: 10px;
  52. }
  53. ul.links li {
  54. background-position: 0 -60px;
  55. }
  56. ul.links li a {
  57. display: block;
  58. padding: 3px 7px 3px;
  59. border-radius: 3px;
  60. color: white;
  61. font-size: 12px;
  62. text-decoration: none;
  63. }
  64. ul.links li.link2 a { padding-left: 6px; }
  65. ul.links li.link3 a { padding-left: 9px; }
  66. ul.links li.link4 a,
  67. ul.links li.link5 a { padding-left: 8px; }
  68. /* :::::: links - icon :::::: */
  69. ul.links li i,
  70. ul.links li i:after {
  71. width: 16px;
  72. height: 16px;
  73. background: url(../img/links_ico.png) 0 -30px no-repeat;
  74. }
  75. ul.links li i {
  76. margin: -3px 1px 0 0;
  77. vertical-align: middle;
  78. }
  79. ul.links li.link2 i {
  80. margin-right: 2px;
  81. background-position: -30px -30px;
  82. }
  83. ul.links li.link3 i {
  84. margin-right: 4px;
  85. background-position: -60px -30px;
  86. }
  87. ul.links li.link4 i {
  88. margin-right: 4px;
  89. background-position: -90px -30px;
  90. }
  91. ul.links li.link5 i {
  92. margin-right: 3px;
  93. background-position: -120px -30px;
  94. }
  95. ul.links li.link1 i:after { background-position: 0 0; }
  96. ul.links li.link2 i:after { background-position: -30px 0; }
  97. ul.links li.link3 i:after { background-position: -60px 0; }
  98. ul.links li.link4 i:after { background-position: -90px 0; }
  99. ul.links li.link5 i:after { background-position: -120px 0; }
  100. /* :::::: links - hover :::::: */
  101. ul.links li a:hover {
  102. color: #b2d63e;
  103. background: white;
  104. }
  105. ul.links li a:hover i:after {
  106. opacity: 0;
  107. }
  108. /* :::::: links - active :::::: */
  109. ul.links li a:active {
  110. padding-top: 4px;
  111. padding-bottom: 2px;
  112. box-shadow: 0 1px 3px rgba(0,0,0,0.15) inset;
  113. }
  114. /* :::::: global navigation :::::: */
  115. nav {
  116. clear: both;
  117. }
  118. nav ul {
  119. margin: 0 0 5px 0;
  120. padding: 0;
  121. border: 2px white solid;
  122. border-radius: 3px;
  123. list-style: none;
  124. }
  125. nav ul li {
  126. position: relative;
  127. float: left;
  128. width: 136px;
  129. border-right: 1px #b2d63e solid;
  130. font-size: 15px;
  131. }
  132. nav ul li.boy {
  133. width: 135px;
  134. }
  135. nav ul li.login {
  136. width: 129px;
  137. border-right: 0;
  138. }
  139. nav ul li a {
  140. display: block;
  141. overflow: hidden;
  142. padding: 12px 0 10px 27px;
  143. border-right: 2px white solid;
  144. border-left: 2px white solid;
  145. color: #519535;
  146. background: white;
  147. text-decoration: none;
  148. outline: none;
  149. }
  150. nav ul li.pickup a,
  151. nav ul li.shop a { padding-left: 18px; }
  152. nav ul li.login a { padding-left: 21px; }
  153. nav ul li.boy a {
  154. border-left: 0;
  155. }
  156. nav ul li.login a {
  157. border-right: 0;
  158. color: white;
  159. background: #b2d63e;
  160. }
  161. /* :::::: global balloon :::::: */
  162. nav ul li:after {
  163. content: " ";
  164. position: absolute;
  165. top: 100%;
  166. left: 50%;
  167. width: 0;
  168. height: 0;
  169. margin: -3px 0 0 -6px;
  170. border: 6px transparent solid;
  171. transition: margin-top 0.3s ease 0s, border-color 0.3s ease 0s;
  172. -moz-transition-property: margin-top, border-color;
  173. -webkit-transition-property: margin-top, border-color;
  174. -o-transition-property: margin-top, border-color;
  175. -ms-transition-property: margin-top, border-color;
  176. -moz-transition-duration: 0.3s;
  177. -webkit-transition-duration: 0.3s;
  178. -o-transition-duration: 0.3s;
  179. -ms-transition-duration: 0.3s;
  180. }
  181. /* :::::: global - icon :::::: */
  182. nav ul li i,
  183. nav ul li i:after {
  184. width: 26px;
  185. height: 26px;
  186. background: url(../img/nav_ico.png) 0 -30px no-repeat;
  187. }
  188. nav ul li i {
  189. margin: -6px 3px 0 0;
  190. vertical-align: middle;
  191. }
  192. nav ul li.girl i {
  193. margin-right: 4px;
  194. background-position: -30px -30px;
  195. }
  196. nav ul li.pickup i {
  197. margin-right: 2px;
  198. background-position: -60px -30px;
  199. }
  200. nav ul li.shop i {
  201. margin-right: 1px;
  202. background-position: -90px -30px;
  203. }
  204. nav ul li.login i {
  205. margin-right: -1px;
  206. background-position: -120px -30px;
  207. }
  208. nav ul li.girl i:after { background-position: -30px 0; }
  209. nav ul li.pickup i:after { background-position: -60px 0; }
  210. nav ul li.shop i:after { background-position: -90px 0; }
  211. nav ul li.login i:after { background-position: -120px 0; }
  212. /* :::::: global - hover :::::: */
  213. nav ul li a:hover {
  214. color: white;
  215. background: #b2d63e;
  216. }
  217. nav ul li.login a:hover {
  218. background: #f079bb;
  219. }
  220. nav ul li:hover:after,
  221. #boy nav ul li.boy:after,
  222. #girl nav ul li.girl:after,
  223. #about nav ul li.pickup:after,
  224. #shop nav ul li.shop:after,
  225. #login nav ul li.login:after {
  226. margin-top: 2px;
  227. border-top-color: white;
  228. }
  229. nav ul li a:hover i:after {
  230. opacity: 0;
  231. }
  232. /* :::::: global - active :::::: */
  233. nav ul li a:active {
  234. padding-top: 13px;
  235. padding-bottom: 9px;
  236. box-shadow: 0 1px 3px rgba(0,0,0,0.15) inset;
  237. }
  238. /* :::::: global - current :::::: */
  239. #boy nav ul li.boy a,
  240. #girl nav ul li.girl a,
  241. #pickup nav ul li.pickup a,
  242. #shop nav ul li.shop a,
  243. #login nav ul li.login a {
  244. padding-top: 12px;
  245. padding-bottom: 10px;
  246. color: #519535;
  247. background: #d8ea9e;
  248. box-shadow: none;
  249. }
  250. #boy nav ul li.boy a i { background-position: 0 -60px; }
  251. #girl nav ul li.girl a i { background-position: -30px -60px; }
  252. #about nav ul li.pickup a i { background-position: -60px -60px; }
  253. #shop nav ul li.shop a i { background-position: -90px -60px; }
  254. #login nav ul li.login a i { background-position: -120px -60px; }
  255. #boy nav ul li.boy a i:after { background-position: 0 -60px; }
  256. #girl nav ul li.girl a i:after { background-position: -30px -60px; }
  257. #about nav ul li.pickup a i:after { background-position: -60px -60px; }
  258. #shop nav ul li.shop a i:after { background-position: -90px -60px; }
  259. #login nav ul li.login a i:after { background-position: -120px -60px; }
  260. /* :::::: clearfix :::::: */
  261. nav ul {
  262. zoom: 1;
  263. }
  264. nav ul:after {
  265. content: "";
  266. display: block;
  267. clear: both;
  268. }