Dark MenuC CSS3圆角按钮式两级菜单

 首页 > 网页特效 > 菜单特效 > Dark MenuC CSS3圆角按钮式两级菜单

Dark MenuC CSS3圆角按钮式两级菜单

 2018-07-02  446  收藏  0 赞一个  0 真差劲  0 去评论

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3实现的暗黑色两级下拉菜单效果</title>
<style type="text/css">
 body{background: #362f2d;height: 100%;padding: 0;margin: 0;}.ad{text-align: center;position: absolute;top:20px;margin:0 auto;width:100%;}.footer{color: #6c5e5b;font-family: Arial;font-size: 12px;text-shadow: 0 1px 0 #000;text-align: center;position:absolute;bottom:20px;margin:0 auto;width:100%;}.footer a{color: #6c5e5b;}.container{margin: 0 auto;width: 410px;text-align: center;}.container h1{font-family: Arial;font-size: 48px;text-align: center;text-transform: uppercase;color: #282321;margin: 100px 0 100px 0;text-shadow: 0 1px 0 #6c5e5b, 0 -1px 0 rgba(0,0,0,0.6);filter: dropshadow(color=#6c5e5b, offx=0, offy=1);}
ul.dark_menu{list-style: none; padding: 0; font-family: Arial; font-size: 14px; line-height: 14px;}
ul.dark_menu:after{content: ""; clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}
ul.dark_menu li{float: left; margin: 0 0 0 10px; position: relative;}
ul.dark_menu li:first-child{margin: 0;}
ul.dark_menu li a, ul.dark_menu li a:link{color: #161312; text-decoration: none; display: block; padding: 10px 26px;
text-shadow: 0 1px 0 #4b433e;
background: #362f2c; /* Old browsers */ background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #362f2c 0%,#282321 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #362f2c 0%,#282321 100%); /* W3C */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 #564b46, 0 1px 1px #181514; -moz-box-shadow: inset 0 1px 0 #564b46, 0 1px 1px #181514; box-shadow: inset 0 1px 0 #564b46, 0 1px 1px #181514; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;} ul.dark_menu li a:hover{color: #73635e; text-shadow: 0 1px 1px #000; background: #282321; /* Old browsers */ background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* W3C */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;} ul.dark_menu li a.selected, ul.dark_menu li a:active{color: #73635e; background: #282321; text-shadow: 0 1px 1px #000; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 #5e524f; -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 #5e524f; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 #5e524f; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;} ul.dark_menu li ul{display: none;} ul.dark_menu li ul:before{content: " "; position: absolute; display: block; z-index: 1500; left: 0; top: -10px; height: 10px; width: 100%;} ul.dark_menu li:hover ul{position: absolute; display: block; z-index: 1000; left: 0; top: 44px; padding: 5px 0; list-style: none; background: #282321; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 #5e524f; -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 #5e524f; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 #5e524f; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} ul.dark_menu li ul li{float: none; margin: 0 10px; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230;} ul.dark_menu li ul li:first-child{margin: 0 10px; border-top: 0 none;} ul.dark_menu li ul li:last-child{border-bottom: 0 none;} ul.dark_menu li ul li a, ul.dark_menu li ul li a:link{color: #73635e; display: block; background: transparent none; padding: 10px 20px 10px 5px; white-space: nowrap; text-shadow: 0 1px 2px #000; -webkit-box-shadow: 0 0 0 rgba(0,0,0,0); -moz-box-shadow: 0 0 0 rgba(0,0,0,0); box-shadow: 0 0 0 rgba(0,0,0,0); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;} ul.dark_menu li ul li a:hover{text-decoration: underline; background: #2a2523;}
</style>
</head>
<body>
    <div class="container">
        <h1>Dark Menu</h1>
        <!-- Dark Menu Begin -->
        <ul class="dark_menu">
            <li><a href="#" class="selected">主页</a></li>
            <li>
                <a href="#">Portfolio</a>
                <!-- Sub Menu Begin -->
                <ul>
                    <li><a href="#">平板电脑</a></li>
                    <li><a href="#">Donec lorem</a></li>
                    <li><a href="#">安卓手机</a></li>
                    <li><a href="#">XBOX</a></li>
                </ul>
                <!-- Sub Menu End -->
            </li>
            <li>
                <a href="#">博客</a>
                <!-- Sub Menu Begin -->
                <ul>
                    <li><a href="#">个人作品</a></li>
                    <li><a href="#">Donec lorem</a></li>
                    <li><a href="#">我的博文</a></li>
                </ul>
                <!-- Sub Menu End -->
            </li>
            <li><a href="#">联系</a></li>
        </ul>
        <!-- Dark Menu End -->
    </div>

	<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

Dark Menu，一款基于CSS3技术的黑色立体风格圆角菜单，各个菜单项像是一个按钮一样，而且学有文字淡入淡出和二级菜单渐变特效，通过阴影的控制，实现立体质感。因为CSS3不兼容IE8，所以在测试时候请避开使用IE8，尽可能使用火狐或Chrome浏览器。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行