为网站添加动态按钮导航 这种动态按钮是不 - Assbbs
为网站添加动态按钮导航 这种动态按钮是不是很?？ 下面就是制作过程。 给你的导航加入 <nav id="nav" role="navigation"> <ul class="bar">标签 然后给每个链接加上 <li class="current"> 然后给你的css中加入 / 导航 / nav> ul{list-s…
为网站添加动态按钮导航 这种动态按钮是不是很?？ 下面就是制作过程。 给你的导航加入 <nav id="nav" role="navigation"> <ul class="bar">标签 然后给每个链接加上 <li class="current"> 然后给你的css中加入 / 导航 / nav> ul{list-style-type:none;width:100%;float:left;line-height:43px;height:43px;} nav> ul> li{float:left;text-align:center;line-height:23px;margin:6px 2px 0 0;height:23px;position:relative;} nav> ul> li.current a{color: ffffff;background-color: cc0000;padding: 1px 10px;background-size: 13px 15px;background-image:linear-gradient to top left, transparent, transparent 25%, rgba 255, 255, 255, 0.15 25%, rgba 255, 255, 255, 0.15 50%, transparent 50%, transparent 75%, rgba 255, 255, 255, 0.15 75%, rgba 255, 255, 255, 0.15 ;} nav> ul> li a{color: 404040;display:block;background: ffffff;padding:3px 20px;transition:0.2s;} nav> ul> li a:hover{color: ffffff;background-color: cc0000;padding:3px 20px;background-size:16px 16px;background-image:linear-gradient to top left, transparent, transparent 25%, rgba 255, 255, 255, 0.15 25%, rgba 255, 255, 255, 0.15 50%, transparent 50%, transparent 75%, rgba 255, 255, 255, 0.15 75%, rgba 255, 255, 255, 0.15 ;animation:progress .6s linear infinite; -webkit-animation:progress .6s linear infinite;} nav> ul> li a:active, nav> ul> li:active > a{color: ffffff;background-color: cc0000;transform:scale 0.95 ;-webkit-transform:scale 0.95 } nav .catbtn a{padding:3px 25px 3px 15px;} nav .catbtn a:hover{padding:3px 25px 3px 15px;} nav .catbtn:hover .catbtnx{color: ffffff;background-color: cc0000;background-size:16px 16px;background-image:linear-gradient to top left, transparent, transparent 25%, rgba 255, 255, 255, 0.15 25%, rgba 255, 255, 255, 0.15 50%, transparent 50%, transparent 75%, rgba 255, 255, 255, 0.15 75%, rgba 255, 255, 255, 0.15 ;padding:3px 25px 3px 15px;} nav li ul{z-index:10;background: ffffff;display:none;position:absolute;left:0px;top:29px;width:120px;text-align:left;border:1px solid dddddd;border-top:2px solid ff4500;} nav li ul li{border-bottom:1px solid dddddd;} nav li ul li:last-child{border:none;} nav li ul a{line-height:28px;height:28px;background: ffffff;color: 777777;} nav li ul a:hover{background: f6f6f6;color: 303030;} nav li ul a:hover .catbtn{color: 404040;background-color: cc0000;padding:5px 25px;} nav li a .arrow{position:absolute;top:50%;right:14px;margin-top:1px;border-color: 404040 transparent;border-style:solid;border-width:4px 4px 0 4px;width:0;height:0;display:inline-block;} nav li:hover .arrow{position:absolute;top:50%;right:14px;border-color: ffffff transparent;border-style:solid;border-width:0 4px 4px 4px;width:0;height:0;display:inline-block;} 当然，我弄的不一定符合你喜欢的风格，你也可以在我的基础上继续DIY