具有出色悬停效果的 HTML5 和 CSS3 树形菜单答案

【问题标题】：HTML5 and CSS3 tree menu with nice hover effect具有出色悬停效果的 HTML5 和 CSS3 树形菜单
【发布时间】：2012-02-28 15:33:31
【问题描述】：

我想使用 HTML5 和 CSS3 或 jquery 菜单或以某种方式使用普通的 html、css 和 javascript 来实现一个树形菜单，如下面的链接。

http://www.crystal.ch/abb/power_systems_landscape/

您可能会注意到涉及以下问题，

不错的悬停效果（我非常需要这个）
菜单项箭头图标的旋转

您还可以在这里看到平滑的上下滑动，这对我来说没有问题。

任何想法或参考将不胜感激。谢谢

【问题讨论】：

任何其他链接。该网站是沉重的。很难加载
哦，现在已加载。我的效果与此病相同，我的代码可以帮助您

标签： javascript jquery html css menu

【解决方案1】：

首先我们需要 HTML

<p class="menu_head">first</p>

    <div class="menu_body">
         <a href="">1</a>
            <a href="">2</a>
            <a href="">3</a>
           <a href="">4</a>
    </div>

  <p class="menu_head1">Second</p>

    <div class="menu_body">
         <a href="">1</a>

    </div>

jquery 的效果

$("#firstpane p.menu_head").click(function()
{
    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

});
$("#firstpane p.menu_head1").click(function()
{
    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

});
    $("#firstpane p.menu_head").mouseover(function()
    {
    $(this).css("text-indent","35px");
    $(this).css("backgroundImage","url(images/trans.png)").fadeTo("slow",0.33);

});

$("#firstpane p.menu_head").mouseout(function()
{
    $(this).css("text-indent","10px");
    $(this).css("backgroundImage","url(images/headbot1.png)").fadeTo("slow", 1);    
});

我为您的玻璃效果添加了鼠标悬停和鼠标悬停。只需创建一个白色或任何颜色的背景，或者只需擦除 .css 即可。

$(this).fadeTo("slow",0.33);

CSS

.menu_head {
    font-family: arial;font-weight: bold;
    font-size:10px;
    color: black;
    left:3%;
    height:7px;
    text-indent:10px;
    padding: 10px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    vertical-align: middle;
}
.menu_head1 {
    font-family: arial;font-weight: bold;
    font-size:10px;
    color: black;
    left:3%;
    height:7px;
    text-indent:10px;
    padding: 10px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    vertical-align: middle;
}
.menu_body {
    display:none;
}
.menu_body a{
    font-family: arial;font-weight: bold;
    left:3%;
    width: 220px;
    height:7px;
    text-indent:10px;
    position:relative;
    padding: 10px 15px;
    display:block;
    color:#006699;
    padding-left:10px;
    font-weight:bold;
    font-size:10px;
    text-decoration:none;
    vertical-align: middle;
}

见Example

尝试编辑 css 以适应我的网站。古拉克

【讨论】：

您可能缺少 firstpane 包装 div。无论如何让我调查一下，谢谢
根据我的测试。你只是在点击时平滑地显示上下滑动，但我也非常需要像我提到的演示链接这样的悬停玻璃效果
我看到悬停时的玻璃效果我认为也是一个使用不透明度的 jquery 的 css 事件。让我处理它并更新你。我查看了该网站，它是在 Flash 中创建的。让我们看看我们是否可以在 jquery 中复制它
@shahdat 我不知道这种效果是否会与您提供的网站产生相同的效果，但我至少可以做到。它具有玻璃效果，也只需使用不透明度或在按钮上添加背景图像即可达到效果。玩得开心，Gudluck。希望对您有所帮助。
感谢您的尝试，但我们需要将鼠标悬停在中间（左右）上的可移动效果