1. <body id="boy">
  2. <div id="wrapper">
  3. <header>
  4. <div class="inner">
  5. <ul class="links">
  6. <li class="link1"><a href="#">トップページ</a></li>
  7. <li class="link2"><a href="#">はじめての方へ</a></li>
  8. <li class="link3"><a href="#">ご利用ガイド</a></li>
  9. <li class="link4"><a href="#">お問い合わせ</a></li>
  10. <li class="link5"><a href="#">Boys&Girlsについて</a></li>
  11. </ul>
  12. <nav>
  13. <ul>
  14. <li class="boy"><a href="#">男の子</a></li>
  15. <li class="girl"><a href="#">女の子</a></li>
  16. <li class="pickup"><a href="#">限定商品</a></li>
  17. <li class="shop"><a href="#">店舗検索</a></li>
  18. <li class="login"><a href="#">ログイン</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. }
  10. header ul li a {
  11. display: block;
  12. overflow: hidden;
  13. transition: background-position 0.3s ease 0s, opacity 0.3s ease 0s, height 0.3s ease 0s;
  14. -moz-transition-property: background-position, opacity, height;
  15. -webkit-transition-property: background-position, opacity, height;
  16. -o-transition-property: background-position, opacity, height;
  17. -ms-transition-property: background-position, opacity, height;
  18. -moz-transition-duration: 0.3s;
  19. -webkit-transition-duration: 0.3s;
  20. -o-transition-duration: 0.3s;
  21. -ms-transition-duration: 0.3s;
  22. }
  23. ul.links {
  24. float: right;
  25. margin-bottom: 10px;
  26. }
  27. ul.links li,
  28. ul.links li a {
  29. background: url(../img/links.png) 0 0;
  30. }
  31. ul.links li a {
  32. height: 21px;
  33. text-indent: -999em;
  34. }
  35. ul.links li.link1,
  36. ul.links li.link1 a { width: 99px; }
  37. ul.links li.link2,
  38. ul.links li.link2 a { width: 114px; }
  39. ul.links li.link3,
  40. ul.links li.link3 a { width: 107px; }
  41. ul.links li.link4,
  42. ul.links li.link4 a { width: 109px; }
  43. ul.links li.link5,
  44. ul.links li.link5 a { width: 150px; }
  45. ul.links li.link2 a { background-position: -101px 0; }
  46. ul.links li.link3 a { background-position: -217px 0; }
  47. ul.links li.link4 a { background-position: -326px 0; }
  48. ul.links li.link5 a { background-position: -437px 0; }
  49. ul.links li.link1 a:hover { background-position: 0 -30px; }
  50. ul.links li.link2 a:hover { background-position: -101px -30px; }
  51. ul.links li.link3 a:hover { background-position: -217px -30px; }
  52. ul.links li.link4 a:hover { background-position: -326px -30px; }
  53. ul.links li.link5 a:hover { background-position: -437px -30px; }
  54. ul.links li a:active { opacity: 0; }
  55. ul.links li.link1 { background-position: 0 -60px; }
  56. ul.links li.link2 { background-position: -101px -60px; }
  57. ul.links li.link3 { background-position: -217px -60px; }
  58. ul.links li.link4 { background-position: -326px -60px; }
  59. ul.links li.link5 { background-position: -437px -60px; }
  60. #home ul.links li.link1 a:hover { background-position: 0 -60px; }
  61. #guidance ul.links li.link2 a:hover { background-position: -101px -60px; }
  62. #guide ul.links li.link3 a:hover { background-position: -217px -60px; }
  63. #contact ul.links li.link4 a:hover { background-position: -326px -60px; }
  64. #about ul.links li.link5 a:hover { background-position: -437px -60px; }
  65. nav {
  66. clear: both;
  67. }
  68. nav ul {
  69. background: #b2d63e;
  70. }
  71. nav ul li,
  72. nav ul li a {
  73. width: 137px;
  74. }
  75. nav ul li.login,
  76. nav ul li.login a {
  77. width: 132px;
  78. }
  79. nav ul li,
  80. nav ul li a {
  81. background: url(../img/nav.png) 0 0;
  82. }
  83. nav ul li a {
  84. height: 47px;
  85. overflow: hidden;
  86. text-indent: 100%;
  87. white-space: nowrap;
  88. }
  89. nav ul li.girl a { background-position: -137px 0; }
  90. nav ul li.pickup a { background-position: -274px 0; }
  91. nav ul li.shop a { background-position: -411px 0; }
  92. nav ul li.login a { background-position: -548px 0; }
  93. nav ul li a:hover { opacity: 0; height: 52px; }
  94. nav ul li.boy { background-position: 0 -60px; }
  95. nav ul li.girl { background-position: -137px -60px; }
  96. nav ul li.pickup { background-position: -274px -60px; }
  97. nav ul li.shop { background-position: -411px -60px; }
  98. nav ul li.login { background-position: -548px -60px; }
  99. nav ul li.boy:active { background-position: 0 -120px; }
  100. nav ul li.girl:active { background-position: -137px -120px; }
  101. nav ul li.pickup:active { background-position: -274px -120px; }
  102. nav ul li.shop:active { background-position: -411px -120px; }
  103. nav ul li.login:active { background-position: -548px -120px; }
  104. #boy nav ul li.boy a { height: 52px; background-position: 0 -180px; opacity: 1; }
  105. #girl nav ul li.girl a { height: 52px; background-position: -137px -180px; opacity: 1; }
  106. #pickup nav ul li.pickup a { height: 52px; background-position: -274px -180px; opacity: 1; }
  107. #shop nav ul li.shop a { height: 52px; background-position: -411px -180px; opacity: 1; }
  108. #login nav ul li.login a { height: 52px; background-position: -548px -180px; opacity: 1; }
  109. nav ul {
  110. zoom: 1;
  111. }
  112. nav ul:after {
  113. content: "";
  114. display: block;
  115. clear: both;
  116. }