【代码摘录】HTML+CSS实现下拉菜单

知识分子没文化
2021-11-19 / 0 评论 / 35 阅读 / 正在检测是否收录...

目录:

在B站上看到一个up主写的一段下拉菜单代码,实现效果还挺好看的,遂进行小改之后拿来收藏,以供日后使用。

源代码出自:B站up主 山羊の前端小窝

视频链接:https://www.bilibili.com/video/BV1S44y147oV

一、演示效果

演示如下,鼠标悬浮即可查看效果:

二、源代码

1.HTML代码

<body>
<ul class="shell">
    <li class="button">
        <span>消息</span>
        <ul>
            <li><a href="" target="_blank">回复我的</a></li>
            <li><a href="" target="_blank">收到的赞</a></li>
            <li><a href="" target="_blank">我的消息</a></li>
        </ul>
    </li>

    <li class="button">
        <span><a href="" target="_blank">动态</a></span>
    </li>

    <li class="portrait">
        <ul class="information">
            <li>知识分子没文化</li>
            <li><a href="https://www.wlplove.com" target="_blank">博客</a></li>
        </ul>
    </li>

    <li class="button">
        <span>收藏夹</span>
        <ul>
            <li><a href="" target="_blank">默认收藏夹</a></li>
            <li><a href="" target="_blank">计算机编程</a></li>
            <li><a href="" target="_blank">有点意思</a></li>
            <li><a href="" target="_blank">说的不错</a></li>
        </ul>
    </li>

    <li class="button">
        <span>投稿</span>
        <ul>
            <li><a href="" target="_blank">专栏投稿</a></li>
            <li><a href="" target="_blank">音频投稿</a></li>
            <li><a href="" target="_blank">贴纸投稿</a></li>
            <li><a href="" target="_blank">视频投稿</a></li>
            <li><a href="" target="_blank">投稿管理</a></li>
        </ul>
    </li>
</ul>
</body>

2.CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 20px;
    color: #f4f1de;
}

.shell {
    display: flex;
    justify-content: center;
    margin-top:50px;
}

.button, .portrait {
    background-color: #50536e;
    width: 170px;
    height: 65px;
    text-align: center;
    line-height: 65px;
    transition: 0.3s;
    /* 指定浏览网页时鼠标指针的形状 */
    cursor: pointer;
}

.portrait::before {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transform: translate(30px, -30px);
    background-image: url("https://image.wlplove.com/static/img/icon/headpic.png");
    background-size: cover;
    border: 10px solid #fff;
}

.information {
    width: 220px;
    background-color: #e07a5f;
    transform: translate(-20px, -200px);
    border-radius: 10px;
    padding: 20px 0;
    line-height: 0;
    height: 0;
    transition: 0.3s;
    /* opacity属性指定了一个元素的不透明度,其取值从0-1。*/
    /* 在0时会完全看不见,1表示完全可见 */
    opacity: 0;
}

.button:hover {
    background-color: #d15a39;
}

.button li:hover {
    background-color: #ffb29d;
}

.button ul li {
    height: 0;
    transition: 0.2s;
    opacity: 0;
    transform: translateY(-65px);
    background-color: #e07a5f;
}

.button:hover li {
    height: 65px;
    opacity: 1;
    transform: translateY(0);
}

.portrait:hover .information {
    opacity: 1;
    line-height: 65px;
    transform: translate(-20px, -10px);
    height: auto;
}

a{
    text-decoration: none;
}
0

评论 (0)

取消