A pure CSS library for radial lists and menus

Related tags

Learning resource radialMenu
Overview

Radial menu and radial list

A pure CSS library for inline lists and menus around a circle, flexible and customizable

A radial layout organizes a list of items in a circle around a central element called pivot. Radial lists always show the items around the pivot, while radial menus use the pivot as a clickable toggle button to show and hide the items. Both lists and menus can be placed inline next to the boxes of other elements and text strings. Both the central pivot and the individual items can contain icons, text and labels, and can be hypertext links.

What is a radial menu?

It looks like an icon or a small text (or anything with a square or circular look) that when clicked opens into a circular menu of options, either a full circle or a small list of items.

before and after state

How to use it

Download and include in your HTML page the radialMenu.css file, and create a menu with the following code:

  	<div class="radial menu">
		<input id="radialMenu" type="checkbox">
		<label class="radialPivot" for="radialMenu">
			<span class='far fa-compass'></span>
			<span class="sronly">Show menu items</span>
		</label>
		<ul class="radialList compass" role="navigation" aria-label="menu items">
			<li class="icon"><a href="javascript:alert(`Go North`)">N</a></li>
			<li class="f1"><a href="javascript:alert(`Go North North East`)">&#183;</a></li>
			<li class="f1"><a href="javascript:alert(`Go North East`)">NE</a></li>
			<li class="f1"><a href="javascript:alert(`Go East North East`)">&#183;</a></li>
			<li class="icon"><a href="javascript:alert(`Go East`)">E</a></li>
			<li class="f1"><a href="javascript:alert(`Go East South East`)">&#183;</a></li>
			<li class="f1"><a href="javascript:alert(`Go South East`)">SE</a></li>
			<li class="f1"><a href="javascript:alert(`Go South South East`)">&#183;</a></li>
			<li class="icon"><a href="javascript:alert(`Go South`)">S</a></li>
			<li class="f1"><a href="javascript:alert(`Go South South hWest`)">&#183;</a></li>
			<li class="f1"><a href="javascript:alert(`Go South West`)">SW</a></li>
			<li class="f1"><a href="javascript:alert(`Go West South West`)">&#183;</a></li>
		</ul>
	</div>

and you're good to go.

Documentation

You can look at some extensive documentation and showcase at http://www.fabiovitali.it/radial/

Licence

This CSS library is subject to the terms of the Mozilla Public License, v. 2.0. See http://mozilla.org/MPL/2.0/. Additionally, inclusions of this library, modified or not, in packages and libraries for web development is possible under an agreement with the copyright holders.

You might also like...

Converts select multiple elements into dropdown menus with checkboxes

jquery-multi-select Converts select multiple elements into dropdown menus with a checkbox for each option. The original select element is hidden

Dec 8, 2022

Instagram.css - Complete set of Instagram filters in pure CSS

Instagram.css Instagram.css - Pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to t

Dec 30, 2022

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. It is created with HTML , CSS , JS and webpack and NPM.

My Todo List "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as com

Mar 29, 2022

Todo application is a web app that helps to organise your daily activities. It lists all the activities that you need to be completed and allows you to mark them as complete or not. Tasks can also be dragged and dropped in any position. It's a minimalistic website built using JavaScript ES6, Webpack and CSS

Todo Application Todo application is a web app that helps to organise your daily activities. It lists all the activities that you need to be completed

May 3, 2022

A to-do list app is a productivity tool designed to help users to create and maintain lists of tasks that they need to complete and it allows user to edit their tasks even after the task is saved. Built with CSS, HTML, and JAVASCRIPT.

Tumaini Maganiko 📗 Table of Contents 📗 Table of Contents 📖 To Do List PROJECT 🛠 Built With Tech Stack Key Features 🚀 Live Demo 💻 Getting Started

May 9, 2023

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

Jul 17, 2022

To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Todo-list project This is a Microverse project that entails a to-do-list. Built With HTML CSS Javascript Webpack VS code Live Demo (if available) Live

Aug 3, 2022

"To-do list" is a tool that lists the things you need to do and allows you to mark them as complete. Built with JavaScript, HTML, CSS, and Webpack!

HTML CSS JS ES6 WEBPACK NPM LINTERS Todo List Project "To-do list" is a tool that helps to organize your day. It simply lists the things that you need

Jul 2, 2022

To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Microverse Webpack Javascript For the second Javascript milestone in building a todo website, set up a new repository and prepare it for development u

Jun 13, 2022
Owner
Fabio Vitali
Fabio Vitali
GitHub
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Ordered lists, flat or nested, multiple formats ordered lists.

logseq-plugin-ol 有序列表，单级或多级、多种样式的有序列表。 Ordered lists, flat or nested, multiple formats ordered lists. 使用展示 (Usage) 在想要展示为有序列表的块上添加一个以 #.ol 开头的标签就可以了。有

Seth Yuan 25 Jan 1, 2023
A table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, row context menus, dark theme, and more.

Mantine DataTable A "dark-theme aware" table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagina

Ionut-Cristian Florescu 331 Jan 4, 2023
A good looking help command made with discord.js with select menus. Works with prefix and slash commands too!

fancy-help-command A good looking help command made with discord.js with select menus. Works with prefix and slash commands too! Dependencies: Select

LunarCodes 11 Dec 12, 2022
🍔 Access hours and menus from MC's caf

The Caf at MC The Caf is a webapp that acts as an easy way to access hours and the menu from the cafeteria. It's a Next.js project bootstrapped with c

Micah Lindley 4 Nov 5, 2022
ContainerMenu is an API for BDSX that allows you to create fake interactive container menus !

ContainerMenu - A BDSX API ContainerMenu is an API for BDSX that allows you to create fake interactive container menus ! Features Multiple containers

Se7en 8 Oct 28, 2022
A free JavaScript plugin to create custom right click context menus.

CtxMenu (Javascript) A modern, light weight, object oriented solution for adding right click context menus for your website. demo Installation Downloa

Nils Söderman 18 Oct 13, 2022
The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus.

mmenu light The (extremely) lightweight alternative to the mmenu.js plugin for creating off-canvas mobile menus with the exact look and feel. Examples

Fred Heusschen 172 Dec 12, 2022
A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.

Lava-Lamp Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic anima

Richard Hung 38 Jun 4, 2022