响应式粘页脚菜单悬停效果

Question

如何在图片上创建菜单？

要求：

• 使用 Bootstrap 列构建，必须是响应式的
• 在正常状态，只能看到选项和图标（绿色方块）
• OnHover：子选项（蓝色矩形）展开，将选项向上推，红色矩形中的标题也出现，同时将整个选项向上推。
• 当一个菜单项悬停时，所有其他菜单项必须保持向下，不能移动
• 用动画展开

这是我的小提琴尝试： http://jsfiddle.net/52VtD/7878/

一个项目的HTML（所有都被包裹在一行中）：

<div class="col-xs-12 col-sm-3 nopadding item">
        <div class="mask">  
            <div class="inner-wrapper">
                <p>Option A</p>
                <div class="hidding-guy">
                    <p>Hello</p>
                    <a href="#">Suboption</a>
                    <a href="#">Suboption</a>
                    <a href="#">Suboption</a>
                </div>
                <i class="origami o-01"></i>
            </div>
            <div class="btn-red ">CAPTION</div>
        </div>
    </div>

CSS：

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.footer-menu-wrapper {
  background: #ddd;
  position: fixed;
  bottom: 0;
  width: 100%;
    margin: 0;
}
.footer-menu-wrapper .item {
  position: relative;
}
.footer-menu-wrapper .item:hover .hidding-guy, .footer-menu-wrapper .item:hover .hidding-guy > * {
  height: auto;
}
.footer-menu-wrapper .mask {
  border: 1px solid #ccc;
  width: 100%;
}
.footer-menu-wrapper .mask .hidding-guy {
  height: 0px;
}
.footer-menu-wrapper .mask .hidding-guy > * {
  display: block;
  height: 0px;
}

.btn-red {
  background: #e91333;
  color: #fff;
  width: 100%;
  min-height: 66px;
  border: 0px transparent;
  text-align: center;
}

Answer 1

将你的 css 更改为：

.footer-menu-wrapper .mask {
    border: 1px solid #ccc;
    width: 100%;
    position: absolute;
    background-color: #ddd;
    bottom: 0;
}

现在它的行为类似于下拉菜单。请记住，您必须重置响应式布局的定位，例如：

    @media (max-width: 768px){
        .footer-menu-wrapper .mask{
            position: relative;
        }
    }

DEMO

UPDATE DEMO 带媒体查询

更新：

1. 隐藏 CAPTION - opacity: 0 并在悬停时显示。
2. 第二个隐藏选项 - 可见性：隐藏并在悬停时显示。

这是一个快速的解决方案！剩下的应该是简单的css样式

DEMO