<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3实现不一样的下拉菜单</title> <!--Main css--> <style> /* * css3实现不一样的下拉菜单 css */ body { background: #F3F3F3; font-family: "Microsoft Yahei"; } body, p, ul { padding: 0; margin: 0; } .content { padding-top: 5%; color: #333; } .content > .select { width: 300px; height: 40px; position: relative; border: 1px solid #ccc; background: #fff; margin: 0 auto; border-radius: 3px; } .content > .select.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .content > .select.open > ul { border-bottom: 1px solid #ccc; max-height: 250px; -webkit-transition: max-height 0.3s ease-in; -moz-animation: max-height 0.3s ease-in; -o-animation: max-height 0.3s ease-in; transition: max-height 0.3s ease-in; } .content > .select.open > p:after { top: 18px; -webkit-transform: rotate(-225deg); -moz-transform: rotate(-225deg); -ms-transform: rotate(-225deg); -o-transform: rotate(-225deg); transform: rotate(-225deg); -webkit-transition: all 0.3s ease-in; -moz-animation: all 0.3s ease-in; -o-animation: all 0.3s ease-in; transition: all 0.3s ease-in; } .content > .select > p { padding: 0 15px; line-height: 40px; cursor: pointer; } .content > .select > p:after { content: ''; display: block; width: 10px; height: 10px; border-left: 1px solid #333; border-bottom: 1px solid #333; position: absolute; top: 13px; right: 18px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.3s ease-in; -moz-animation: all 0.3s ease-in; -o-animation: all 0.3s ease-in; transition: all 0.3s ease-in; } .content > .select > ul { list-style: none; width: 100%; position: absolute; top: 41px; left: -1px; background: #fff; border-left: 1px solid #ccc; border-right: 1px solid #ccc; max-height: 0; overflow-y: hidden; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -webkit-transition: max-height 0.3s ease-in; -moz-animation: max-height 0.3s ease-in; -o-animation: max-height 0.3s ease-in; transition: max-height 0.3s ease-in; } .content > .select > ul > li { padding: 0 15px; line-height: 40px; cursor: pointer; -webkit-transition: all .2s ease-in; -moz-animation: all .2s ease-in; -o-animation: all .2s ease-in; transition: all .2s ease-in; } .content > .select > ul > li:hover { background: rgba(72, 201, 176, 0.5); color: #fff; } .content > .select > ul > li.selected { background: #1ABC9C; color: #fff; } </style> <!--Main js--> <script src="js/jquery-2.1.1.min.js"></script> <script> $(function() { //点击选择框中的文字,添加open类,使用toggleClass() $('.select > p').on('click',function (e) { $('.select').toggleClass('open'); e.stopPropagation(); }); //选择下拉菜单中的选项,将其值传给p标签显示在选择框中,并收起下拉菜单 $('.select ul li').on('click',function(e){ var $this = $(this); $('.select > p').text($this.attr('data-value')); $this.addClass('selected').siblings().removeClass('selected');//被选中的添加selected类,相应的移除其兄弟节点的selected类 $('.select').removeClass('open'); e.stopPropagation(); }); //点击文档其他位置,相应的也收起下拉菜单。此方法会影响子集元素,所以要在上面两个方法中阻止冒泡 $(document).on('click', function () { $('.select').removeClass('open'); }); }) </script> </head> <body> <div class="content"> <div class="select"> <p>所有课程</p> <ul> <li data-value="所有课程" class="selected">所有课程</li> <li data-value="Java">Java</li> <li data-value="jQuery">jQuery</li> <li data-value="Javascript">Javascript</li> <li data-value="Php">Php</li> <li data-value="Oracle">Oracle</li> </ul> </div> </div> </body> </html>
css3实现不一样的下拉菜单框
猜你喜欢
转载自blog.csdn.net/u010359143/article/details/50339021
今日推荐
周排行