css实现图标侧边栏菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现图标侧边栏菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        /** Inspired by: http://graphicburger.com/flat-design-ui-components/ **/
    /** Line-chart and donut-chart made by @kseso https://codepen.io/Kseso/pen/phiyL **/
    
    
    /************************************ FONTS ************************************/
    @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700);
    @import url(https://weloveiconfonts.com/api/?family=entypo|fontawesome|zocial);
    /* entypo */
    [class*="entypo-"]:before {
      font-family: 'entypo', sans-serif;
    }
    /* fontawesome */
    [class*="fontawesome-"]:before {
      font-family: 'FontAwesome', sans-serif;
    }
    /* zocial */
    [class*="zocial-"]:before {
      font-family: 'zocial', sans-serif;
    }
    @font-face {
        font-family: 'icomoon';
        src:url('https://jlalovi-cv.herokuapp.com/font/icomoon.eot');
        src:url('https://jlalovi-cv.herokuapp.com/font/icomoon.eot?#iefix') format('embedded-opentype'),
                url('https://jlalovi-cv.herokuapp.com/font/icomoon.ttf') format('truetype'),
                url('https://jlalovi-cv.herokuapp.com/font/icomoon.woff') format('woff'),
                url('https://jlalovi-cv.herokuapp.com/font/icomoon.svg#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    [class^="icon-"], [class*=" icon-"] {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
    
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-cloudy:before {
        content: "\e60f";
    }
    .icon-sun:before {
        content: "\e610";
    }
    .icon-cloudy2:before {
        content: "\e611";
    }
    /************************************* END FONTS *************************************/
    
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;  
    }
    
    body {
        background: #1f253d;
    }
    
    ul {
        list-style-type: none;
        margin: 0;
        padding-left: 0;
    }
    
    h1 {
        font-size: 23px;
    }
    
    h2 {
        font-size: 17px;
    }
    
    p {
        font-size: 15px;
    }
    
    a {
        text-decoration: none;
        font-size: 15px;
    }
        a:hover {
                text-decoration: underline;
        }
    
    h1, h2, p, a, span{
        color: #fff;
    }
        .scnd-font-color {
                color: #9099b7;
        }
    
    .input-container {
        position: relative;
    }
        input[type=text]{
                width: 260px;
                height: 50px;
                margin-left: 20px;
                margin-bottom: 20px;
                padding-left: 45px;
                background: #50597b;
                color: #fff;
                border: solid 1px #1f253d;
                border-radius: 5px;             
        }
                input[type=text]::-webkit-input-placeholder { /* WebKit browsers */
                        color: #fff;                    
                }
                input[type=text]:-moz-input-placeholder { /* Mozilla Firefox 4 to 18 */
                        color: #fff;       
                }
                input[type=text]::-moz-input-placeholder { /* Mozilla Firefox 19+ */
                        color: #fff;
                }
                input[type=text]:-ms-input-placeholder { /* Internet Explorer 10+ */
                        color: #fff;            
                }
                input[type=text]:focus {
                        outline: none; /* removes the default orange border when focus */
                        border: 1px solid #11a8ab;
                }
        .input-icon {
                font-size: 22px;
                position: absolute;
                left: 31px;
                top: 10px;
        }
                .input-icon.password-icon {
                        left: 35px;
                }
    
    .horizontal-list {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
        .horizontal-list li {
                float: left;
        }
    
    .clear {
        clear: both;
    }
    
    .icon {
        font-size: 25px;
    }
    
    .titular {
        display: block;
        line-height: 60px;
        margin: 0;
        text-align: center;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .button {
        display: block;
        width: 175px;
        line-height: 50px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        margin: 0 auto;
        border-radius: 5px;
        -webkit-transition: background .3s;
        transition: background .3s;
    }
        .button:hover {
                text-decoration: none;
        }
    
    .arrow-btn-container {
        position: relative;
    }
        .arrow-btn {
                position: absolute;
                display: block;
                width: 60px;
                height: 60px;
                -webkit-transition: background .3s;
                transition: background .3s;
        }
                .arrow-btn:hover {
                        text-decoration: none;
                }
                .arrow-btn.left {
                        border-top-left-radius: 5px;
                }
                .arrow-btn.right {
                        border-top-right-radius: 5px;
                        right: 0;
                        top: 0;
                }
                .arrow-btn .icon {
                        display: block;
                        font-size: 18px;
                        border: 2px solid #fff;
                        border-radius: 100%;
                        line-height: 17px;
                        width: 21px;
                        margin: 20px auto;
                        text-align: center;
                }
                        .arrow-btn.left .icon {
                                padding-right: 2px;
                        }
    
    .profile-picture {
        border-radius: 100%;
        overflow: hidden;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;        
    }
        .big-profile-picture {
                margin: 0 auto;         
                border: 5px solid #50597b;
                width: 150px;
                height: 150px;
        }
        .small-profile-picture {
                border: 2px solid #50597b;
                width: 40px;
                height: 40px;
        }
    
    
    /** MAIN CONTAINER **/
    
    .main-container {
        font-family: 'Ubuntu', sans-serif;
        width: 950px;
        height: 1725px;
        margin: 6em auto;
    }   
        /*********************************************** HEADER ***********************************************/
        header {
                height: 80px;
        }
                .header-menu {
                        font-size: 17px;
                        line-height: 80px;
                }
                        .header-menu li {
                                position: relative;
                        -webkit-transform: translateZ(0); /** To avoid a flash when hover messages **/
                        }
                                .header-menu-tab {
                                        padding: 0 27px;
                                        display: block;
                                        line-height: 74px;
                                        font-size: 17px;
                                        -webkit-transition: background .3s;
                                        transition: background .3s;
                                }
                                        .header-menu-tab:hover {
                                                background: #50597b;
                                                border-bottom: 4px solid #11a8ab;
                                                text-decoration: none;
                                        }
                                        .header-menu-tab .icon {
                                                padding-right: 15px;
                                        }
                                .header-menu-number {
                                        position: absolute;
                                        line-height: 22px;
                                        padding: 0 6px;
                                        font-weight: 700;
                                        background: #e64c65;
                                        border-radius: 100%;
                                        top: 15px;
                                        right: 2px;
                                        -webkit-transition: all .3s linear;
                                        transition: all .3s linear;
                                }
                                        .header-menu li:hover .header-menu-number {
                                                text-decoration: none;
                                                -webkit-transform: rotate(360deg);
                                                transform: rotate(360deg);
    
                                        }
                .profile-menu {
                        float: right;
                        height: 80px;
                        padding-right: 20px;
                }
                        .profile-menu p {
                                font-size: 17px;
                                display: inline-block;
                                line-height: 76px;
                                margin: 0;
                                padding-right: 10px;
                        }
                                .profile-menu a {
                                        padding-left: 5px;
                                }
                                        .profile-menu a:hover {
                                                text-decoration: none;
                                        }
                        .small-profile-picture {
                                display: inline-block;
                                vertical-align: middle;                         
                        }
        /** CONTAINERS **/
        .container {
                float: left;
                width: 300px;
        }
                .block {
                        margin-bottom: 25px;
                        background: #394264;
                        border-radius: 5px;
                }
                /******************************************** LEFT CONTAINER *****************************************/
                .left-container {}
                        .menu-box {
                                height: 360px;
                        }
                                .menu-box .titular {
                                        background: #11a8ab;
                                }
                                .menu-box-menu .icon {
                                        display: inline-block;
                                        vertical-align: top;
                                        width: 28px;
                                        margin-left: 20px;
                                        margin-right: 15px;
                                }
                                .menu-box-number {
                                        width: 36px;
                                        line-height: 22px;
                                        background: #50597b;
                                        text-align: center;
                                        border-radius: 15px;
                                        position: absolute;
                                        top: 15px;
                                        right: 15px;
                                        -webkit-transition: all .3s;
                                        transition: all .3s;
                                }
                                .menu-box-menu li{
                                        height: 60px;
                                        position: relative;                                                                             
                                }
                                .menu-box-tab {
                                        line-height: 60px;
                                        display: block;
                                        border-bottom: 1px solid #1f253d;
                                        -webkit-transition: background .2s;
                                        transition: background .2s;
                                }
                                        .menu-box-tab:hover {
                                                background: #50597b;
                                                border-top: 1px solid #1f253d;
                                                text-decoration: none;
                                        }
                                        .menu-box-tab:hover .icon {
                                                color: #fff;
                                        }
                                        .menu-box-tab:hover .menu-box-number {
                                                background: #e64c65;
                                        }
                        .donut-chart-block {
                                height: 434px;
                        }
                                .donut-chart-block .titular {
                                        padding: 10px 0;
                                }
                                .donut-chart {
                                        height: 270px;
                                }
                                /******************************************
                                DONUT-CHART by @kseso https://codepen.io/Kseso/pen/phiyL
                                ******************************************/
                                        .donut-chart {
                                          position: relative;
                                                width: 200px;
                                          height: 200px;
                                                margin: 0 auto 2rem;
                                                border-radius: 100%
                                         }
                                        p.center-date {
                                          background: #394264;
                                          position: absolute;
                                          text-align: center;
                                                font-size: 28px;
                                          top:0;left:0;bottom:0;right:0;
                                          width: 130px;
                                          height: 130px;
                                          margin: auto;
                                          border-radius: 50%;
                                          line-height: 35px;
                                          padding: 15% 0 0;
                                        }
                                        .center-date span.scnd-font-color {
                                         line-height: 0; 
                                        }
                                        .recorte {
                                            border-radius: 50%;
                                            clip: rect(0px, 200px, 200px, 100px);
                                            height: 100%;
                                            position: absolute;
                                            width: 100%;
                                          }
                                        ..........完整代码请登录后点击上方下载按钮下载查看