メニューリストのデザイン

メニューでよく使うcss

マーカーを消す

ul {list-style-type: none;}

リンクの下線を消す

a {text-decoration: none;}

横並び

li {display: inline-block;}

横並び (flexbox)

ul {display: flex;}

古いブラウザにも対応させる場合

display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
display: flex;
justify-content: flex-start; /* 左寄せ */
justify-content: flex-end; /* 右寄せ */
justify-content: center; /* 中央寄せ */
justify-content: space-between; /* 等間隔配置 */

最後の要素以外

li:not(:last-child) {}
最初の要素以外は(:first-child)になる。

リンクを要素全体にする

a {display: block;}

横並びメニューデザイン

横並び、縦並び 共通html
<ul class="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>

シンプル

css
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.menu li {
  display: inline-block;
  padding: 0 10px;
}
.menu a {
  color: #000;
  text-decoration: none;
}
.menu a:hover {
  color: #ccc;
}

縦線で区切り

css
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.menu li {
  display: inline-block;
  padding: 0 14px;
}
.menu li:not(:last-child) {
  border-right: #000 1px solid;
}
.menu a {
  color: #000;
  text-decoration: none;
}
.menu a:hover {
  color: #ccc;
}

背景色有り

css
.menu {
  background: #000;
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  border-left: solid 1px #cecece;
}
.menu li:last-child {
  border-right: solid 1px #cecece;
}
.menu a {
  color: #fff;
  display: block;
  padding: 4px 14px;
  text-decoration: none;
}
.menu a:hover {
  background: #bbb;
  color: #000;
}

ポイント出現

css
.menu {
  list-style-type: none;
  margin: 0 ;
  padding:  0;
  text-align: center;
}
.menu li {
  display: inline-block;
  padding: 0 10px;
}
.menu a {
  color: #000;
  text-decoration: none;
}
.menu a::before {
  color: #fff;
  content : "\02714" ;
  font-size: 1.3em;
}
.menu a:hover::before {
  color: #f00;
  transition: .5s ;
}

縦並びメニューデザイン

シンプル

css
.menu {
  border: #000 1px solid;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 300px;
}
.menu li:not(:last-child) {
  border-bottom: dotted 1px #000;
}
.menu a {
  color: #000;
  display: block;
  padding: 5px 12px;
  text-decoration: none;
}
.menu a:hover {
  background: #ddd;
}