css - 如何创建像 youtube 那样的下拉菜单？

Question

如果你去http://www.youtube.com/现在在 youtube Logo 旁边有一个下拉按钮，它会弹出一个包含内容的菜单，它会将其显示在页面左侧，并且当您滚动时它不会消失。你会如何创建这个菜单？

Answer 1

可以结合使用 Css、jQuery 等。为了让您快速了解如何实现此目的，它看起来像顶部 div、左侧 div(固定)和右侧 div(内容所在的位置)。

CSS 示例:

#ScrollContent {
    width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: #C0C0C0;
    clear: left;
}


#Menu {
    width: 20%;
    height: 100%;

    position: fixed;
    outline: 1px solid;
    background: #92c452;
}

jQuery 示例:

    jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#Menu').toggle('show');
    });
});

我创建了一个 Fiddle给出基本的想法......这绝不是完美的 fiddle ，但我希望它能帮助你完成你想要的。

祝你好运