CSSで作るメニューリストデザインパーツ

この記事が良ければ、ぜひシェアお願いします

今後のWEBサイト制作(&自分の備忘)も兼ねて、CSSでのメニューリストデザインパーツを掲載していきます。

例1~4までHTMLは共通ですので、先に掲載しておきます。

【HTML】

<div class="css-menulist-ex1">
  <h4>メニュー</h4>
    <ul>
         <li><a href="#" class="current">HOME</a></li>
         <li><a href="#">メニューリスト1</a></li>
         <li><a href="#">メニューリスト2</a></li>
         <li><a href="#">メニューリスト3</a></li>
         <li><a href="#">メニューリスト4</a></li>
         <li><a href="#">メニューリスト5</a></li>
    </ul>
</div>

CSSメニューリスト.例1

【CSS】

.css-menulist-ex1 {
   width: 232px;
   padding: 3px;
   border: 1px solid #D6D7D6;
   margin: 0;
   font-size: 12px;
   color: #fff;
   text-align: center;
   background: #7B2031;
}

.css-menulist-ex1 h4{
   margin: 0;
   font-size: 12px;
   color: #fff;
   line-height: 25px;
   text-align: center;
   background: #7B2031;
}

.css-menulist-ex1 ul {
   margin: 0;
   padding: 0;
}

.css-menulist-ex1 li {
   list-style-type:none;
   margin: 0;
   padding: 0;
   color: #333;
   border: 1px solid #D6D7D6;
   background: #fff;
}

.css-menulist-ex1 li a {
   display: block;
   padding: 0;
   margin: 0;
   color:#7B2031;
}

.css-menulist-ex1 li a.current {
   background:#FFF3EF;
}

.css-menulist-ex1 li a:hover {
   background:#FFF3EF;
}

CSSメニューリスト.例2

【CSS】

.css-menulist-ex2 {
   width: 232px;
   padding: 3px;
   margin: 0;
   font-size: 12px;
   color: #fff;
   background: #d9d9d9;
}

.css-menulist-ex2 h4{
   margin: 0 0 5px 0;
   font-size: 12px;
   color: #fff;
   line-height: 25px;
   text-align: center;
   background: #133f8c;
}

.css-menulist-ex2 ul {
   margin: 0;
   padding: 0;
}

#post .css-menulist-ex2 li {
   list-style-type:none;
   margin: 0;
   padding: 0;
   color: #333;
   border: 1px solid #ADAEAD;
   background: #efefef;
}

.css-menulist-ex2 li a {
   display: block;
   padding: 10px 0 10px 20px;
   color: #133f8c;
}

.css-menulist-ex2 li a.current {
   background: #f7f7f7;
}

.css-menulist-ex2 li a:hover {
   background: #f7f7f7;
}

CSSメニューリスト.例3

【CSS】

.css-menulist-ex3 {
   width: 234px;
   padding: 3px;
   margin: 0;
   font-size: 12px;
   color: #fff;
   line-height: 25px;
   background: #E7E7E7;
}

.css-menulist-ex3 h4{
   margin: 0;
   padding: 2px 5px 0px 5px;
   font-size: 12px;
   color: #fff;
   line-height: 25px;
   text-align: center;
   background: #3C3C3C;
}

.css-menulist-ex3 ul {
   margin: 1px 0 0 0;
   padding: 0;
}

.css-menulist-ex3 li {
   list-style-type:none;
   text-align: left;
   font-size: 12px;
   line-height: 25px;
   border: 1px solid #ADAEAD;
}

.css-menulist-ex3 li a {
   display: block;
   padding: 10px 0 10px 15px;
   color: #5A5D00;
   text-decoration: none;
}

.css-menulist-ex3 li a.current {
   background: #ddd;
}

.css-menulist-ex3 li a:hover {
   background: #ddd;
}

CSSメニューリスト.例4

【CSS】

.css-menulist-ex4 {
   width: 240px;
   padding: 1px;
   border:1px solid #D1D1D1;
}

.css-menulist-ex4 h4{
   margin: 0;
   padding: 10px 5px;
   font-size: 12px;
   color: #fff;
   border-bottom:3px solid #099
   background: #FFF;
}

.css-menulist-ex4 ul {
   margin: 0;
   padding: 0;
   border-top:1px solid #ddd;
}

.css-menulist-ex4 li {
   padding: 0;
   text-align: left;
   font-size: 12px;
   line-height: 25px;
   border-bottom: 1px dotted #999;
}

.css-menulist-ex4 li a {
   display: block;
   padding: 10px 0 10px 20px;
   color: #333;
   text-decoration: none;
}

.css-menulist-ex4 li a.current {
   color:#099;
   background: #c7e9e9;
}

.css-menulist-ex4 li a:hover {
   color:#099;
   background: #b9e3e3;
}

CSSの属性セレクタ/クラスセレクタ名は各サイトのネーミングに合わせてくださいね。幅/高さ/色もサイトの雰囲気に合うようにカスタマイズしてもらえればと思います。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク