HTMLとCSS3で某ゲームのポーズ画面のようなメニューを書いてみた

/ HTML5/CSS3/jQuery / Comment[0]

こういうのです

HTML

<div id="nav"><nav>
  <ul>
    <li class="current"><a>Resume</a></li>
    <li><a>Quit Mission</a></li>
    <li><a>Restart Mission</a></li>
    <li><a>Reload last Autosave</a></li>
    <li><a>Quit to Main Menu</a></li>
    <li><a>Quit to Desktop</a></li>
  </ul>
</nav></div>

CSS

ul,ul li{ margin:0;padding:0;list-style-type:none; }
a { text-decoration:none; }

div#nav {
  width: 300px;
  font-size: 18px;
  opacity: 0.8;
}

div#nav ul li {
 padding: 0.5em;
 background: #000;
 color: #fff;
}

div#nav ul li:nth-child(even) { background: #111; }

div#nav ul li a {
  display: block;
  text-align: right;
  font-weight: bold;
  color: inherit;
  padding: 0.3em;
  border-bottom: 2px dotted #333;
}

div#nav ul li:hover {
  background:#fff;
  color:#000;
}

div#nav ul li.current {
  background: #fff;
  color: #000;
}

div#nav ul li:active a,
div#nav ul li:hover a,
div#nav ul li.current a {
  padding-bottom:2em;
  border-bottom: 2px dotted #000;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可