コピペでできるメニューバーのデザインサンプル一覧

2023年10月10日2023年10月11日

メニューバーのデザインサンプル一覧

シンプル

フレーム

.t8-menubar-1a {
    display: flex;
    border: 1px solid #808080;
    padding: 15px; 0; 
}

.t8-menubar-1a li{
    margin-right: 15px;
    list-style: none;
}

.t8-menubar-1a a:hover{
    color: #fff;
}

サイドバー

.t8-menubar-2 {
    display: flex;
}

.t8-menubar-2 li{
    margin-right: 15px;
    list-style: none;
    border-left: 3px solid #808080;
    padding-left: 10px;
}

.t8-menubar-2 a:hover{
    color: #fff;
}

アンダーバー

.t8-menubar-3 {
    display: flex;
    border-bottom: 1px solid #808080;
}

.t8-menubar-3 li{
    margin-right: 15px;
    list-style: none;
}

.t8-menubar-3 a:hover{
    color: #fff;
    border-bottom: 3px solid #blue;
}

ハイライト

ハイライト(区切り)

.t8-menubar-4a {
    display: flex;
    padding:15px;
    background: #505050;
}

.t8-menubar-4a li{
    margin-right: 15px;
    list-style: none;
    border-left: 3px solid #808080;
    padding-left: 10px;
}

.t8-menubar-4a a:hover{
    color: #fff;
}

ハイライト(ボックス)

ボックス(角型)

.t8-menubar-5 {
    display: flex;
}

.t8-menubar-5 li{
    margin-right: 15px;
    list-style: none;
    border: 1px solid #808080;
    padding: 15px; 0; 
}

.t8-menubar-5 a:hover{
    color: #fff;
}

ボックス(角丸)

.t8-menubar-6 {
    display: flex;
}

.t8-menubar-6 li{
    margin-right: 15px;
    list-style: none;
    border: 1px solid #808080;
    border-radius: 10px;
    padding: 15px; 0; 
}

.t8-menubar-6 a:hover{
    color: #fff;
}

ボックス(円型)

.t8-menubar-7 {
    display: flex;
}

.t8-menubar-7 li{
    margin-right: 15px;
    list-style: none;
    border: 1px solid #808080;
    border-radius: 50%;
    padding: 15px; 0; 
}

.t8-menubar-7 a:hover{
    color: #fff;
}

スライド(横スクロール)

<nav>
  <ul class="t8-menubar-8">
    <li><a href="#">MENU1</a></li>
    <li><a href="#">MENU2</a></li>
    <li><a href="#">MENU3</a></li>
    <li><a href="#">MENU4</a></li>
    <li><a href="#">MENU5</a></li>
    <li><a href="#">MENU6</a></li>
  </ul>
</nav>

アコーディオン(ハンバーガー)

<nav>
<ul class="t8-menubar-9">
    <li>
        <a href="">Menu1</a>
        <ul>
            <li><a href="">Sub1</a></li>
            <li><a href="">Sub2</a></li>
            <li><a href="">Sub3</a></li>
        </ul>
    </li>
    <li><a href="">Menu2</a>
        <ul>
            <li><a href="">Sub1</a></li>
            <li><a href="">Sub2</a></li>
            <li><a href="">Sub3</a></li>
        </ul>
    </li>
    <li><a href="">Menu3</a>
        <ul>
            <li><a href="">Sub1</a></li>
            <li><a href="">Sub2</a></li>
            <li><a href="">Sub3</a></li>
        </ul>
    </li>
</ul>
</nav>

.t8-menubar-9 {
    display: flex;
    height: 2rem;
    width: 300px;
    padding: 0 !important;
}

.t8-menubar-9 > li {
    width: 50%;
}

.t8-menubar-9 ul {
    padding: 0;
}

.t8-menubar-9 li {
    list-style: none;
    position: relative;
}

.t8-menubar-9 li a {
    background: #0d6efd;
    border-right: 1px solid #808080;
    color: #fff;
    display: block;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

.t8-menubar-9 li li {
    height: 0;
    overflow: hidden;
    transition: 0s;
    padding: 0;
}

.t8-menubar-9 li li a {
    border-top: 1px solid #fff;
    background: #0dcaf0;
}

.t8-menubar-9 li:hover > ul > li {
    height: 2rem;
    overflow: visible;
}

URLをコピーしました！