HTML5一款可定制菜单个数的径向菜单模板

Radial / Circular Menu

html5, menu, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3735
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//
//  BASIC SETUP
//–––––––––––––––––––––––––––––––––––––

var container = document.querySelector('.radial-menu');

var menuDimensions = container.offsetWidth;

var menuItems = container.querySelectorAll('.radial-menu__menu-item');

var menuItemsCount = countMenuItems(menuItems);

//
//  COUNT MENU ITEMS
//–––––––––––––––––––––––––––––––––––––

function countMenuItems(elems) {

// Count elems.
    var elemsCount = elems.length;

// Initialise empty counter.
    var elemCounter = 0;

for (var i = 0; i < elemsCount; i++) {

var elem = elems[i];

// Get elements current "display" value.
        var elemDisplay = elem.currentStyle ? elem.currentStyle.display : getComputedStyle(elem, null).display;

// If the elem is not hidden.
        if (elemDisplay !== 'none') {

// Increment the elem counter.
            elemCounter++;
        }
    }

return elemCounter;
}

//
//  LINKS
//–––––––––––––––––––––––––––––––––––––

var links = document.querySelectorAll('.radial-menu__menu-link');

setupLinks(links);
setupLinkHovers(links);

//
//  LINK BGs
//–––––––––––––––––––––––––––––––––––––

var linkBGs = document.querySelectorAll('.radial-menu__menu-link-bg');

setupLinks(linkBGs);

//
//  SETUP LINKS
//–––––––––––––––––––––––––––––––––––––

function setupLinks(elems) {

// Count elems.
    var elemsCount = elems.length;
    // var elemsCount = countMenuItems( menuItems );

var menuItems = container.querySelectorAll('.radial-menu__menu-item');

// Count menu items.
    var menuItemsCount = countMenuItems(menuItems);

// Find degree interval.
    var degreeInterval = 360 / menuItemsCount;

// Loop through elems.
    for (var i = 0; i < elemsCount; i++) {

var elem = elems[i];

var parentMenuItem = elem.parentElement;

// Get parent menu item's current "display" value.
        var parentMenuItemDisplay = parentMenuItem.currentStyle ? parentMenuItem.currentStyle.display : getComputedStyle(parentMenuItem, null).display;

if (parentMenuItemDisplay !== 'none') {
            var phase = i / menuItemsCount;
            // console.log('phase(' + i + '): ' + phase);

var theta = phase * 2 * Math.PI;
            // console.log('theta(' + i + '): ' + theta);

var cssTransform = 'translateY(-50%) translateZ(0) rotateZ(' + degreeInterval * i + 'deg) perspective(' + menuDimensions / 1.5 + 'px)';

var transformString = getLinkTransforms(menuItemsCount);

// cssTransform += 'rotateY(-83.8deg) scaleX(1.38)';
            cssTransform += transformString;

// console.log(cssTransform);

elem.style.transform = cssTransform;
        }
    }
}

//
//  ON LINK HOVER
//–––––––––––––––––––––––––––––––––––––

function setupLinkHovers(elems) {

// Count elems.
    var elemsCount = elems.length;

// Loop through elems.
    for (var i = 0; i < elemsCount; i++) {

var elem = elems[i];
        var parentMenuItem = elem.parentElement;

// Get parent menu item's current "display" value.
        var parentMenuItemDisplay = elem.currentStyle ? elem.currentStyle.display : getComputedStyle(elem, null).display;

// If the menu item's display is not set to none.'
        if (parentMenuItemDisplay !== 'none') {
            elem.addEventListener('mouseenter', function(event) {
                var parentMenuItem = this.parentElement;
                parentMenuItem.classList.add('hovered');
                container.classList.add('item-is-hovered');
            });

elem.addEventListener('mouseleave', function(event) {
                var parentMenuItem = this.parentElement;
                parentMenuItem.classList.remove('hovered');
                container.classList.remove('item-is-hovered');
            });
        }
    }
}

//
//  GET LINK TRANSFORMS
//–––––––––––––––––––––––––––––––––––––

function getLinkTransforms(count) {

var transformString;

switch (count) {
        case 3:
            transformString = 'rotateY(-88.012deg) scaleX(1.45)';
            break;

case 4:
            transformString = 'rotateY(-86.45deg) scaleX(1.425)';
            break;

case 5:
            transformString = 'rotateY(-85.025deg) scaleX(1.39)';
            break;

case 6:
            transformString = 'rotateY(-83.65deg) scaleX(1.36)';
            break;

case 7:
            transformString = 'rotateY(-82.1deg) scaleX(1.325)';
            break;

case 8:
            transformString = 'rotateY(-80.8deg) scaleX(1.3)';
            break;

case 9:
            transformString = 'rotateY(-79deg) scaleX(1.265)';
            break;

case 10:
            transformString = 'rotateY(-77.3deg) scaleX(1.23)';
            break;

case 11:
            transformString = 'rotateY(-76deg) scaleX(1.21)';
            break;

case 12:
            transformString = 'rotateY(-74.75deg) scaleX(1.185)';
            break;

case 13:
            transformString = 'rotateY(-72.1deg) scaleX(1.14)';
            break;

case 14:
            transformString = 'rotateY(-69.8deg) scaleX(1.11)';
            break;

case 15:
            transformString = 'rotateY(-67.7deg) scaleX(1.086)';
            break;
    }

return transformString;
}

//
//  ICONS
//–––––––––––––––––––––––––––––––––––––

var icons = document.querySelectorAll('.radial-menu__menu-icon');
var iconDistance = 95;

positionIcons(icons, iconDistance);

function positionIcons(icons, iconDistance) {

var menuItems = container.querySelectorAll('.radial-menu__menu-item');

// Count menu items.
    var menuItemsCount = countMenuItems(menuItems);

// Count icons.
    var iconsCount = icons.length;
    var iconOffset = 1.575; // Used to rotate 90deg.

// Loop through icons.
    for (var i = 0; i < iconsCount; i++) {
        var icon = icons[i];

var parentMenuItem = icon.parentElement;

// If the menu item's display is not set to none.'
        if (parentMenuItemDisplay !== 'none') {

var phase = i / menuItemsCount;
            // console.log('phase(' + i + '): ' + phase);

var theta = phase * 2 * Math.PI;
            theta = theta + iconOffset;
            // console.log('theta(' + i + '): ' + theta);

icon.style.top = (-iconDistance * Math.cos(theta)).toFixed(1) + 'px';
            icon.style.left = (iconDistance * Math.sin(theta)).toFixed(1) + 'px';
        }
    }
}

//
//  RIGHT CLICK
//–––––––––––––––––––––––––––––––––––––

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    var mousePosX = e.clientX;
    var mousePosY = e.clientY;
    // console.log( 'mousePosX: ' + mousePosX );
    // console.log( 'mousePosY: ' + mousePosY );

container.classList.remove('is-hidden');
    container.classList.add('is-active');

container.style.top = mousePosY + 'px';
    container.style.left = mousePosX + 'px';

mouseMoveListener(mousePosX, mousePosY);

return false;
}, false);

//
//  RIGHT CLICK MOUSE UP
//–––––––––––––––––––––––––––––––––––––

document.addEventListener('mouseup', function(e) {

var mouseButton = e.button;

// If it's the right mouse button.
    if (mouseButton == 2) {

// Hide the menu.
        container.classList.add('is-hidden');
        container.classList.remove('is-active');
    }
});

//
//  MOUSE MOVE LISTENER
//–––––––––––––––––––––––––––––––––––––

function mouseMoveListener(x, y) {
    document.addEventListener('mousemove', function(e) {

// If the radial menu is active.
        if (container.classList.contains('is-active')) {

var newX = e.clientX;
            var newY = e.clientY;

var scale = Math.round(Math.sqrt(Math.pow(y - newY, 2) + Math.pow(x - newX, 2)));

// console.log('scale: ' + scale);

scale = scale * 0.01;
            // console.log('scale / 100: ' + scale);

// container.style.transform = 'translate(-50%, -50%) scale(' + scale  + ')';
            // console.log('e.clientX: ' + e.clientX);
            // console.log('e.clientY: ' + e.clientY);
        }
    });
}

//
//  MENU ITEMS DROPDOWN
//–––––––––––––––––––––––––––––––––––––

onMenuItemsDropdownChange();

function onMenuItemsDropdownChange() {

// Instantiate the menu items to show select.
    var menuItemsSelect = document.getElementById('menu-items-to-show');

// Listen for changes on the select.
    menuItemsSelect.addEventListener('change', function(e) {

// Get the selected value.
        var optionValue = this.value;

// Update menu items accordingly.
        updateMenuItemDisplayValues(optionValue);
    });
}

//
//  UPDATE MENU ITEMS
//–––––––––––––––––––––––––––––––––––––

function updateMenuItemDisplayValues(itemsToShow) {

var menuItems = container.querySelectorAll('.radial-menu__menu-item');

for (var i = 0; i < menuItems.length; i++) {
        if (i < itemsToShow) {
            menuItems[i].style.display = 'block';
        } else {
            menuItems[i].style.display = 'none';
        }
    }

// Set up links.
    var links = document.querySelectorAll('.radial-menu__menu-link');
    setupLinks(links);
    setupLinkHovers(links);

// Set up link BGs.
    var linkBGs = document.querySelectorAll('.radial-menu__menu-link-bg');
    setupLinks(linkBGs);

// Set up icons.
    var icons = document.querySelectorAll('.radial-menu__menu-icon');
    var iconDistance = 95;

positionIcons(icons, iconDistance);
}

编译

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
}
html,
body {
    font-family: sans-serif;
    height: 100%;
    width: 100%;
}
.radial-menu {
    background: #c1ced9;
    border: 0 solid transparent;
    border-radius: 50%;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.05);
    height: 300px;
    left: 50%;
    opacity: 1;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    -webkit-transition: opacity .1s ease, background .1s ease;
    transition: opacity .1s ease, background .1s ease;
    width: 300px;
}
.radial-menu.is-hidden {
    -webkit-animation-name: scale-down;
    animation-name: scale-down;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.25, 0.25, 1.25);
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.25, 1.25);
    -webkit-transform: translate(-50%, -50%) scale(0) !important;
    transform: translate(-50%, -50%) scale(0) !important;
    opacity: 0;
}
.radial-menu.is-active {
    -webkit-animation-name: scale-up;
    animation-name: scale-up;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    /* this prevents the animation from restarting! */
    
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.25, 0.25, 1.25);
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.25, 1.25);
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}
.radial-menu.item-is-hovered {
    background-color: #6d9bc5;
    border-color: transparent;
    border-width: 0;
}
@-webkit-keyframes scale-up {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        -webkit-transform: translateX(-50%, -50%) scale(1);
        transform: translateX(-50%, -50%) scale(1);
    }
}
@keyframes scale-up {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        -webkit-transform: translateX(-50%, -50%) scale(1);
        transform: translateX(-50%, -50%) scale(1);
    }
}
@-webkit-keyframes scale-down {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        -webkit-transform: translateX(-50%, -50%) scale(0);
        transform: translateX(-50%, -50%) scale(0);
    }
}
@keyframes scale-down {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        -webkit-transform: translateX(-50%, -50%) scale(0);
        transform: translateX(-50%, -50%) scale(0);
    }
}
.radial-menu__label {
    background-color: #e7ecf1;
    border: 3px solid #ced8e1;
    border-radius: 50%;
    color: #c1ced9;
    cursor: default;
    font-size: 12px;
    font-weight: bold;
    height: 80px;
    left: 50%;
    letter-spacing: .1em;
    line-height: 74px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80px;
    z-index: 4;
}
.radial-menu__menu-content {
    background-color: #e7ecf1;
    border: 3px solid #ced8e1;
    border-radius: 50%;
    height: 80px;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80px;
    z-index: 1;
}
.radial-menu__menu-item.hovered .radial-menu__menu-content {
    background-color: #578cbc;
    border-color: #578cbc;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 4;
}
.radial-menu__menu-content-wrapper {
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}
.radial-menu__menu-content-title {
    color: #fff;
    font-size: 0.7em;
    font-weight: bold;
    line-height: 1.3;
}
.radial-menu__menu-content-description {
    color: rgba(255, 255, 255, 0.5);
    display: none;
    font-size: 0.4em;
    font-weight: normal;
    letter-spacing: .1em;
    line-height: 1.3;
    text-transform: uppercase;
}
.radial-menu__menu-icon {
    background-color: transparent;
    height: 25px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    width: 25px;
    z-index: 2;
}
.radial-menu__menu-icon .oi {
    color: #8ea6bb;
    font-size: 16px;
    line-height: 25px;
    -webkit-transition: font-size 0.3s cubic-bezier(0.25, 0.25, 0.25, 1.5), color 0.1s ease;
    transition: font-size 0.3s cubic-bezier(0.25, 0.25, 0.25, 1.5), color 0.1s ease;
}
.radial-menu.item-is-hovered .radial-menu__menu-icon {
    background-color: transparent;
}
.radial-menu.item-is-hovered .radial-menu__menu-icon .oi {
    color: #a8baca;
}
.radial-menu.item-is-hovered .radial-menu__menu-item.hovered .radial-menu__menu-icon {
    background-color: transparent;
    height: 50px;
    width: 50px;
}
.radial-menu.item-is-hovered .radial-menu__menu-item.hovered .radial-menu__menu-icon .oi {
    color: #fff;
    font-size: 21px;
    line-height: 50px;
}
.radial-menu__menu-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.radial-menu__menu-item {
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: 1;
}
.radial-menu__menu-item.hovered {
    z-index: 10;
}
.radial-menu__menu-link,
.radial-menu__menu-link-bg {
    height: 22px;
    padding: 5px 20px;
    position: absolute;
    -webkit-transform: translateY(-50%) perspective(200px) rotateY(-77.5deg) scaleX(1.25);
    transform: translateY(-50%) perspective(200px) rotateY(-77.5deg) scaleX(1.25);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 125px;
}
.radial-menu__menu-link {
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    display: block;
    z-index: 3;
}
.radial-menu__menu-link-bg {
    background-color: #dae2e9;
    border-bottom: 1px solid #d4dde5;
    border-top: 1px solid #d4dde5;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: background .1s ease;
    transition: background .1s ease;
    z-index: 1;
}
.radial-menu__menu-link-bg:after {
    background: #c1ced9;
    content: '';
    display: none;
    height: 106%;
    right: -1px;
    position: absolute;
    top: 0;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    -webkit-transform: translateY(-3%);
    transform: translateY(-3%);
    width: 2px;
}
.radial-menu__menu-item.hovered .radial-menu__menu-link-bg {
    background-color: #6d9bc5;
    border: 0;
}
.radial-menu__menu-item.hovered .radial-menu__menu-link-bg:after {
    background: #6d9bc5;
    height: 106%;
    -webkit-transform: translateY(-3%);
    transform: translateY(-3%);
    width: 0;
}
.menu-items-select {
    bottom: 0;
    right: 0;
    margin: 0 auto;
    padding: 40px;
    position: absolute;
}
.menu-items-select__label {
    color: #c1ced9;
    display: block;
    font-size: .7em;
    font-weight: bold;
    letter-spacing: .05em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.menu-items-select__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #e7ecf1;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYmU2ZGJmMC0zMWRkLTQyN2EtYjIyYi02YjExMGU5ZDVmODciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REM2MzE0REVCNjkzMTFFNkIxODVBOTBFNDM1NDFDOEUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REM2MzE0RERCNjkzMTFFNkIxODVBOTBFNDM1NDFDOEUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmI4YTU2Zjg5LTM0MzAtNDcxNS1iOGQyLWQ5NWM4NzdmYmIyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpjYmU2ZGJmMC0zMWRkLTQyN2EtYjIyYi02YjExMGU5ZDVmODciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4RdGokAAAAf0lEQVR42mL8//8/AzUBEwOVwaiBlAMWbIKMjIxEG4CeSujq5fkgB+DBC3E6GR1DARcQX8Zh2HUg5samH5+BIKABxF/QDPsKxLq4HETIQBCIQTMwFZ8PiTEQBGZBDVtKKMiINZATiFcCMS8hAxmxGUBJOmQhRtFo4UBfAwECDADAD7B6p+ae7AAAAABJRU5ErkJggg==");
    background-position: 97.5% 50%;
    background-repeat: no-repeat;
    border: 2px solid #d4dde5;
    border-radius: 0;
    display: block;
    font-family: sans-serif;
    font-size: .9em;
    font-weight: bold;
    height: 40px;
    padding: 5px 10px;
    width: 100px;
}
.right-click-prompt {
    bottom: 0;
    color: #c1ced9;
    font-size: .7em;
    font-weight: bold;
    left: 50%;
    letter-spacing: .05em;
    padding: 40px;
    position: absolute;
    text-transform: uppercase;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
@media (max-height: 430px) {
    .right-click-prompt {
        left: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

HTML

<li class="radial-menu__menu-item">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="italic" title="Italic" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Italic
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Make text italic
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="underline" title="Underline" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Underline
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Underline text
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="align-left" title="Align left" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Text Alignment
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Set text alignment
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="list-rich" title="Bulleted List" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Bulleted List
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Add a bulleted list
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="list" title="Numbered List" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Numbered List
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Add a numbered list
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="header" title="Heading" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Heading
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Add a heading
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="double-quote-serif-right" title="Blockquote" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Blockquote
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Add a blockquote
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="link-intact" title="Hyperlink" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Hyperlink
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Add a link to something
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="image" title="Image" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Image
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Add an image
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item" style="display: none;">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="paperclip" title="Attach File" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Attach File
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Attach a file
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item" style="display: none;">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="eyedropper" title="Font Color" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Font Color
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Set font color
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item" style="display: none;">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="droplet" title="Highlight Color" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            Highlight Color
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Set font color
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>

<li class="radial-menu__menu-item" style="display: none;">
            <div class="radial-menu__menu-link-bg"></div>
            <div class="radial-menu__menu-icon">
                <span class="oi" data-glyph="ellipses" title="More" aria-hidden="true"></span>
            </div>
            <div class="radial-menu__menu-content">
                <div class="radial-menu__menu-content-wrapper">
                    <h6 class="radial-menu__menu-content-title">
            More
          </h6>
                    <p class="radial-menu__menu-content-description">
                        Add more things
                    </p>
                </div>
            </div>
            <a rel="nofollow" rel="noreferrer" href="javascript:void(0);" class="radial-menu__menu-link"></a>
        </li>
    </ul>
    <div class="radial-menu__label">
        Menu
    </div>
</div>

<div class="menu-items-select">
    <label class="menu-items-select__label" for="menu-items-to-show">Menu items</label>
    <select class="menu-items-select__select" name="menu-items-to-show" id="menu-items-to-show">
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10" selected>Ten</option>
        <option value="11">Eleven</option>
        <option value="12">Twelve</option>
        <option value="13">Thirteen</option>
        <option value="14">Fourteen</option>
        <option value="15">Fifteen</option>
    </select>
</div>

<div class="right-click-prompt">
    <p class="right-click-prompt__label">
        Right click and drag
    </p>
</div>

Radial / Circular Menu

html5, menu, template

编辑器支持Emmet

快捷键

Radial / Circular Menu

html5, menu, template

很棒的一款HTML5可定制分类导航边栏界面模板

HTML5一款可在线定制的烟花模拟器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：