像 Bootstrap 一样使用纯 CSS 制作动画下拉菜单

【问题标题】：Making Animated Dropdown Menu by Using Pure CSS Like Bootstrap does像 Bootstrap 一样使用纯 CSS 制作动画下拉菜单
【发布时间】：2015-04-21 14:59:57
【问题描述】：

我正在使用我自己的项目来构建样式表（CSS），就像 bootstrap 所做的那样。但是，我尝试只使用 PURE CSS - no javascript 或 jquery even flash 来做到这一点。

现在，我在小幅调整大小时遇到​​了动画菜单下拉菜单的问题 就像手机版的样子。

我想要的是：

首先，当浏览器调整大小小于 768 和 480 或 (55%) 时，动画圆形菜单 出现，动画和菜单被隐藏。之后，在悬停 (<div class="acn-menu"></div>) 时，动画圆形菜单再次运行。当用户点击或触摸动画圆圈菜单时，动画圆圈菜单停止并出现下拉菜单并按下 它下面的内容没有滚动条，同时动画圆圈回滚并停止。

第二，如何兼容所有浏览器（甚至在IE中）。

这是我一个多星期以来所做的事情：（抱歉我的英语不好）： 我刚刚在下面的这个网站上传了样本：

演示The Dropdown-Menu

HTML：

<header>
<div id="acn-border"></div><div class="acn-title"><a href="#">
<h1>Appacyber</h1></a></div>
    <div class="menu-container">
        <div class="acn-menu"></div>
            <nav>
                <ul class="main-menu">
                    <li><a href="#" class="home"><span class="fa 
fa-home"></span> Home</a></li>
                    <li><a href="#">Produk <span class="fa fa-caret-
down"></span> </a>
                        <ul class="sub-menu">
                            <li><a href="#">Desain Website</a></li>
                            <li><a href="#">Desain/Edit CMS</a></li>
                            <li><a href="#">Order Template Blogspot</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown" href="#">Pembayaran <span 
class="fa fa-caret-down"></span> </a>
                        <ul class="sub-menu">
                            <li><a href="#">Via Transfer Bank</a></li>
                            <li><a href="#">Via Pulsa</a></li>
                            <li><a href="#">Via Paypal</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Order</a></li>
                    <li><a href="#">Contact</a></li>
                    <input type="text" class="input-acn-search" 
placeholder="search ..."/><button type="button" class="btn-search">&
gt;</button>
                </ul>
            </nav>

    </div>
</header>

<!--here the content to be pushed when the screen in small rezise-->

样式表：

<style>
.input-acn-search{
border:1px solid #979797;
padding:7px 34px 7px 7px;
font-size:14px;
font-weight:400;
color:#111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:7px 0px 0px 10px;
}
.btn-search{
background:#006666;
color:#fff;
border:0px;
font-size:18px;
margin:0px 0px 0px -30px;
-webkit-border-radius:17px;
-moz-border-radius:17px;
border-radius:17px;
border:0px;
min-width:5%;
}
.input-acn-search:hover{
background:#fff;
border:1px solid #979797;
}
.input-acn-search placeholder{
color:#666666;
}
.acn-title{
margin:0px;
height:45px;
padding:0px 25px 0px 25px;
background:#FF9900;
line-height:normal;
vertical-align:middle;
display:table-cell!important;
}
.menu-container{
width:100%;
margin:0px;
height:45px;
padding:0px;
background:#222222;
line-height:normal;
vertical-align:middle;
display:table-cell!important;
}
.acn-title a,.acn-title a h1{
color:#FFFFFF;
font-size:19px;
font-weight:500;
font-style:normal;
font-size-adjust:inherit;
}
.acn-title a:hover,.acn-title a:hover h1{
color:#999;
}
#acn-border{
position:absolute;
width:20px;
height:20px;
border-top:17px solid transparent;
border-left:21px solid #FF9900;
border-bottom:17px solid transparent;
display:table-cell;
margin-top:7px;
margin-left:140px;
z-index:1;
}
ul,li,ul li{
list-style:none;
list-style-image:none;
background:none;
}
/*------menu-------*/
nav ul.main-menu li a{
color:#fff;
}
.home a{
background:#9966CC;
color:#e0e0e0;
-webkit-border-radius:0px 37px 37px 0px;
border-radius:0px 37px 37px 0px;
}
nav ul {
-webkit-font-smoothing:antialiased;
background:#222222;
margin:0;
padding:0;
height:45px;
}
nav li {
float:left;
margin:0;
padding:0;
position:relative;
min-width:110px;
}
nav a {
background:none;
display:block;
font:normal 14px/50px Ubuntu;
padding:0 25px;
text-align:center;
text-decoration: none;
}
li a{
color:#e0e0e0;
background:none;
}
nav li:hover a {
background:#000;
color:#e0e0e0;
}
nav li ul {
float:left;
left:0;
opacity:0.5;
position:absolute;
top:35px;
visibility:hidden;
z-index:1;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
nav li:hover ul {
opacity:1;
top:50px;
visibility:visible;
}
nav li ul li {
float:none;
width:100%;
}
nav li ul a:hover {
background:#666666;
color:#fff;
}
ul.sub-menu{
min-width:180px;
max-width:100%;
}
ul.sub-menu li:hover{
background-color:#000;
color:#fff;
border:0px;
border:none;
}

@media screen and (max-width:55%){/*bila screen maksimum 55% atau sama dengan #bingkai-mini*/}
@media screen and (max-width:768px) and (max-width:480px) {

    .acn-menu{
    display:block;
    visibility:visible;
    width:37px;
    height:37px;
    margin-top:0px;
    margin-right:17px;
    margin-left:17px;
    background:none;
    border:10px inset #428BCA;
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    -webkit-border-radius:50%!important;
    -moz-border-radius:50%!important;
    -o-border-radius:50%!important;
    border-radius:50%!important;
    }
    .menu-container .acn-menu:hover{
    cursor:pointer;
    display:block;
    visibility:visible;
    width:37px;
    height:37px;
    margin-right:17px;
    margin-left:17px;
    background:none;
    border:10px inset #FF00FF;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    }
    .acn-title{
    width:100%;
    -webkit-border-radius:0px;
    border-radius:0px;
    position:relative;
    }
    .acn-border{
    display:none;
    }

/*---------------MENU------------------*/
    header{
    position:relative;
    }
    nav{
    position:absolute;
    right:0px;
    top:47px;
    width:100%;
    }
    .home a{
    background:#9966CC;
    color:#e0e0e0;
    -webkit-border-radius:0px;
    border-radius:0px;
    width:100%;
    }
    nav ul {
    -webkit-font-smoothing:antialiased;
    background:#222222;
    margin:0;
    padding:0;
    height:45px;
    }
    nav li {
    margin:0;
    padding:0;
    float:none!important;
    position:relative;
    text-align:right;
    background:#666666;
    }
    nav ul.main-menu li a{
    color:#fff;
    }
    nav a {
    background:none;
    display:block;
    font:normal 14px/50px Ubuntu;
    padding:0 25px;
    text-align:center;
    text-decoration: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    li a{
    color:#e0e0e0;
    background:none;
    }
    nav li:hover a {
    background:#000;
    color:#e0e0e0;
    }
    nav li ul {
    float:left;
    left:0;
    position:absolute;
    top:35px;
    visibility:hidden;
    z-index:1;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    nav li:hover ul {
    opacity:1;
    top:50px;
    visibility:visible;
    }
    nav li ul li {
    float:none;
    width:100%;
    }
    nav li ul a:hover {
    background:#666666;
    color:#fff;
    }
    ul.sub-menu{
    width:100%;
    min-width:0px;
    }
    ul.sub-menu li:hover{
    position:relative;
    background-color:#000;
    color:#fff;
    border:0px;
    border:none;
    }

}

</style>

任何帮助都会很棒！

【问题讨论】：

    标签： html css drop-down-menu animated


    【解决方案1】：

    DEMO

    html, body {
    margin:0;
}
.acn-menu {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.9);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    min-height: 74px;
    width: 100%;
}
.label_openclose {
    display: none;
}
.menu-tabs {
    height: 100%;
}
.menu-tabs .elem {
    box-sizing: border-box;
    padding: 0 20px;
    float: left;
    height: 100%;
    line-height: 70px;
    background-color: rgb(30, 30, 30);
    color: white;
}
@-webkit-keyframes spin {
    0% {
        transform: rotate(-180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(-180deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(-180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(-180deg);
    }
}
.menu-check:checked ~ .label_openclose {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.menu-check {
    display: none;
}
.menu-tabs .elem:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
/*@media screen and (max-width:55%)*/
 @media screen and (max-width:768px) {
    .label_openclose {
        -webkit-animation: spin 2s;
        animation: spin 2s;
        display: inline-block;
        transform: rotate(-180deg);
        transition-duration: 1s;
        margin: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border-top: 10px solid rgb(50, 50, 50);
        border-right: 10px solid rgb(100, 100, 100);
        border-bottom: 10px solid rgb(150, 150, 150);
        border-left: 10px solid rgb(200, 200, 200);
        background-color: transparent;
        cursor: pointer;
    }
    .label_openclose:hover {
        transform: rotate(180deg);
    }
    .menu-tabs .elem {
        transition: border 1s linear, height 1s;
        line-height: initial;
        float: initial;
        height: 0px;
        cursor: pointer;
        border-top: 0px solid #000;
        overflow: hidden;
    }
    .menu-tabs:hover .elem {
        height: 25px;
    }
    .menu-check:checked ~ .menu-tabs .elem {
        height: 25px;
        color: white;
        border-top: 2px solid rgba(255, 255, 255, 0.2);
    }
    .label_openclose:hover ~ .menu-tabs .elem {
        border-top: 2px solid rgba(255, 255, 255, 0.2);
        height: 25px;
    }
}
    <div class="acn-menu">
    <input type="checkbox" id="openclose" class="menu-check" />
    <label class="label_openclose" for="openclose"></label>
    <div class="menu-tabs">
        <div class="elem">test</div>
        <div class="elem">nav</div>
        <div class="elem">bar</div>
        <div class="elem">with</div>
        <div class="elem">transitions</div>
    </div>
</div>
<main>
    test content of main page
</main>

    动画菜单

    当浏览器调整大小小于 768 和 480 或 (55%) 时，会出现动画圆形菜单

    这是我用 css 中的媒体查询完成的：@media screen and (max-width:768px) 并设置了一个 animation:

    之后，在 hover () 时，动画圆形菜单再次运行。

    这是通过在 :hover 语句中的 transform: rotate(180deg); 完成的。

    当用户点击或触摸动画圆圈菜单时，动画圆圈菜单停止并出现下拉菜单，并在动画圆圈回滚并停止的同时将其下方的内容推入没有滚动条。

    点击是通过input type="checkbox" 元素完成的。这是一个特殊的 css 伪选择器:checked。这让我们可以更改:checked 的样式。我们所做的是将它与兄弟选择器结合起来 #input:checked ~ .sibling。现在我们可以在单击复选框时设置.sibling 的样式。除此之外，还为复选框添加了一个标签。 label for="#ID" 并用display:none; 隐藏实际的复选框

    使用transform: rotate(180deg); 完成回滚循环。

    浏览器支持应该没问题，但是我没有为所有变换和动画添加所有前缀。

    过渡和动画是 CSS3，所以 IE9 不支持它。
    应该在 IE10 及更高版本中工作。（可能缺少 -ms- 前缀）
    在 Chrome 40.0 中测试。

    【讨论】：

    • 随意发现我缺少的前缀。
    • 我仍然没有看到我想要的第一个。它会寻找第二个。
    • 当鼠标悬停时，圆圈变为动画并出现菜单，菜单将内容推送到其下方。谢谢回复我
    • 不错，但不向下推它下面的内容：p
    • 下面的固定元素不会被推送。
    【解决方案2】：

    DEMO

    请试试这个 CSS 和你的 html

    <style>
.input-acn-search{
border:1px solid #979797;
padding:7px 34px 7px 7px;
font-size:14px;
font-weight:400;
color:#111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:7px 0px 0px 10px;
}
.btn-search{
background:#006666;
color:#fff;
border:0px;
font-size:18px;
margin:0px 0px 0px -30px;
-webkit-border-radius:17px;
-moz-border-radius:17px;
border-radius:17px;
border:0px;
min-width:5%;
}
.input-acn-search:hover{
background:#fff;
border:1px solid #979797;
}
.input-acn-search placeholder{
color:#666666;
}
.acn-title{
margin:0px;
height:45px;
padding:0px 25px 0px 25px;
background:#FF9900;
line-height:normal;
vertical-align:middle;
display:table-cell!important;
}
.menu-container{
width:100%;
margin:0px;
height:45px;
padding:0px;
background:#222222;
line-height:normal;
vertical-align:middle;
display:table-cell!important;
}
.acn-title a,.acn-title a h1{
color:#FFFFFF;
font-size:19px;
font-weight:500;
font-style:normal;
font-size-adjust:inherit;
}
.acn-title a:hover,.acn-title a:hover h1{
color:#999;
}
#acn-border{
position:absolute;
width:20px;
height:20px;
border-top:17px solid transparent;
border-left:21px solid #FF9900;
border-bottom:17px solid transparent;
display:table-cell;
margin-top:7px;
margin-left:140px;
z-index:1;
}
ul,li,ul li{
list-style:none;
list-style-image:none;
background:none;
}
/*------menu-------*/
nav ul.main-menu li a{
color:#fff;
}
.home a{
background:#9966CC;
color:#e0e0e0;
-webkit-border-radius:0px 37px 37px 0px;
border-radius:0px 37px 37px 0px;
}
nav ul {
-webkit-font-smoothing:antialiased;
background:#222222;
margin:0;
padding:0;
height:45px;
}
nav li {
float:left;
margin:0;
padding:0;
position:relative;
min-width:110px;
}
nav a {
background:none;
display:block;
font:normal 14px/50px Ubuntu;
padding:0 25px;
text-align:center;
text-decoration: none;
}
li a{
color:#e0e0e0;
background:none;
}
nav li:hover a {
background:#000;
color:#e0e0e0;
}
nav li ul {
float:left;
left:0;
opacity:0.5;
position:absolute;
top:35px;
visibility:hidden;
z-index:1;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
nav li:hover ul {
opacity:1;
top:50px;
visibility:visible;
}
nav li ul li {
float:none;
width:100%;
}
nav li ul a:hover {
background:#666666;
color:#fff;
}
ul.sub-menu{
min-width:180px;
max-width:100%;
}
ul.sub-menu li:hover{
background-color:#000;
color:#fff;
border:0px;
border:none;
}

@media screen and (max-width:55%){/*bila screen maksimum 55% atau sama dengan #bingkai-mini*/}
@media screen and (max-width:768px) {

    .acn-menu{
    display:block;
    visibility:visible;
    width:26px;
    height:26px;
    margin-top:0px;
    margin-right:17px;
    margin-left:17px;
    background:none;
    border:10px inset #428BCA;
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    -webkit-border-radius:50%!important;
    -moz-border-radius:50%!important;
    -o-border-radius:50%!important;
    border-radius:50%!important;
    }
    .menu-container .acn-menu:hover{
    cursor:pointer;
    display:block;
    visibility:visible; 
    margin-right:17px;
    margin-left:17px;
    background:none;
    border:10px inset #FF00FF;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    }
    .acn-title{
    width:100%;
    -webkit-border-radius:0px;
    border-radius:0px;
    position:relative;
    }
    .acn-border{
    display:none;
    }
    .main-menu {
        max-height: 0px; 
        overflow:hidden;
        height: 250px;
        transition: max-height 1s;

    }
    .menu-container:hover .main-menu {
      max-height: 250px;
      overflow: visible; 
    }   
    #acn-border {
        margin-left: 50%;
    }
/*---------------MENU------------------*/
    header{
    position:relative;
    }
    nav{
    position:absolute;
    right:0px;
    top:47px;
    width:100%;
    }
    .home a{
    background:#9966CC;
    color:#e0e0e0;
    -webkit-border-radius:0px;
    border-radius:0px;
    width:100%;
    }
    nav ul {
    -webkit-font-smoothing:antialiased;
    background:#222222;
    margin:0;
    padding:0;
    height:45px;
    }
    nav li {
    margin:0;
    padding:0;
    float:none!important;
    position:relative;
    text-align:right;
    background:#666666;
    }
    nav ul.main-menu li a{
    color:#fff;
    }
    nav a {
    background:none;
    display:block;
    font:normal 14px/50px Ubuntu;
    padding:0 25px;
    text-align:center;
    text-decoration: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    li a{
    color:#e0e0e0;
    background:none;
    }
    nav li:hover a {
    background:#000;
    color:#e0e0e0;
    }
    nav li ul {
    float:left;
    left:0;
    position:absolute;
    top:35px;
    visibility:hidden;
    z-index:1;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    nav li:hover ul {
    opacity:1;
    top:50px;
    visibility:visible;
    }
    nav li ul li {
    float:none;
    width:100%;
    }
    nav li ul a:hover {
    background:#666666;
    color:#fff;
    }
    ul.sub-menu{
    width:100%;
    min-width:0px;
    }
    ul.sub-menu li:hover{
    position:relative;
    background-color:#000;
    color:#fff;
    border:0px;
    border:none;
    }

}

</style>

    【讨论】：

    【解决方案3】：

    没有必要不使用javascript，因为大多数人总是启用它，并且它具有很棒的功能。

    上面说我在这里找到了一个如何帮助你的例子：link

    在那里您可以找到两个选项，目标伪选择器和 CSS3 选择器技巧。

    希望对您有所帮助：3

    【讨论】：

      猜你喜欢
      • 2017-09-28
      • 1970-01-01
      • 2019-10-14
      • 2018-10-05
      • 1970-01-01
      • 2014-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode