用纯css切换菜单

Switch menu with pure css?

本文关键字：菜单 css 用纯      更新时间：2023-09-26

更新我使用了单选按钮，所以您只能打开一个项目。但你无法关闭它。Fiddle

我想知道是否可以用纯CSS制作我的菜单。现在我用javascript修改css。

注意：我没有使用Jquery或任何其他lib，这不是我的问题。

我想在纯css 中制作菜单的涂鸦

HTML:

<div class="menuItem" onclick="mySwitch(0)">Click Item 1</div>
<div class="subItem">Hi there</div>
<div class="menuItem" onclick="mySwitch(1)">Click Item 2</div>
<div class="subItem">Some text over here.</div>
<div class="menuItem" onclick="mySwitch(2)">Click Item 3</div>
<div class="subItem">Tnx for clicking</div>

CSS：

    .menuItem {
        display:block;
        width:100%; 
        height:20px;
        background:#ff0;
    }
    .subItem {
        display: none;     -- Hide the submenu
    }

Javascript

function mySwitch(nr) {
    var itemsArr = document.getElementsByClassName('subItem');    
    for(var i = 0; i < itemsArr.length; i++) {
         var item = itemsArr[i];
         if(i == nr) {
             if(item.style.display == 'none') {
                 item.style.display = 'block';
             } 
             else {          
               item.style.display = 'none';
             }
         } else {
             item.style.display = 'none';
         }  
    }
}

当您可以使用CSS获得相同的结果时，防止过度使用JavaScript是一种很好的做法，但有时需要更改DOM元素并应用一些"技巧"来使其发挥作用，这一点都不好。

看看这个只有CSS3的DEMO。您可以使用悬停事件而不是单击事件来实现类似的效果。您可以将:hover更改为:active，但只有在DIV元素内按住鼠标按钮时，这才会起作用。

此.menuItem:hover + .subItem CSS规则显示悬停的.menuItem 的下一个.subItem元素

由于您不想使用JavaScript事件，因此无法将类应用于元素。如果你这样做会更容易。这样，只使用CSS，您可以应用一些技巧，比如使用复选框而不是DIV元素，并使用它们的:checked属性作为CSS规则来显示子链接。

类似这样的东西：

<label for="m1" class="menuItem">Click Item 1</label>
<input id="m1" class="cb" type="checkbox">
<div class="subItem">Hi there</div>
<label for="m2" class="menuItem">Click Item 2</label>
<input id="m2" class="cb" type="checkbox">
<div class="subItem">Some text over here.</div>
<label for="m3" class="menuItem">Click Item 3</label>
<input id="m3" class="cb" type="checkbox">
<div class="subItem">Tnx for clicking</div>
.cb {
    display: none;
}
.cb:checked + .subItem {
    display: block;
}

工作演示

我想你可以看看这个教程：链接

希望这对有帮助

相关文章：