Question

如何在图片上创建菜单？ Image of footer menu

要求：

使用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;
}

现在它的行为就像一个dropup菜单。请记住，您必须重置响应式布局的定位，如：

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

DEMO

带有媒体查询的

UPDATE DEMO

更新：

隐藏CAPTION - 不透明度：0并在悬停时显示。
第二个隐藏选项 - visibilety：隐藏并在悬停时显示它。

这是一个快速的解决方案！其余应该是简单的CSS样式

DEMO

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

1 个答案: