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

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

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

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%;}
nav.hmenu7 ul{
  display:flex;
  justify-content:space-around;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #CCC;
  background:#EEE;
  border-radius:10px 10px 10px 10px;
}
nav.hmenu7 ul li:hover{
  background:#CDD;
}
nav.hmenu7 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#468;
  font-weight:bold;
  text-shadow: 1px 2px 3px #aaa;
}
</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%;}
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:12px 20px;
  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>

メニュー１

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%;}
nav.hmenu1 ul{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  background:#eff;
}
nav.hmenu1 ul li:hover{
  background:#def;
}
nav.hmenu1 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#69f;
  text-shadow: 1px 2px 3px #aaa;
}
</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%;}
nav.hmenu2 ul{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#eff;
}
nav.hmenu2 ul li:hover{
  background:#def;
}
nav.hmenu2 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu2 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#69f;
  text-shadow: 1px 2px 3px #aaa;
}
</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%;}
nav.hmenu3 ul{
  display:flex;
  justify-content:center;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#eff;
}
nav.hmenu3 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu3 ul li:hover{
  background:#def;
}
nav.hmenu3 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#69f;
  text-shadow: 1px 2px 3px #aaa;
}
</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%;}
nav.hmenu4 ul{
  display:flex;
  justify-content:space-around;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#eff;
}
nav.hmenu4 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu4 ul li:hover{
  background:#def;
}
nav.hmenu4 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#69f;
  text-shadow: 1px 2px 3px #aaa;
}
</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%;}
nav.hmenu5 ul{
  display:flex;
  justify-content:space-around;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#222;
}
nav.hmenu5 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu5 ul li:hover{
  background:#00f;
}
nav.hmenu5 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#fff;
  text-shadow: 1px 2px 2px #fff;
}
</style>

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

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

<nav class="hmenu6">
  <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.hmenu6{width:100%;}
nav.hmenu6 ul{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#222;
}
nav.hmenu6 ul li{
  border-radius:10px 10px 10px 10px;
}
nav.hmenu6 ul li:hover{
  background:#00f;
}
nav.hmenu6 ul li:last-child{
  margin-left:auto;
}
nav.hmenu6 ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#fff;
  text-shadow: 1px 2px 2px #fff;
}
</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を使ってサブメニューがある横並びのメニューをつくる