动态添加菜单导航效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Rubik&display=swap"); body { height: 100vh; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Rubik', sans-serif; background-color: #486581; color: #102A43; } .multi-button { display: flex; box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.4); width: 450px; position: relative; background-color: #D9E2EC; border-radius: 5px; overflow: hidden; transition: width .4s, transform .8s; border: 2px solid #102A43; padding: 3px; } .multi-button span { position: absolute; opacity: 0; z-index: 0; height: 100%; background-color: #102A43; left: 0; top: 0; transition: .7s left, .7s right, .2s opacity; } button { background: transparent; font-size: 24px; padding: 20px; margin: 0; z-index: 1; text-transform: uppercase; font-weight: 800; cursor: pointer; width: 150px; transition: .2s all, .3s color; border-width: 0; } button:hover { color: #D9E2EC; width: 175px; } .options { display: flex; margin-top: 15px; } .options p { color: rgba(255, 255, 255, 0.4); font-size: 48px; cursor: pointer; margin: 0 10px; text-transform: uppercase; margin-top: 20px; } .options p:hover { color: rgba(255, 255, 255, 0.7); } </style> </head> <body translate="no"> <div class="multi-button"><button>Cut</button><button>Copy</button><button>Paste</button></div> <div class="options"> <p id="remove-button">Remove +</p> <p id="add-button">Add +</p> </div> <script> let extraButtons = [ 'Cut', 'Copy', 'Paste', 'Find', 'Select', 'Undo', 'Redo' ] window.onload = () => { let buttons = document.getElementsByTagName('button'); let menu = document.querySelector('.multi-button'); menu.innerHTML = '<span></span>' + menu.innerHTML; menu.style.width = '450px'; for (let i = 0; i < buttons.length; i++) { buttons[i].buttonIndex = i; addMouseOverEvent(buttons[i]); } menu.addEventListener('mouseout', e => { let buttonBG = document.querySelector('.multi-button .........完整代码请登录后点击上方下载按钮下载查看
网友评论0