demo3---定位菜单

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了demo3---定位菜单相关的知识,希望对你有一定的参考价值。

设置最小宽度,以便容器内容为空时仍可显示默认宽度,内容较多时可自动扩展,也可称为安全宽度,默认为1004px

让元素“消失”的方法:
  display:none;//隐藏对象
  opacity:0//设置透明
  overflow:hidden;//隐藏溢出元素
  visibility:hidden;//设置元素不可见
  width:0;height:0;

input输入框无法添加图片,textArea文本域可以添加背景图片

 

        <div class="mainbox">
            <div class="btn">a
                <div class="title">菜单1</div>
            </div>
            <div class="btn">b
                <div class="title">菜单2</div>
            </div>
            <div class="btn">c
                <div class="title">菜单3</div>
            </div>
            <div class="btn">d
                <div class="title">菜单4</div>
            </div>
        </div>
.btn:hover{
    background: #900;
}
.btn .title{
    height: 50px;
    
    background: #900;
    border-radius: 5px;
    overflow: hidden;
    
    position: absolute;
    top: 0px;
    right:50px;
    
    /*1 使用display控制元素是否显示*/
    /*width: 80px;*/
    /*display:none;*/
    
    /*2 使用动画Transition,一旦width的值变化,就开始动画*/
    width: 0px;
    /*transition: width 1s;*/
    
    /*3 使用Opaicity透明度*/
    /*width: 80px;*/
    /*opacity: 0;*/
    
    /*4 使用动画监视多个变量*/
    /*width: 0;*/
    /*opacity: 0;*/
    /*transition: all 1s;*/
    
}
.btn:hover .title{
    
    /*1 */
    /*display: block;*/
    
    /*2 */
    width: 80px;
    
    /*3*/ 
    /*opacity: 1;*/
    
    /*4 */
    /*width: 80px;
    opacity: 1;*/
}









以上是关于demo3---定位菜单的主要内容,如果未能解决你的问题,请参考以下文章

CSS代码片段

CSS代码片段

创建片段的新实例时菜单未膨胀

常用的几个JQuery代码片段

标签菜单android - 不正确的调用片段

使用导航从工具栏菜单项单击在片段之间传递数据 - Kotlin