9/9｜ナビゲーション制作

9/9

 - ナビゲーション設定

制作ソフト(ai,ps)でナビゲーションを制作し表示させる

- ナビゲーション制作

通常ナビゲーションとホバー(選択中)ナビゲーションの制作

/* CSS Document */
html, body, h1, p, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
#nav {
  width: 150px;
  margin: 50px auto;
}
#nav ul {
  overflow: hidden;
}
#nav li a {
  display: block;
  background: url(../img/btn_h.png) no-repeat left top;
  width: 150px;
  height: 40px;
  border: none;
  text-indent: -999em;
}
#nav li#home a {
  background: url(../img/btn_h.png) no-repeat left top;
}
#nav li#home a:hover {
  background: url(../img/btn_h.png) no-repeat -150px top;
}
#nav li#food a {
  background: url(../img/btn_h.png) no-repeat left -40px;
}
#nav li#food a:hover {
  background: url(../img/btn_h.png) no-repeat -150px -40px;
}
#nav li#drink a {
  background: url(../img/btn_h.png) no-repeat left -80px;
}
#nav li#drink a:hover {
  background: url(../img/btn_h.png) no-repeat -150px -80px;
}
#nav li#info a {
  background: url(../img/btn_h.png) no-repeat left -120px;
}
#nav li#info a:hover {
  background: url(../img/btn_h.png) no-repeat -150px -120px;
}
#nav li#contact a {
  background: url(../img/btn_h.png) no-repeat left -160px;
}
#nav li#contact a:hover {
  background: url(../img/btn_h.png) no-repeat -150px -160px;
}

 - ナビゲーション設定

 制作ソフト(ai,ps)でナビゲーションを制作し表示させる

- ナビゲーション制作

通常ナビゲーションとホバー(選択中)ナビゲーションの制作

/* CSS Document */
html, body, h1, p, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
#nav {
  width: 750px;
}
#nav ul {
  width: 750px;
  overflow: hidden;
  height: 40px;
}
#nav li {
  float: left;
}
#nav li a {
  display: block;
  background:url(../img/btn1.png) no-repeat left top;
  width: 150px;
  height: 40px;
  border: none;
  text-indent: -999em;
}
#nav li#home a {
  background: url(../img/btn1.png)no-repeat left top;
}
#nav li#home a:hover {
  background: url(../img/btn1.png) no-repeat left -40px;
}
#nav li#food a {
  background: url(../img/btn1.png) no-repeat -150px top;
}
#nav li#food a:hover {
  background: url(../img/btn1.png) no-repeat -150px -40px;
}
#nav li#drink a {
  background: url(../img/btn1.png) no-repeat -300px top;
}
#nav li#drink a:hover {
  background: url(../img/btn1.png) no-repeat -300px -40px;
}
#nav li#info a {
  background: url(../img/btn1.png) no-repeat -450px top;
}
#nav li#info a:hover {
  background: url(../img/btn1.png) no-repeat -450px -40px;
}
#nav li#contact a {
  background: url(../img/btn1.png) no-repeat -600px top;
}
#nav li#contact a:hover {
  background: url(../img/btn1.png) no-repeat right -40px;
}