1

Mozilla.com has this tab on the top of their site that you can click and a menu drops down. I have a client who wants me to do the same thing but upside down, from the bottom half of the page. Apparently this is a really hard request. How do I make something like tabzilla that goes up and either overlaps or pushes the content away? Thanks!

Update: I love you guys.

Edit: http://hemakessites.com/mayukh/4/ Why does the top "Sign In/Register" pop down and the "Toggle" on the bottom pops up? I'm not seeing the difference besides 'top' and 'bottom' in the css. How does that change the direction of the popup?

Also, clicking the '337-9147' will expand the menu. I only want the button region to be clickable. How can I accomplish this?

You guys are awesome and I'm going to return the favor by answering some questions on here when I get time.

4

3 回答 3

1

我采取了与其他人类似的方法，因为您将 div 设置为在屏幕底部具有固定或绝对位置（取决于选项卡是否应该始终可见，或者仅在最底部）。然后，您可以编写一些非常简单的 javascript 来改变元素的高度，并且由于底部是固定的，它将导致选项卡上升到屏幕中。

基本上你只需要

.container{
 position: absolute;
 bottom: -1px;    
}

和

$('.container').toggle(function(){
    $(this).animate({height:'205px'}, 500)
},function(){
    $(this).animate({height:'20px'}, 200)           
});

这是一个jsfiddle 演示。

于 2012-11-17T04:59:00.543 回答
0

这是一个jQuery解决方案，比css3更流畅：

所以，你会想做这样的 jsfiddle （注意：这需要 jQuery）：http: //jsfiddle.net/cFkn2/

$(document).ready(function() {
    $('#tab').click(function() {
        if ($('#tab').css('height') == '20px') {
            $('#tab').animate({
                height: '100px'
            }, 1000);
        }
        else {
            $('#tab').animate({
                height: '20px'
            }, 1000);
        };
    });
});

和

#tab{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: red;
    height:20px;
}

和

<div id="tab">CONTENT</div>

样式、编辑和添加缓动以适应口味。

于 2012-11-17T04:56:55.180 回答
0

我懒得在这里制作点击处理程序，所以它只是 css3 悬停示例

我使用 {top: 100%} 的固定位置，动画过渡，边距 <0 显示；

HTML

  <div id="menu">
    <div id="handler">handler</div>
    <div id="menucontent">
    menu menu<br>
    menu menu<br>
    </div>
  </div>
  <div id="content">
   <div> text   text   text</div>
   <div> text   text   text</div>
   <!-- many of them -->
   <div> text   text   text</div>
   <div> text   text   text</div>
   <div> text   text   text</div>
  </div>

CSS：

#content > div {
 font-size: 2em; 
 height: 2.1em;
 border: 1px solid black;
 margin-top: 10px;
}
#menu {
 left: 30px;
 position: fixed;
 font-size: 20px;
 width: 300px;
 height: 300px;
 top: 100%;
 border: 1px solid red;
 background: white;
 -webkit-transition: all 1s;
 -mozilla-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
}
#menu #handler {
 position: absolute;
 top: -40px;
 background: green;
 font-size: 30px;
 height: 40px;
 padding-left: 5px;
 padding-right: 5px;
 left: 10px;
}
#menu:hover {
 margin-top: -300px; 

}

用 click，或

JS：

$(function() {
  $('#menu #handler').click(function() {
  $('#menu').toggleClass('shown');
  });
});

在 css 中更改hover为类shown

#menu.shown {
 margin-top: -300px; 
}
于 2012-11-17T04:48:46.227 回答