Guide on making a dynamic circular spinning menu bar

I am struggling to create a circular spinning navigation bar using CSS3 and HTML. How can I achieve this effect? I have attached a picture from an old game that showcases the animation I am aiming for. When the active circle is selected, the corresponding page is displayed. Is there a way to implement this design? What steps should be taken to create this using CSS3 and HTML5.

I have included a code snippet as a starting point, but I need assistance with adding buttons to control the left and right movement of the animation, instead of the current 1, 2, 3, 4 options.

The concept is inspired by SliderDock, a dock application for Windows and MacOS. It seems like this task can be accomplished with CSS3.

* {
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: hidden;
}
/*HEADER*/

.header {
  height: 25px;
  background: #222;
  color: #eee;
  text-align: center;
  font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
  color: #999;
}
/*WRAPPER*/

.wrapper {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  width: 370px;
}
.menu a {
  margin-right: -4px;
  padding: 10px 30px;
  width: 50px;
  color: #333;
  text-decoration: none;
  font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
  background: #eee;
}
/*INNER CIRCLE*/

.wrapper:before {
  content: "Menu";
  text-align: center;
  font: 30px/120px Georgia, Times, serif;
  color: #black;
  position: absolute;
  top: 140px;
  left: 110px;
  z-index: 10;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/

.circle {
  position: relative;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 25px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #white;
  box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/

.circle li {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  list-style-type: none;
  text-align: center;
  font: 20px/50px Helvetica, Arial, sans-serif;
  top: 0;
  left: 0;
}
.circle li:nth-child(1) {
  top: 15px;
  left: 125px;
}
.circle li:nth-child(2) {
  top: 125px;
  left: 235px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.circle li:nth-child(3) {
  top: 235px;
  left: 125px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.circle li:nth-child(4) {
  top: 125px;
  left: 15px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
/*HOVER STATES*/

.menu > .one:hover ~ .circle {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.menu > .two:hover ~ .circle {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.menu > .three:hover ~ .circle {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.menu > .four:hover ~ .circle {
  -webkit-transform: rotate(-270deg);
  -moz-transform: rotate(-270deg);
  -ms-transform: rotate(-270deg);
  -o-transform: rotate(-270deg);
  transform: rotate(-270deg);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <meta name="description" content="description">

  <title>Nav Menu</title>

  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

</head>

<body>

  <div class="header"></div>

  <div class="wrapper">

    <div class="menu">
      <a href="#" class="one">1</a>
      <a href="#" class="two">2</a>
      <a href="#" class="three">3</a>
      <a href="#" class="four">4</a>

      <div class="circle">
        <ul>
          <li>Home</li>
          <li>World</li>
          <li>Games</li>
          <li>AboutUs</li>
        </ul>
      </div>

    </div>
  </div>

</body>

</html>

Answer №1

  1. One way to achieve this effect is by utilizing CSS3. You can apply the animation rotate to make the numbers rotate on hover, along with rotating the menu image.
  2. Another option is to use JavaScript combined with onmouseover and onmouseleave events to create the desired hover effect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I ensure that <path> elements in SVG respond to onClick events when used with React?

Here is a list of what React SVG currently supports: http://facebook.github.io/react/docs/tags-and-attributes.html#svg-attributes I'm attempting to find a way to make a shape I created using the SVG path interactive. If there is an alternate method t ...

Remember a MySQL query using JavaScript

For quite some time, I've been on a quest to unveil the solution to this issue that seems relatively straightforward, yet continues to elude me. The crux of the matter is my desire to "recall" a functional mysql query. With an HTML button and a span ...

Grid items displaying incorrectly due to text alignment issues

I'm facing an issue where I need to separate text and the money part, and also align the text in a way that when viewed in smaller text sizes, the money part moves to the next line. .outdoor-card { display:flex; flex-wrap: wrap; width: 100%; ...

What is the best way to create JavaScript code specifically for devices with a maximum width of 520px?

Is there a way to apply this JavaScript code specifically to devices with a maximum width of 520px? I could use some guidance on how to achieve this. // Apply code for max-width = 520px const myBtn = document.getElementById("darktheme"); const ...

Instructions on sending search fields by pressing the enter key

Developing my application in React.tsx, I have a menu window that consists of numerous div elements with input fields, checkboxes, and select elements. Upon clicking the submit button, a list of results with user-selected filters appears. As an additional ...

Enhancing WordPress Icons for Parent and Child Elements

I am seeking to customize icons on a WordPress website. The site contains a variety of product categories, including subcategories. https://i.sstatic.net/sTm1O.png My goal is to display one icon for parent categories and a different icon for child catego ...

Ways to prevent a div containing a lengthy content string from extending beyond other divs

Check out my Codepen project here Here is the HTML code for my personal website: <div id="splash" class="divider"> <h1 class="text-center text-uppercase">vincent/rodomista</h1> <p class="text-center text uppercase">Full Stack ...

What makes the transparent border colors on <tr> appear too dark?

For instance, take a look at this code: http://jsfiddle.net/WaJy7/ In my attempt to apply a semi-transparent border to every <tr> element, I've encountered an issue where the color of the border appears darker than intended for all rows except ...

Is an audio player/playlist necessary for showcasing a mix engineer's skills in their

As a newcomer to the world of web development with some background knowledge from school, I work as a mix engineer and have created a portfolio website. Previously, I utilized Soundcloud and Spotify's API to showcase my mixes/songs, but the external J ...

Creating a dynamic table based on selected dropdown option

I need to create a dynamic table of questions depending on the user's selection from a dropdown menu. When the user chooses a category, I want to pass that information to an API using the GET method. My controller is built using AngularJS. However, I ...

Utilizing JQuery's $(document).ready() function following a window.location change

I'm having trouble getting a JavaScript function to run after being redirected to a specific page like "example.com" when the DOM is ready for it to work with. Unfortunately, it seems that $(document).ready() is running before "example.com" finishes l ...

Issues with implementing Callouts CSS in Highcharts are causing complications

Currently, I am attempting to construct a callout, and I aim to format the callouts using CSS. Unfortunately, the CSS implementation seems to be malfunctioning for some unknown reason. Below is the HTML: <script src="https://code.highcharts.com/highch ...

Text fields do not show a cursor icon

On the website http://www.legrandclub.net, there are two text fields. Everything works fine in all web browsers except for Internet Explorer. When I click on one of the text fields, the cursor is not displayed, although it is possible to write text. What c ...

What is the method for selecting the "save as" option while downloading a file?

Imagine a scenario where you click on a link like this: <a href="1.txt">Download</a> After clicking the link, a save as window will appear. Is it feasible to utilize JavaScript in order to simulate button clicks within that window? Alternativ ...

Changing styles with the use of bootstrap.css themes on the fly

I'm experimenting with toggling between a custom dark and light theme in my MVC application. On the _Layout.cshtml page, the default theme is loaded by the following code: <link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original. ...

emulating an android device to test html5 applications

Recently, I embarked on developing an HTML5 game with the help of VS Code. I envision it being predominantly accessed from PCs and laptops. I successfully configured the Chrome debugger to facilitate debugging the webpage in Chrome. However, I am eager to ...

Tips for centering a horizontal unordered list within a division element

I can't seem to figure out why the text-align center isn't working. I've followed other tutorials and applied the textalign: center to the div, then added display: inline to the ul. Below is a sample of my HTML code from the browser as I am ...

Utilizing Pseudo Elements within the QT Designer Interface

I was attempting to add a vertical line to the left of a button with a hover effect using a pseudo-element in qt-designer styleSheet, but it was not displaying correctly. Here is the code I used: QPushButton{ position: relative; padding: 10px 20px; border: ...

Issues with the creation of an AngularJS table are causing functionality to malfunction

2021 UPDATE: Note: This question was drafted when I was still learning HTML and JS. If you are seeking assistance for an issue, this might not be very useful as my code was messy. Sorry for any inconvenience caused. The question will remain posted in acco ...

Is it possible to emphasize a duration of 25 minutes on an analog clock by utilizing CSS gradients?

I am in the process of incorporating a countdown timer but with an analog clock rather than a digital one. My objective is to emphasize the next 25 minutes as a circle sector that commences from the minute hand on the clock. Here is what I have developed ...