通过使用纯CSS制作动画下拉菜单就像Bootstrap一样 [英] Making Animated Dropdown Menu by Using Pure CSS Like Bootstrap does

查看：173
本文介绍了通过使用纯CSS制作动画下拉菜单就像Bootstrap一样的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用我自己的项目来构建一个样式表（CSS），作为bootstrap的功能。但是，我尝试仅使用 PURE CSS - 无javascript或jquery甚至是flash 来执行此操作。



现在，我在动画菜单下拉菜单时遇到了麻烦，因为在调整
的小尺寸时，移动版本看起来像。 我想要的是 strong>


第一，当浏览器调整大小小于768和480或（55％）时，出现圆形菜单
，动画和菜单被隐藏。之后，在悬停（< div class =acn-menu>< / div> ）时，动画圆菜单再次运行。当用户点击或触摸动画圈子菜单时，动画圈子菜单停止，并出现下拉菜单，并且在动画圈子回滚并停止的同时，在没有滚动条的情况下将低于
的内容推入其下面。



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

下面是我已经完成了一周以上的工作：（对不起，我的英文不好）：
我刚刚上传了这个网站的样本：



演示 下拉菜单 a>
$ b HTML ： 

 <报头GT; 
< 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>家庭及LT; / A>< /锂> 
< li>< a href =＃>商品< span span =fa fa-caret- 
 down>< / span> < / A> 
< ul class =sub-menu> 
< li>< a href =＃> Desain网站< / a>< / li> 
< li>< a href =＃> Desain / Edit CMS< / a>< / li> 
< li>< a href =＃>订单模板Blogspot< / a>< / li> 
< / ul> 
< / li> 
< li>< a class =dropdownhref =＃> Pembayaran< span 
 class =fa fa-caret-down>< / span> < / A> 
< ul class =sub-menu> 
< li>< a href =＃>通过转帐银行< / a>< / li> 
< li>< a href =＃> Via Pulsa< / a>< / li> 
< li>< a href =＃>通过Paypal< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>订单< / a>< / li> 
< li>< a href =＃>联络人< / a>< / li> 
< input type =textclass =input-acn-search
 placeholder =search .../>< button type =buttonclass =btn-search >&安培; 
 gt;< / button> 
< / ul> 
< / nav> 
 
< / div> 
< / header> 
 
 <！ - 这里的内容在小菜单中显示时被推入 - >

STYLESHEET： 

 <风格> 
 .input-acn-search {
 border：1px solid＃979797; 
 padding：7px 34px 7px 7px; 
 font-size：14px; 
 font-weight：400; 
颜色：＃111; 
 -webkit-border-radius：3px; 
 -moz-border-radius：3px; 
 border-radius：3px; 
 margin：7px 0px 0px 10px; 
} 
 .btn-search {
 background：＃006666; 
颜色：#fff; 
 border：0px; 
 font-size：18px; 
 margin：0px 0px 0px -30px; 
 -webkit-border-radius：17px; 
 -moz-border-radius：17px; 
 border-radius：17px; 
 border：0px; 
最小宽度：5％; 
} 
 .input-acn-search：hover {
 background：#fff; 
 border：1px solid＃979797; 
} 
 .input-acn-search占位符{
颜色：＃666666; 
} 
 .acn-title {
 margin：0px; 
 height：45px; 
 padding：0px 25px 0px 25px; 
背景：＃FF9900; 
 line-height：normal; 
 vertical-align：middle; 
 display：table-cell！important; 
} 
 .menu-container {
 width：100％; 
 margin：0px; 
 height：45px; 
 padding：0px; 
背景：＃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纯透明; 
 border-left：21px solid＃FF9900; 
 border-bottom：17px纯色透明; 
 display：table-cell; 
 margin-top：7px; 
 margin-left：140px; 
 z-index：1; 
} 
 ul，li，ul li {
 list-style：none; 
 list-style-image：none; 
背景：无; 
} 
 / * ------ menu ------- * / 
 nav ul.main-menu li a {
 color：#fff; 
} 
 .home a {
 background：＃9966CC; 
颜色：＃e0e0e0; 
 -webkit-border-radius：0px 37px 37px 0px; 
 border-radius：0px 37px 37px 0px; 
} 
 nav ul {
 -webkit-font-smoothing：antialiased; 
背景：＃222222; 
保证金：0; 
 padding：0; 
 height：45px; 
} 
 nav li {
 float：left; 
保证金：0; 
 padding：0; 
职位：亲属; 
 min-width：110px; 
} 
 nav a {
 background：none; 
 display：block; 
字体：普通14px / 50px Ubuntu; 
 padding：0 25px; 
 text-align：center; 
 text-decoration：none; 
} 
 li a {
 color：＃e0e0e0; 
背景：无; 
} 
 nav li：悬停{
背景：＃000; 
颜色：＃e0e0e0; 
} 
 nav li ul {
 float：left; 
剩下：0; 
不透明度：0.5; 
位置：绝对; 
 top：35px; 
可见性：隐藏; 
 z-index：1; 
 -webkit-transition：全部.5s缓解; 
 -moz-transition：全部.5s缓解; 
 -ms-transition：全部.5s缓解; 
 -o-transition：全部.5s缓解; 
过渡：全部.5s缓解; 
} 
 nav li：hover ul {
 opacity：1; 
 top：50px; 
可见性：可见; 
} 
 nav li ul li {
 float：none; 
宽度：100％; 
} 
 nav li ul a：hover {
 background：＃666666; 
颜色：#fff; 
} 
 ul.sub-menu {
 min-width：180px; 
最大宽度：100％; 
} 
 ul.sub-menu li：hover {
 background-color：＃000; 
颜色：#fff; 
 border：0px; 
 border：none; 
} 
 
 @media screen and（max-width：55％）{/ * bila screen maksimum 55％atau sama dengan＃bingkai-mini * /} 
 @media screen和（max-width：768px）和（max-width：480px）{
 
 .acn-menu {
 display：block; 
可见性：可见; 
 width：37px; 
 height：37px; 
 margin-top：0px; 
 margin-right：17px; 
 margin-left：17px; 
背景：无; 
 border：10px插图＃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; 
可见性：可见; 
 width：37px; 
 height：37px; 
 margin-right：17px; 
 margin-left：17px; 
背景：无; 
 border：10px inset＃FF00FF; 
 -webkit-transform：rotate（180deg）; 
 -moz-transform：rotate（180deg）; 
 -o-transform：rotate（180deg）; 
转换：旋转（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; 
职位：亲属; 
} 
 .acn-border {
 display：none; 
} 
 
 / * --------------- MENU ------------------ * / 
 header {
 position：relative; 
} 
 nav {
 position：absolute; 
 right：0px; 
 top：47px; 
宽度：100％; 
} 
 .home a {
 background：＃9966CC; 
颜色：＃e0e0e0; 
 -webkit-border-radius：0px; 
 border-radius：0px; 
宽度：100％; 
} 
 nav ul {
 -webkit-font-smoothing：antialiased; 
背景：＃222222; 
保证金：0; 
 padding：0; 
 height：45px; 
} 
 nav li {
 margin：0; 
 padding：0; 
 float：none！important; 
职位：亲属; 
 text-align：right; 
背景：＃666666; 
} 
 nav ul.main-menu li a {
 color：#fff; 
} 
 nav a {
 background：none; 
 display：block; 
字体：普通14px / 50px Ubuntu; 
 padding：0 25px; 
 text-align：center; 
 text-decoration：none; 
 -webkit-transition：全部.5s缓解; 
 -moz-transition：全部.5s缓解; 
 -ms-transition：全部.5s缓解; 
 -o-transition：全部.5s缓解; 
过渡：全部.5s缓解; 
} 
 li a {
 color：＃e0e0e0; 
背景：无; 
} 
 nav li：悬停{
背景：＃000; 
颜色：＃e0e0e0; 
} 
 nav li ul {
 float：left; 
剩下：0; 
位置：绝对; 
 top：35px; 
可见性：隐藏; 
 z-index：1; 
 -webkit-transition：全部.5s缓解; 
 -moz-transition：全部.5s缓解; 
 -ms-transition：全部.5s缓解; 
 -o-transition：全部.5s缓解; 
过渡：全部.5s缓解; 
} 
 nav li：hover ul {
 opacity：1; 
 top：50px; 
可见性：可见; 
} 
 nav li ul li {
 float：none; 
宽度：100％; 
} 
 nav li ul a：hover {
 background：＃666666; 
颜色：#fff; 
} 
 ul.sub-menu {
 width：100％; 
 min-width：0px; 
} 
 ul.sub-menu li：hover {
 position：relative; 
背景颜色：＃000; 
颜色：#fff; 
 border：0px; 
 border：none; 
} 
 
} 
 
< / style>

任何帮助都会很棒！

解决方案

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;向左飘浮;身高：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）; }} @关键帧自旋{0％{transform：rotate（-180deg）; } 50％{transform：rotate（180deg）; } 100％{transform：rotate（-180deg）; }}。menu-check：checked〜.label_openclose {-webkit-animation-play-state：paused;动画播放状态：已暂停;}。menu-check {display：none;}。menu-tabs .elem：hover {background-color：rgba（255,255,255,0.2）;} / * @ media screen and （最大宽度：55％）* / @media屏幕和（最大宽度：768px）{.label_openclose {-webkit-animation：spin 2s;动画：旋转2s;显示：inline-block;转换：旋转（-180deg）;过渡时间：1秒; margin：10px;宽度：30px; height：30px;边界半径：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;光标：指针; } .label_openclose：hover {transform：rotate（180deg）; } .menu-tabs .elem {transition：border 1s linear，height 1s; line-height：initial; float：initial; height：0px;光标：指针; border-top：0px solid＃000;溢出：隐藏; } .menu-tabs：hover .elem {height：25px; } .menu-check：checked〜.menu-tabs .elem {height：25px;白颜色; 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）;身高：25px; }

< div class =acn-menu > < input type =checkboxid =opencloseclass =menu-check/> < label class =label_openclosefor =openclose>< / label> < div class =menu-tabs> < div class =elem> test< / div> < div class =elem> nav< / div> < div class =elem>栏< / div> < div class =elem> with< / div> < div class =elem>转换< / div> < / DIV>< / DIV><主>主要页面的测试内容< / main>


$ b

h2>


当浏览器调整大小小于768和480或（55％）时，会出现动画圆圈菜单
< blockquote>

我已经在css中完成了媒体查询： @media screen和（max-width：768px）并设置一个动画：


之后，在hover（）再次运行。


这是通过转换完成的：rotate（180deg）; 在：hover 语句中。


当用户点击或触摸动画圆形菜单时，动画圆形菜单将停止，并出现下拉菜单，并将其下面的内容按下

点击操作是通过输入完成的type =checkbox元素。这是为特殊的css伪选择器：checked 。这让我们改变的风格：checked 。我们所做的是将它与兄弟选择器结合使用，以便
#input：checked〜.sibling 。现在我们可以在 .sibling 的样式中点击复选框。除此之外，该复选框还添加了一个标签。 label for =＃ID然后用 display：none;

使用 transform：rotate（180deg）; 完成回圈。

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

过渡和动画是CSS3，因此IE9不支持它。

应该在IE10及更高版本中工作（可能缺少-ms-前缀）

在Chrome 40.0中测试。


I'm working with my own project to build a stylesheet(CSS) as what bootstrap does. However, I try to use only PURE CSS - no javascript or jquery even flash to do that.

Now, I'm having trouble with the Animated Menu Dropdown when small resizing as what mobile version looks like.

What I want is:

First, When the browser resize less then 768 and 480 or (55%), the animated circle menu appears, animating and Menu is hidden. After that, on hover (<div class="acn-menu"></div>), the animated circle menu runs again. When user click or touch the animated circle menu, the animated circle menu stops and the dropdown menu appears and push the content below it with no scrollbar at the same time as the animated circle rolls back and stops.

Second, How to be compatible with all browsers (even, in IE).

Here's what I have done more than a week: (Sorry for my bad English): I have just uploaded the sample in this site below:

Demo 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-->

STYLESHEET:

<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>

Any helps will be great!

解决方案

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>

Animated menu

When the browser resize less then 768 and 480 or (55%), the animated circle menu appears

This i have done with a media query in css: @media screen and (max-width:768px) and setting an animation:

After that, on hover (), the animated circle menu runs again.

This is done with an transform: rotate(180deg); inside an :hover statement.

When user click or touch the animated circle menu, the animated circle menu stops and the dropdown menu appears and push the content below it with no scrollbar at the same time as the animated circle rolls back and stops.

The click is done with an input type="checkbox" element. This is for a special css pseudo selector :checked. This lets us change the style of an :checked. What we do is combine it with an sibling selector so #input:checked ~ .sibling. Now we can style .sibling while we click on the checkbox. In addition to this added a label for the checkbox. label for="#ID" And hide the actual checkbox with display:none;

Rolling back the circle is done with transform: rotate(180deg);.

Browser support should be ok but, I haven't added all the prefixes for all the transforms and animations.

Transition and animation is CSS3 so IE9 doesn't support it.
Should work in IE10 and above.(probably missing -ms- prefixes)
Tested in Chrome 40.0.

这篇关于通过使用纯CSS制作动画下拉菜单就像Bootstrap一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆