Scribd
Upload
7 views

Text

The document provides code for a circular wheel menu containing six items, each evenly spaced around the circle. It includes HTML for structure, CSS for styling, and JavaScript for functionality, allowing users to click on items and log their indices to the console. Customization options are available for appearance and behavior through modifications to the provided code.

Uploaded by

chiderachurchill372
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views

Text

The document provides code for a circular wheel menu containing six items, each evenly spaced around the circle. It includes HTML for structure, CSS for styling, and JavaScript for functionality, allowing users to click on items and log their indices to the console. Customization options are available for appearance and behavior through modifications to the provided code.

Uploaded by

chiderachurchill372
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML

```
<div class="wheel-menu">
<div class="menu-item" data-index="0">Item 1</div>
<div class="menu-item" data-index="1">Item 2</div>
<div class="menu-item" data-index="2">Item 3</div>
<div class="menu-item" data-index="3">Item 4</div>
<div class="menu-item" data-index="4">Item 5</div>
<div class="menu-item" data-index="5">Item 6</div>
</div>
```

CSS
```
.wheel-menu {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}

.menu-item {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
cursor: pointer;
}

.menu-item:hover {
background-color: #ddd;
}
```

JavaScript
```
const wheelMenu = document.querySelector('.wheel-menu');
const menuItems = document.querySelectorAll('.menu-item');

let angle = 0;
let angleStep = 360 / menuItems.length;

menuItems.forEach((menuItem, index) => {


menuItem.style.transform = `rotate(${angle}deg) translateX(120px) rotate(-$
{angle}deg)`;
angle += angleStep;
});

wheelMenu.addEventListener('click', (e) => {


if (e.target.classList.contains('menu-item')) {
console.log(`Clicked on item ${e.target.dataset.index}`);
}
});
```

This code creates a wheel menu with 6 items, each positioned at an equal angle
around the circle. When an item is clicked, it logs a message to the console with
the item's index.

You can customize the appearance and behavior of the wheel menu by modifying the
HTML, CSS, and JavaScript code.

You might also like