ナビゲーション用リストソース｜CSSデザインサンプル

CSSリストメニューのサンプルソース

スポンサードリンク

サイドメニューサンプル-1

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-position: inside; margin: 0 0 2em; padding: 0; } .cds-navi li { margin: 0 0 0.5em; padding: 0; } .cds-navi li a { text-decoration: none; } .cds-navi li a:hover { text-decoration: underline; }

Page Top | 利用方法

サイドメニューサンプル-2

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a> <ul> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> </ul> </li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-position: inside; margin: 0 0 2em; padding: 0; } .cds-navi ul { list-style-position: inside; margin: 0.5em 0 1em 1em; padding: 0; } .cds-navi li, .cds-navi ul li { margin: 0 0 0.5em; padding: 0; } .cds-navi li a, .cds-navi ul li a { text-decoration: none; } .cds-navi li a:hover, .cds-navi ul li a:hover { text-decoration: underline; }

Page Top | 利用方法

サイドメニューサンプル-3

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-position: inside; margin: 0 0 2em; padding: 0; } .cds-navi li { margin: 0; padding: 5px 0 4px; border-bottom: 1px solid #000000; } .cds-navi li a { text-decoration: none; } .cds-navi li a:hover { text-decoration: underline; }

Page Top | 利用方法

サイドメニューサンプル-4

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a> <ul> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> </ul> </li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-position: inside; margin: 0 0 2em; padding: 0; } .cds-navi ul { list-style-position: inside; margin: 5px 0 0; padding: 0; } .cds-navi li { margin: 0; padding: 5px 0 4px; border-bottom: 1px solid #000000; } .cds-navi ul li { margin: 0; padding: 4px 0 5px 1em; border-top: 1px solid #999999; border-bottom: none; } .cds-navi li a, .cds-navi ul li a { text-decoration: none; } .cds-navi li a:hover, .cds-navi ul li a:hover { text-decoration: underline; }

Page Top | 利用方法

サイドメニューサンプル-5

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-type: none; margin: 0 0 2em; padding: 0; } .cds-navi li { display: inline; } .cds-navi li a { text-align: center; margin: 0; padding: 5px 0 4px; width: 100%; display: block; background-color: #000000; color: #ffffff; text-decoration: none; border-bottom: 1px solid #ffffff; } .cds-navi li a:hover { background-color: #ffccff; color: #ff0000; text-decoration: underline; }

Page Top | 利用方法

サイドメニューサンプル-6

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a> <ul> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> </ul> </li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi, .cds-navi ul { list-style-type: none; } .cds-navi { margin: 0 0 2em; padding: 0; } .cds-navi ul { margin: 1px 0 0; padding: 0; } .cds-navi li { display: inline; } .cds-navi li a, .cds-navi ul li a { text-align: center; margin-bottom: 1px; padding: 5px 0; width: 100%; display: block; text-decoration: none; } .cds-navi a { background-color: #000000; color: #ffffff; } .cds-navi ul a { background-color: #666666; color: #000000; } .cds-navi a:hover, .cds-navi ul a:hover { background-color: #ffccff; color: #ff0000; text-decoration: underline; }

Page Top | 利用方法

サイドメニューサンプル-7

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-type: none; margin: 0 0 2em; padding: 0; } .cds-navi li { display: inline; } .cds-navi li a { padding: 5px 10px 4px; width: 160px; display: block; background-color: #000000; color: #ffffff; text-decoration: none; border-bottom: 1px solid #ffffff; } .cds-navi li a:hover { background-color: #ffccff; color: #ff0000; text-decoration: underline; }

Page Top | 利用方法

サイドメニューサンプル-8

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a> <ul> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> </ul> </li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi, .cds-navi ul { list-style-type: none; } .cds-navi { margin: 0 0 2em; padding: 0; } .cds-navi ul { margin: 0; padding: 0; } .cds-navi li { display: inline; } .cds-navi li a, .cds-navi ul li a { margin-bottom: 1px; padding: 5px 10px; width: 160px; display: block; text-decoration: none; } .cds-navi a { background-color: #000000; color: #ffffff; } .cds-navi ul a { background-color: #666666; color: #000000; } .cds-navi a:hover, .cds-navi ul a:hover { background-color: #ffccff; color: #ff0000; text-decoration: underline; }

Page Top | 利用方法

サイドメニューサンプル-9

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-type: none; margin: 0 0 2em; padding: 0; } .cds-navi li { display: inline; } .cds-navi li a { text-align: center; padding: 5px 0; width: 176px; display: block; text-decoration: none; border: 2px outset #c9c9c9; } .cds-navi li a:hover { color: #ff0000; text-decoration: underline; border: 2px inset #cccccc; }

Page Top | 利用方法

サイドメニューサンプル-10

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-type: none; margin: 0 0 2em; padding: 0; } .cds-navi li { display: inline; } .cds-navi li a { text-align: center; padding: 5px 0; width: 176px; display: block; text-decoration: none; border: 2px outset #c9c9c9; background-color: #000000; color: #ffffff; } .cds-navi li a:hover { text-decoration: underline; border: 2px inset #cccccc; background-color: #c9c9c9; color: #ff0000; }

Page Top | 利用方法

サイドメニューサンプル-11

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-type: none; margin: 0 0 2em; padding: 0; } .cds-navi li { display: inline; } .cds-navi li a { padding: 5px 10px; width: 156px; display: block; text-decoration: none; border: 2px outset #c9c9c9; } .cds-navi li a:hover { color: #ff0000; text-decoration: underline; border: 2px inset #cccccc; }

Page Top | 利用方法

サイドメニューサンプル-12

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-type: none; margin: 0 0 2em; padding: 0; } .cds-navi li { display: inline; } .cds-navi li a { padding: 5px 10px; width: 156px; display: block; text-decoration: none; border: 2px outset #c9c9c9; background-color: #000000; color: #ffffff; } .cds-navi li a:hover { text-decoration: underline; border: 2px inset #cccccc; background-color: #c9c9c9; color: #ff0000; }

Page Top | 利用方法

サイドメニューサンプル-13

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-type: none; margin: 0 0 2em; padding: 0; } .cds-navi li { display: inline; } .cds-navi li a { margin-bottom: 1px; padding: 5px 0 5px 10px; display: block; width: 165px; text-decoration: none; border-left: 5px solid #000000; background-color: #eeeeee; color: #000000; } .cds-navi li a:hover { background-color: #999999; color: #ff0000; border-left: 5px solid #ff0000; }

Page Top | 利用方法

サイドメニューサンプル-14

(X)HTMLソース: <ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>
CSSソース: .cds-navi { list-style-type: none; margin: 0 0 2em; padding: 0; } .cds-navi li { display: inline; } .cds-navi li a { text-align: left; text-decoration: none; padding: 5px 0; display: block; width: 100%; } .cds-navi li a:hover { text-align: right; color: #ff0000; text-decoration: underline; }

Page Top | 利用方法

スポンサードリンク