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

Question

如何创建如图所示的菜单？

要求:

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

这是我的 fiddle 尝试: 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 - 不透明度:0 并在悬停时显示。
2. 其次隐藏选项 - 可见性:隐藏并在悬停时显示。

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

DEMO