コピペで使えるnav,ul,liタグとCSSで横並びメニュー8種のデザイン

• ホーム
• Javascript,CSS,HTMLデザイン無料素材集
• コピペで使えるnav,ul,liタグとCSSで横並びメニュー8種のデザイン

メニュー１（角が四角い）

HTML・CSSソースコード

<nav class="hmenu1">
  <ul>
    <li><a href="">メニュー１</a></li>
    <li><a href="">メニュー２</a></li>
    <li><a href="">メニュー３</a></li>
    <li><a href="">メニュー４</a></li>
  </ul>
</nav>

<style>
nav.hmenu1{
  width:100%;
  font-size:18px;
}
nav.hmenu1>ul{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #074799;
  background:#E1FFBB;
}
nav.hmenu1>ul>li:hover{
  background:#009990;
}
nav.hmenu1>ul>li>a{
  display:block;
  padding:0.5em 1em;
  text-decoration:none;
  color:#001A6E;
  text-shadow: 2px 2px 3px #009990;
}

</style>

メニュー２（角が丸い）

HTML・CSSソースコード

<nav class="hmenu2">
  <ul>
    <li><a href="">メニュー１</a></li>
    <li><a href="">メニュー２</a></li>
    <li><a href="">メニュー３</a></li>
    <li><a href="">メニュー４</a></li>
  </ul>
</nav>

<style>
nav.hmenu2{
  width:100%;
  font-size:18px;
}
nav.hmenu2>ul{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #4B4376;
  background:#E8BCB9;
  border-radius:0.5em;
}
nav.hmenu2>ul>li:hover{
  background:#AE445A;
}
nav.hmenu2>ul>li>a{
  display:block;
  padding:0.5em 1em;
  text-decoration:none;
  color:#432E54;
  text-shadow: 2px 2px 3px #AE445A;
}
</style>

メニュー３（角が丸い、中央配置）

HTML・CSSソースコード

<nav class="hmenu3">
  <ul>
    <li><a href="">メニュー１</a></li>
    <li><a href="">メニュー２</a></li>
    <li><a href="">メニュー３</a></li>
    <li><a href="">メニュー４</a></li>
  </ul>
</nav>

<style>
nav.hmenu3{
  width:100%;
  font-size:18px;
}
nav.hmenu3>ul{
  display:flex;
  justify-content:center;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #CDC1FF;
  background:#F5EFFF;
  border-radius:0.5em;
}
nav.hmenu3>ul>li{
  background:rgba(0,0,0,0.05);
}
nav.hmenu3>ul>li:hover{
  background:#009990;
}
nav.hmenu3>ul>li>a{
  display:block;
  padding:0.5em 1em;
  text-decoration:none;
  color:#504080;
  text-shadow: 2px 2px 3px #E5D9F2;
}
</style>

メニュー４（角が丸い、均等配置）

HTML・CSSソースコード

<nav class="hmenu4">
  <ul>
    <li><a href="">メニュー１</a></li>
    <li><a href="">メニュー２</a></li>
    <li><a href="">メニュー３</a></li>
    <li><a href="">メニュー４</a></li>
  </ul>
</nav>

<style>
nav.hmenu4{
  width:100%;
  font-size:18px;
}
nav.hmenu4>ul{
  display:flex;
  justify-content:space-around;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #3E5879;
  background:#F5EFE7;
  border-radius:0.5em;
}
nav.hmenu4>ul>li:hover{
  background:#D8C4B6;
}
nav.hmenu4>ul>li>a{
  display:block;
  padding:0.5em 1em;
  text-decoration:underline;
  text-underline-offset:0.25em;
  color:#213555;
  text-shadow: 2px 2px 3px #D8C4B6;
}
</style>

メニュー５（角が丸い、均等配置、影付き）

HTML・CSSソースコードを見る

<nav class="hmenu5">
  <ul>
    <li><a href="">メニュー１</a></li>
    <li><a href="">メニュー２</a></li>
    <li><a href="">メニュー３</a></li>
    <li><a href="">メニュー４</a></li>
  </ul>
</nav>

<style>
nav.hmenu5{
  width:100%;
  font-size:18px;
}
nav.hmenu5>ul{
  display:flex;
  justify-content:space-around;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #FF748B;
  background:#F72C5B;
  border-radius:0.5em;
  box-shadow:3px 3px 8px 0 rgba(0,0,0, 0.5);
}
nav.hmenu5>ul>li:hover{
  background:#FF748B;
}
nav.hmenu5>ul>li>a{
  display:block;
  padding:0.5em 1em;
  text-decoration:none;
  color:#E4F1AC;
  text-shadow: 2px 2px 3px #A7D477;
}
</style>

メニュー６（角が丸い、均等配置、影付き、最後のメニューだけ右端に）

HTML・CSSソースコードを見る

nav.hmenu6{
  width:100%;
  font-size:18px;
}
nav.hmenu6>ul{
  display:flex;
  justify-content:space-around;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #FF7F3E;
  background:#FFF6E9;
  border-radius:0.5em;
  box-shadow:3px 3px 8px 0 rgba(0,0,0, 0.5);
}
nav.hmenu6>ul>li:hover{
  background:#FF748B;
}
nav.hmenu6 ul li:last-child{
  margin-left:auto;
}
nav.hmenu6>ul>li>a{
  display:block;
  padding:0.5em 1em;
  text-decoration:none;
  color:#4335A7;
  text-shadow: 2px 2px 3px #80C4E9;
}
</style>

メニュー７（角が丸い、均等配置）

HTML・CSSソースコードを見る

<nav class="hmenu7">
  <ul>
    <li><a href="">メニュー１</a></li>
    <li><a href="">メニュー２</a></li>
    <li><a href="">メニュー３</a></li>
    <li><a href="">メニュー４</a></li>
  </ul>
</nav>

<style>
nav.hmenu7{
  width:100%;
  font-size:18px;
}
nav.hmenu7>ul{
  display:flex;
  justify-content:space-around;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #859F3D;
  background:#1A1A19;
  border-radius:0.5em;
  box-shadow:3px 3px 8px 0 rgba(0,0,0, 0.5);
}
nav.hmenu7>ul>li:hover{
  background:#31511E;
}
nav.hmenu7 ul li:last-child{
  margin-left:auto;
}
nav.hmenu7>ul>li>a{
  display:block;
  padding:0.5em 1em;
  text-decoration:none;
  color:#F6FCDF;
  text-shadow: 2px 2px 3px #859F3D;
  transform: skew(30deg);
}
nav.hmenu7>ul>li>a:hover{
  transform: skew(0deg);
}

</style>

メニュー８（斜めに配置）

HTML・CSSソースコードを見る

<nav class="hmenu8">
  <ul>
    <li><a href="">メニュー１</a></li>
    <li><a href="">メニュー２</a></li>
    <li><a href="">メニュー３</a></li>
    <li><a href="">メニュー４</a></li>
  </ul>
</nav>

<style>
nav.hmenu8{
  width:100%;
  font-size:18px;
}
nav.hmenu8>ul{
  position:relative;
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #CCC;
  background:transparent;
}
nav.hmenu8>ul::after{
  position:absolute;
  left:0;
  right:0;
  bottom:4%;
  content:"";
  height:2px;
  background:#333;
}
nav.hmenu8>ul li:hover{
  background:#FEE;
}
nav.hmenu8>ul>li a{
  display:block;
  padding:0.5em 1em;
  text-decoration:none;
  color:#000;
  font-weight:bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transform:rotate(-8deg);
  transition:transform 0.2s linear;
}
nav.hmenu8>ul>li:hover>a{
  transform:rotate(0deg);
  color:#C33;
}
</style>

（ご参考）垂直［縦並び］メニューのサンプル一覧

• nav,ul,liタグとCSSを使って縦並びのメニューをつくる
• CSSとJavascriptで円弧に沿った形の縦並びのメニューを作る
• nav,ul,liタグとCSSを使ってカラフルなボタンの縦並びのメニューをつくる
• nav,ul,liタグとCSSを使って立体ボタンの縦並びのメニューをつくる
• nav,ul,liタグとCSSを使って立体ボタンの縦並びのメニューをつくる
• nav,ul,liタグとCSSを使って立体ボタンのカラフルな縦並びのメニューをつくる

（ご参考）水平［横並び］メニューのサンプル一覧

• nav,ul,liタグとCSSを使って横並びのメニューをつくる
• nav,ul,liタグとCSSとJavascriptで水平(横並び)自動スクロールするメニューをつくる
• CSSでSVGアイコンを下部に固定した横並びのメニューがあるページ作る
• nav,ul,liタグとCSSを使ってサブメニューがある横並びのメニューをつくる