CODEWITHSUNDEEP
cssmenugeometry
user3671746
user3671746

Reputation: 291

how to position circle-elements around half-circle

I'd like to place my menu-circles around the menu-button (half-circle). I thought it's possible to do that with transform: rotate(x deg) for the elements, but it did not work. I don't know what I'm doing wrong...

it should also be possible to do that with jquery, i think... would that be better? 

<body>
  <div id="overlay"></div>
  <footer>
    <div id="menuopen"> <span class="buttonmenu"> - </span>
      <div> 
        <a class="infoactive" href="#"><span class="entypo-info"></span></a> 
        <a class="sights" href="sehensw%C3%BCrdigkeiten.html"><span class="fontawesome-eye-open"></span></a> 
        <a class="food" href="essen.html"><span class="fontawesome-food"></span></a> 
        <a class="sports" href="sportfreizeit.html"><span class="maki-soccer"></span></a> 
        <a class="calendar" href="veranstaltungen.html"><span class="fontawesome-calendar"></a> 
        <a class="map" href="karte.html"><span class="typicons-globe"></a> 
      </div>
    </div>
    <div id="menuclosed"> <span class="buttonmenu"> + </span> </div>
  </footer>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js" type="text/javascript">      </script> 
<script src="script.js" type="text/javascript"></script> 
$(document).ready(function () {
    $(".buttonmenu").click(function () {
        $("#overlay, #menuclosed, #menuopen").fadeToggle();
    });
});

sorry, I have problems to enter my css here... but it's in the jsfiddle: http://jsfiddle.net/AMjPh/

Upvotes: 0

Views: 2081

Answers (2)

King King
King King

Reputation: 63327

You should position the sub menus absolutely, first try absolutely positioning all the submenus at the same location (on the left side of the main menu). Then just apply different rotate transforms for the sub menu items, also note about the transform-origin, which should be calculated to point to the center of the main menu. In fact your code has many things to improve more, but I've just edited it to show the desired result. The important thing is to know the idea.

#menuopen div a {     
  width: 70px;
  height: 70px;
  margin: 0;
  background-color: hsla(0, 0%, 69%, 0.3);
  color: #fff5ec;
  text-decoration: none;
  -webkit-border-radius: 70px;
  -moz-border-radius: 70px;
  border-radius: 70px;
  padding: 10px;    
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;     
  /* add this */
  position:absolute;
  left: calc(50% - 200px);
  /* this will position the submenus on the same line with the button menu */
  bottom: -40px;
  /* set the transform-origin to the center point of the button menu */
  -webkit-transform-origin: calc(100% + 130px) 50%;
}

.infoactive {
  border: 2px solid hsla(72, 63%, 53%, 1);  
  -webkit-transform: rotate(15deg);
}
.sights {
  -webkit-transform: rotate(45deg);
}
.food {
  -webkit-transform: rotate(75deg);
}
.sports {
  -webkit-transform: rotate(105deg);
}
.calendar {
  -webkit-transform: rotate(135deg);
}
.map {
  -webkit-transform: rotate(165deg);
}

You can calculate the values you want via the fixed size of the button menu 80x80 and the sub menus (70x70). In fact you can make it more dynamic but it's another part, you should find it yourself by trying improving the current code.

Demo.

Please test the demo using webkit-based browsers.

Upvotes: 0

Slytherin
Slytherin

Reputation: 474

You can actually achieve this using rotate , although you will need to make some adjustments first. The elements you want to set on a curve need to be long.

  1. You need to define their height from "circle center" ( your buttonmenu ) to their desired position.
  2. You need to set their transformation origin to lower end using transform-origin: bottom center;
  3. You need to rotate each element with different degree value
  4. You need to rotate their wrapper counter-clockwise
  5. If you want their content to be level, you will need to adjust some counter rotation on those elements themselves

This picture might help to illustrate Rotation picture example

Upvotes: 1

Related Questions