css菜单

作者: 吴宪峰 | 来源:发表于2019-03-25 11:12 被阅读0次

CSS侧边菜单
CSS3demo
css菜单
css学习第五天
纯css实现的三级水平导航菜单
Bluma高效画页面
CSS常用菜单（三）
CSS多级菜单
CSS多级菜单
CSS界面组件之导航菜单

image.png

html

<!DOCTYPE html>
<html>

<head>
    <title>watch</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">


    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="middle">
        <div class="menu">
            <li class="item" id="profile">
                <a href="#profile" class="btn"><i class="far fa-user"></i>Profile</a>
                <div class="smenu">
                    <a href="#">Posts</a>
                    <a href="#">Picture</a>
                </div>
            </li>


            <li class="item" id="message">
                <a href="#message" class="btn"><i class="far fa-envelope"></i>message</a>
                <div class="smenu">
                    <a href="#">new</a>
                    <a href="#">sent</a>
                    <a href="#">spamk</a>
                </div>
            </li>


            <li class="item" id="setting">
                <a href="#setting" class="btn"><i class="fas fa-cog"></i>setting</a>
                <div class="smenu">
                    <a href="#">password</a>
                    <a href="#">language</a>
                </div>
            </li>


            <li class="item">
                <a href="#" class="btn"><i class="fas fa-sign-out-alt"></i>logout</a>
            </li>
        </div>
    </div>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    list-style: none;
    text-decoration: none;
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu {
    width: 300px;
    border-radius: 8px;
    overflow: hidden;
}

.item {
    border-top: 1px solid #2980b9;
    overflow: hidden;
}

.btn {
    display: block;
    padding: 16px 20px;
    background: #3498db;
    color: white;
    position: relative;
}

.btn:before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: #3498db;
    left: 20px;
    bottom: -7px;
    transform: rotate(45deg);
}

.btn i {
    margin-right: 10px;
}

.smenu {
    background: #333;
    overflow: hidden;
    transition: max-height .3s;
    max-height: 0;
}

.smenu a {
    display: block;
    padding: 16px 26px;
    color: white;
    font-size: 14px;
    margin: 4px 0;
    position: relative;
}

.smenu a:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 100%;
    background: #3498db;
    left: 0;
    top: 0;
    transition: .3s;
    opacity: 0;
}

.smenu a:hover:before {
    opacity: 1;
}

.item:target .smenu {
    max-height: 10em;
}