css实现淡入淡出多级菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现淡入淡出多级菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Karla'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> html, body { padding: 0px; margin: 0px; background: #222; font-family: 'Karla', sans-serif; width: 100vw; } body * { margin: 0; padding: 0; } /* HTML Nav Styles */ /* HTML Nav Styles */ /* HTML Nav Styles */ nav menuitem { position: relative; display: block; opacity: 0; cursor: pointer; } nav menuitem > menu { position: absolute; pointer-events: none; } nav > menu { display: -webkit-box; display: -ms-flexbox; display: flex; } nav > menu > menuitem { pointer-events: all; opacity: 1; } menu menuitem a { white-space: nowrap; display: block; } menuitem:hover > menu { pointer-events: initial; } menuitem:hover > menu > menuitem, menu:hover > menuitem { opacity: 1; } nav > menu > menuitem menuitem menu { -webkit-transform: translateX(100%); transform: translateX(100%); top: 0; right: 0; } /* User Styles Below Not Required */ /* User Styles Below Not Required */ /* User Styles Below Not Required */ nav { margin-top: 40px; margin-left: 40px; } nav a { background: #75F; color: #FFF; min-width: 190px; -webkit-transition: background 0.5s, color 0.5s, -webkit-transform 0.5s; transition: background 0.5s, color 0.5s, -webkit-transform 0.5s; transition: background 0.5s, color 0.5s, transform 0.5s; transition: background 0.5s, color 0.5s, transform 0.5s, -webkit-transform 0.5s; margin: 0px 6px 6px 0px; padding: 20px 40px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 3px; -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); position: relative; } nav a:hover:before { content: ''; top: 0; left: 0; position: absolute; background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; } nav > menu > menuitem > a + menu:after { content: ''; position: absolute; border: 10px solid transparent; border-top: 10px solid white; left: 12px; top: -40px; } nav menuitem > menu > menuitem > a + menu:after { content: ''; position: absolute; border: 10px solid transparent; border-left: 10px solid white; top: 20px; left: -180px; -webkit-transition: opacity 0.6, -webkit-transform 0s; transition: opacity .........完整代码请登录后点击上方下载按钮下载查看
网友评论0