css实现下拉菜单导航条效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现下拉菜单导航条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> html { height:100%; background-color:#f8f8f8; } body { overflow:hidden; height:100%; width:980px; margin:0 auto; background-color:#ffffff; font-family:'Roboto',sans-serif; color:#555555; } a { text-decoration:none; color:inherit; } * { box-sizing:border-box; } .menu { display:block; position:relative; cursor:pointer; } .menu-title { display:block; width:150px; height:40px; padding:12px 0 0; background:#9dc852; text-align:center; color:#ffffff; font-weight:bold; text-transform:uppercase; transition:0.3s background-color; } .menu-title:before { content:""; display:block; height:0; border-top:5px solid #9dc852; border-left:75px solid transparent; border-right:75px solid transparent; border-bottom:0 solid #dddddd; position:absolute; top:100%; left:0; z-index:101; transition:0.2s 0.2s border-top ease-out,0.3s border-top-color; } .menu-title:hover { background:#8db842; } .menu-title:hover:before { border-top-color:#8db842; } .menu:hover >.menu-title:before { border-top-width:0; transition:0.2s border-top-width ease-in,0.3s border-top-color; } .menu-title:after { content:""; display:block; height:0; border-left:75px solid transparent; border-right:75px solid transparent; border-bottom:0 solid #ebebeb; position:absolute; bottom:0; left:0; z-index:101; transition:0.2s border-bottom ease-in; } .menu:hover >.menu-title:after { border-bottom-width:5px; transition:0.2s 0.2s border-bottom-width ease-out; } .menu-title_2nd { background:#4e96b3; } .menu-title_2nd:hover { background:#3e86a3; } .menu-title_2nd:before { border-top-color:#4e96b3; } .menu-title_2nd:hover:before { border-top-color:#3e86a3; } .menu-title_3rd { background:#c97676; } .menu-title_3rd:hover { background:#b96666; } .menu-title_3rd:before { border-top-color:#c97676; } .menu-title_3rd:hover:before { border-top-color:#b96666; } .menu-title_4th { background:#dbab58; } .menu-title_4th:hover { background:#cb9b48; } .menu-title_4th:before { border-top-color:#dbab58; } .menu-title_4th:hover:before { border-top-color:#cb9b48; } .menu-dropdown { min-width:100%; padding:15px 0; position:absolute; background:#ebebeb; z-index:100; transition:0.5s padding,0.5s background; } .menu-dropdown:after { content:""; display:block; height:0; border-top:5px solid #ebebeb; border-left:75px solid transparent; border-right:75px so.........完整代码请登录后点击上方下载按钮下载查看
网友评论0