本文介绍一个纯CSS实现的竖直滚动菜单,菜单样式简单大方,代码不多,可直接复制过去应用于各种网页UI设计上。
html代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Simple CSS for buttons."> <title>纯CSS实现的竖直滚动菜单</title> <style> .pure-menu { -webkit-box-sizing: border-box; box-sizing: border-box; } .pure-menu-fixed { position: fixed; left: 0; top: 0; z-index: 3; } .pure-menu-item,.pure-menu-list { position: relative; } .pure-menu-list { list-style: none; margin: 0; padding: 0; } .pure-menu-item { padding: 0; margin: 0; height: 100%; } .pure-menu-heading,.pure-menu-link { display: block; text-decoration: none; white-space: nowrap; } .pure-menu-horizontal { width: 100%; white-space: nowrap; } .pure-menu-horizontal .pure-menu-list { display: inline-block; } .pure-menu-horizontal .pure-menu-heading,.pure-menu-horizontal .pure-menu-item,.pure-menu-horizontal .pure-menu-separator { display: inline-block; zoom: 1; vertical-align: middle; } .pure-menu-item .pure-menu-item { display: block; } .pure-menu-children { display: none; position: absolute; left: 100%; top: 0; margin: 0; padding: 0; z-index: 3; } .pure-menu-horizontal .pure-menu-children { left: 0; top: auto; width: inherit; } .pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children { display: block; position: absolute; } .pure-menu-has-children>.pure-menu-link:after { padding-left: .5em; content: "\25B8"; font-size: small; } .pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after { content: "\25BE"; } .pure-menu-scrollable { overflow-y: scroll; overflow-x: hidden; } .pure-menu-scrollable .pure-menu-list { display: block; } .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { display: inline-block; } .pure-menu-horizontal.pure-menu-scrollable { white-space: nowrap; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .5em 0; } .pure-menu-horizontal .pure-menu-children .pure-menu-separator,.pure-menu-separator { background-color: #ccc; height: 1px; margin: .3em 0; } .pure-menu-horizontal .pure-menu-separator { width: 1px; height: 1.3em; margin: 0 .3em; } .pure-menu-horizontal .pure-menu-children .pure-menu-separator { display: block; width: auto; } .pure-menu-heading { text-transform: uppercase; color: #565d64; } .pure-menu-link { color: #777; } .pure-menu-children { background-color: #fff; } .pure-menu-disabled,.pure-menu-heading,.pure-menu-link { padding: .5em 1em; } .pure-menu-disabled { opacity: .5; } .pure-menu-disabled .pure-menu-link:hover { background-color: transparent; } .pure-menu-active>.pure-menu-link,.pure-menu-link:focus,.pure-menu-link:hover { background-color: #eee; } .pure-menu-selected>.pure-menu-link,.pure-menu-selected>.pure-menu-link:visited { color: #000; } .pure-menu-scrollable { overflow-y: scroll; overflow-x: hidden; } .pure-menu-scrollable .pure-menu-list { display: block; } .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { display: inline-block; } .pure-menu-horizontal.pure-menu-scrollable { white-space: nowrap; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .5em 0; } .pure-menu-heading,.pure-menu-link { display: block; text-decoration: none; white-space: nowrap; } .pure-menu-has-children>.pure-menu-link:after { padding-left: .5em; content: "\25B8"; font-size: small; } .pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after { content: "\25BE"; } .pure-menu-link { color: #777; } .pure-menu-children { background-color: #fff; } .pure-menu-disabled,.pure-menu-heading,.pure-menu-link { padding: .5em 1em; } .pure-menu-disabled { opacity: .5; } .pure-menu-disabled .pure-menu-link:hover { background-color: transparent; } .pure-menu-active>.pure-menu-link,.pure-menu-link:focus,.pure-menu-link:hover { background-color: #eee; } .pure-menu-selected>.pure-menu-link,.pure-menu-selected>.pure-menu-link:visited { color: #000; } .pure-menu-heading,.pure-menu-link { display: block; text-decoration: none; white-space: nowrap; } .pure-menu-heading,.pure-menu-horizontal .pure-menu-item,.pure-menu-horizontal .pure-menu-separator { display: inline-block; zoom: 1; vertical-align: middle; } .pure-menu-heading { text-transform: uppercase; color: #565d64; } .pure-menu-disabled,.pure-menu-heading,.pure-menu-link { padding: .5em 1em; } .pure-menu-item,.pure-menu-list { position: relative; } .pure-menu-list { list-style: none; margin: 0; padding: 0; } .pure-menu-horizontal .pure-menu-list { display: inline-block; } .pure-menu-scrollable .pure-menu-list { display: block; } .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { display: inline-block; } .pure-menu-item,.pure-menu-list { position: relative; } .pure-menu-item { padding: 0; margin: 0; height: 100%; } .pure-menu-horizontal .pure-menu-heading,.pure-menu-horizontal .pure-menu-item,.pure-menu-horizontal .pure-menu-separator { display: inline-block; zoom: 1; vertical-align: middle; } .pure-menu-item .pure-menu-item { display: block; } .pure-menu-heading,.pure-menu-link { display: block; text-decoration: none; white-space: nowrap; } .pure-menu-has-children>.pure-menu-link:after { padding-left: .5em; content: "\25B8"; font-size: small; } .pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after { content: "\25BE"; } .pure-menu-link { color: #777; } .pure-menu-disabled,.pure-menu-heading,.pure-menu-link { padding: .5em 1em; } .pure-menu-disabled { opacity: .5; } .pure-menu-disabled .pure-menu-link:hover { background-color: transparent; } .pure-menu-active>.pure-menu-link,.pure-menu-link:focus,.pure-menu-link:hover { background-color: #eee; } .pure-menu-selected>.pure-menu-link,.pure-menu-selected>.pure-menu-link:visited { color: #000; } </style> </head> <body> <style> /* 定义菜单高度、宽度和边框样式 */ .custom-restricted { height: 250px; width: 150px; border: 1px solid gray; border-radius: 4px; } </style> <div class="pure-menu pure-menu-scrollable custom-restricted"> <a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a> <ul class="pure-menu-list"> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Beauty</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Movies</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Small Business</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Cricket</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tech</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">World</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li> <li class="pure-menu-item"><a href="#" class="pure-menu-link">Support</a></li> </ul> </div> </body> </html>
可轻松修改代码,改变滚动菜单边框样式、宽度和高度。
<style> /* 定义菜单高度、宽度和边框样式 */ .custom-restricted { height: 250px; width: 150px; border: 1px solid gray; border-radius: 4px; } </style>