css实现左侧自动伸缩菜单效果代码

代码语言:html

所属分类:菜单导航

代码描述:css实现左侧自动伸缩菜单效果代码

代码标签: 自动 伸缩 菜单 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
        body
        {
            margin: 0px;
            padding: 0px;
            font-family: "Open Sans", arial;
            background: #C7B7A7 ;
            color: #fff;
            font-weight: 300;
        }


    }


    .logo
    {}

    .settings
    {
        height: 73px;
        float: left;
        
        width: 250px;
        margin: 0px;
        text-align: center;
        font-size: 20px;
        font-family: 'Strait', sans-serif;
    }

    .cscrollbar
    {
        height: 90%;
        width: 100%;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .scrollbar:hover
    {

        height: 90%;
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    /* Scrollbar Style */



    #style-1::-webkit-scrollbar-track
    {
        border-radius: 2px;
    }

    #style-1::-webkit-scrollbar
    {
        width: 5px;
        background-color: #F7F7F7;
    }

    #style-1::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color.........完整代码请登录后点击上方下载按钮下载查看

网友评论0