demo3---定位菜单

Posted 2020-10-03

设置最小宽度，以便容器内容为空时仍可显示默认宽度，内容较多时可自动扩展，也可称为安全宽度，默认为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;*/
}