JavaScript Dev

JavaScript Dev

1604553780

A pure CSS library for radial lists and menus

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.

Download Details:

Author: fvitali

Source Code: https://github.com/fvitali/radialMenu/

#css #javascript

What is GEEK

Buddha Community

A pure CSS library for radial lists and menus

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Neumorphism Card Design using HTML and CSS | Pure CSS Card

#css #html #pure css card #html and css #design

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

JavaScript Dev

JavaScript Dev

1604553780

A pure CSS library for radial lists and menus

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.

Download Details:

Author: fvitali

Source Code: https://github.com/fvitali/radialMenu/

#css #javascript