3
Ich versuche, eine Ecke Kreismenü zu erstellen, wie im Bild unten dargestellt:Corner Kreis Menü CSS und jQuery
Dies ist, was ich versucht habe, und erreicht:
$(".menu").click(function(){
$(".menu-items").fadeToggle();
});html,body{
\t color:#000;
}
.menu{
\t position:fixed;
\t left:-100px;
\t top:-100px;
\t z-index:9999 !important;
\t width:200px;
\t height:200px;
\t border-radius:50%;
\t background-color:#3F51B5;
}
.menu .menu-btn{
\t position:absolute;
\t bottom:50px;
\t right:50px;
}
.menu-items{
\t position:fixed;
\t top:-100;
\t left:-100;
\t z-index:9990 !important;
\t width:250px;
\t height:250px;
\t background:#2979FF;
\t border-radius:50%;
}<html>
<head>
\t <title>Corner Circle Menu</title>
</head>
<body>
\t <div class="menu">
\t \t <div class="menu-btn">Menu</div>
\t </div>
\t <div class="menu-items">
\t \t <div class="menu-item">Item 1</div>
\t \t <div class="menu-item">Item 2</div>
\t \t <div class="menu-item">Item 3</div>
\t </div>
</body>
</html>Ich habe versucht, dies von 2 Tagen zu erreichen, konnte aber keine relevanten Codes oder Idee finden s oder Logik. Könnte mir bitte jemand die Mathematik und CSS hinter diesem Design erklären/führen?
Suche nach „CSS Tortenstück“ und lernt, wie man das tun, dann verwendet ganze Kreise gerade und überzieht sie in der linken oberen Ecke -> https://jsfiddle.net/d7vvntmk/ – adeneo
Ja, das ist etwas, wonach ich gesucht habe. Vielen Dank :) –