1. Tudásbázis
  2. Modulok használata
  3. Kör alakú menü

Kör alakú menü

Beküldte koksemolye - 2018. március 12. 11.12
koksemolye képe

Sziasztok!

Ügyféltájékoztató rendszerhez szeretnék kör alakú menüket létrehozni.
Érintő kijelzőn kezelnék az ügyfelek, ezért a sima rácsos felsorolás nem lenne praktikus, na meg túl snassz.

ilyet vagy ehhez hasonlót szeretnék :

https://codepen.io/suez/pen/vAais

Drupalban megoldható ez? Kezdő drupalos vagyok!!!

Se sminket se modult nem találtam erre eddig.

Üdv
Laci

Drupal verzió: 
7.x
Fórum: 
Modulok használata
HF leon képe

Beküldte HF leon - 2018. március 12. 12.45

No és a html, css, javascript, hogy megy?

Sajnos én sem ismerek ilyen modult, de nincs más dolgod, mint egy olyan nyolc elemű menüt csinálnod, mint a példában. Nyilván lehet többet is, de, akkor az elrendezést kell átvariálni a css-ben. A sminket neked kell elkészíteni a menühöz. Ha a klasszikus ul/li menüt nézzük, akkor az icons div-ből lesz az "ul" a rotater-es div-ekből pedig az "li" elemek. Az "li" elemeken belüli btn div-ekből pedig lehetnek az "a" elemek és azon belülre elhelyezheted az "i" elemeket.

A menü főgombja nyilván marad a példában lévő. Az alábbi példán li elemből csak egy van. Nyilván nyolc kell, mint az eredetiben, hogy rendben működjön. A drupal sminkben generálódnak ki az li elemek. A menüknél vagy a nevet használod fel az egyedi osztályokhoz, vagy egy kiegészítő modullal osztályok hozzáadásának lehetőségével bővítheted a menüt és ott adhatod meg a menüpontok egyedi osztályait.

Figyelj arra, hogy scss-ben van a példán a css kód. Kimásolás előtt fordíttasd le css-re. A gombok a példában pedig a font-awesome css-ből származnak, így azt is be kell húzni. A sminkben vagy nem íratod ki a menüpontok nevét, vagy css-el elrejted a szöveget.

  1. <div class="menu">
  2.   <div class="btn trigger">
  3.     <span class="line"></span>
  4.   </div>
  5.  
  6.   <ul class="icons">
  7.  
  8.     <li class="rotater">
  9.       <a class="btn btn-icon">
  10.         <i class="fa fa-codepen"></i>
  11.       </a>
  12.     </li>
  13.  
  14.   </ul>
  15.  
  16. </div>
0
0
koksemolye képe

Beküldte koksemolye - 2018. március 12. 13.10

Hello!

Köszi a gyors választ de ezzel sajna nem lettem okosabb.

Próbáltuk beilleszteni 1 HTML-ként (Html+css+js) de nem jelenítette meg.

Ezek szerint Bootstrap nélkül kell megírni előröl?

Ez meghaladja képességeimet. :)

0
0
HF leon képe

Beküldte HF leon - 2018. március 12. 15.05

Mi a csudának bootstrap?

Végül is egy blokkban, vagy tartalomként is beilleszthető. Ezen kívül csak jquery és fontawesome kell hozzá!

https://www.drupal.org/project/fontawesome

  1. <style class="cp-pen-styles">*, *:before, *:after {
  2.   -webkit-box-sizing: border-box;
  3.           box-sizing: border-box;
  4.   margin: 0;
  5.   padding: 0;
  6. }
  7. html, body {
  8.   height: 100%;
  9.   overflow: hidden;
  10. }
  11. body {
  12.   background: linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
  13. }
  14. .absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {
  15.   position: absolute;
  16.   top: 50%;
  17.   left: 50%;
  18.   -webkit-transform: translateX(-50%) translateY(-50%);
  19.           transform: translateX(-50%) translateY(-50%);
  20. }
  21. .menu {
  22.   width: 5em;
  23.   height: 5em;
  24. }
  25. .menu .btn {
  26.   position: absolute;
  27.   top: 0;
  28.   left: 0;
  29.   width: 100%;
  30.   height: 100%;
  31.   border-radius: 50%;
  32.   background: rgba(255, 255, 255, 0.15);
  33.   opacity: 0;
  34.   z-index: -10;
  35.   cursor: pointer;
  36.   -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
  37.   transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
  38.   transition: opacity 1s, z-index 0.3s, transform 1s;
  39.   transition: opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
  40.   -webkit-transform: translateX(0);
  41.           transform: translateX(0);
  42. }
  43. .menu .btn .fa {
  44.   font-size: 3em;
  45.   -webkit-transition: color 0.3s;
  46.   transition: color 0.3s;
  47. }
  48. .menu .btn:hover .fa {
  49.   color: rgba(255, 255, 255, 0.7);
  50. }
  51. .menu .btn.trigger {
  52.   opacity: 1;
  53.   z-index: 100;
  54.   cursor: pointer;
  55.   -webkit-transition: -webkit-transform 0.3s;
  56.   transition: -webkit-transform 0.3s;
  57.   transition: transform 0.3s;
  58.   transition: transform 0.3s, -webkit-transform 0.3s;
  59. }
  60. .menu .btn.trigger:hover {
  61.   -webkit-transform: scale(1.2);
  62.           transform: scale(1.2);
  63. }
  64. .menu .btn.trigger:hover .line {
  65.   background-color: rgba(255, 255, 255, 0.7);
  66. }
  67. .menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
  68.   background-color: rgba(255, 255, 255, 0.7);
  69. }
  70. .menu .btn.trigger .line {
  71.   width: 60%;
  72.   height: 6px;
  73.   background: #000;
  74.   border-radius: 6px;
  75.   -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
  76.   transition: background-color 0.3s, height 0.3s, top 0.3s;
  77. }
  78. .menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
  79.   content: "";
  80.   display: block;
  81.   position: absolute;
  82.   left: 0;
  83.   width: 100%;
  84.   height: 6px;
  85.   background: #000;
  86.   border-radius: 6px;
  87.   -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
  88.   transition: background-color 0.3s, -webkit-transform 0.3s;
  89.   transition: background-color 0.3s, transform 0.3s;
  90.   transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
  91. }
  92. .menu .btn.trigger .line:before {
  93.   top: -12px;
  94.   -webkit-transform-origin: 15% 100%;
  95.           transform-origin: 15% 100%;
  96. }
  97. .menu .btn.trigger .line:after {
  98.   top: 12px;
  99.   -webkit-transform-origin: 25% 30%;
  100.           transform-origin: 25% 30%;
  101. }
  102. .menu .rotater {
  103.   position: absolute;
  104.   top: 0;
  105.   left: 0;
  106.   width: 100%;
  107.   height: 100%;
  108.   -webkit-transform-origin: 50% 50%;
  109.           transform-origin: 50% 50%;
  110. }
  111. .menu.active .btn-icon {
  112.   opacity: 1;
  113.   z-index: 50;
  114. }
  115. .menu.active .trigger .line {
  116.   height: 0px;
  117.   top: 45%;
  118. }
  119. .menu.active .trigger .line:before {
  120.   -webkit-transform: rotate(45deg);
  121.           transform: rotate(45deg);
  122.   width: 110%;
  123. }
  124. .menu.active .trigger .line:after {
  125.   -webkit-transform: rotate(-45deg);
  126.           transform: rotate(-45deg);
  127.   width: 110%;
  128. }
  129.  
  130. .rotater:nth-child(1) {
  131.   -webkit-transform: rotate(-22.5deg);
  132.           transform: rotate(-22.5deg);
  133. }
  134.  
  135. .menu.active .rotater:nth-child(1) .btn-icon {
  136.   -webkit-transform: translateY(-10em) rotate(22.5deg);
  137.           transform: translateY(-10em) rotate(22.5deg);
  138. }
  139.  
  140. .rotater:nth-child(2) {
  141.   -webkit-transform: rotate(22.5deg);
  142.           transform: rotate(22.5deg);
  143. }
  144.  
  145. .menu.active .rotater:nth-child(2) .btn-icon {
  146.   -webkit-transform: translateY(-10em) rotate(-22.5deg);
  147.           transform: translateY(-10em) rotate(-22.5deg);
  148. }
  149.  
  150. .rotater:nth-child(3) {
  151.   -webkit-transform: rotate(67.5deg);
  152.           transform: rotate(67.5deg);
  153. }
  154.  
  155. .menu.active .rotater:nth-child(3) .btn-icon {
  156.   -webkit-transform: translateY(-10em) rotate(-67.5deg);
  157.           transform: translateY(-10em) rotate(-67.5deg);
  158. }
  159.  
  160. .rotater:nth-child(4) {
  161.   -webkit-transform: rotate(112.5deg);
  162.           transform: rotate(112.5deg);
  163. }
  164.  
  165. .menu.active .rotater:nth-child(4) .btn-icon {
  166.   -webkit-transform: translateY(-10em) rotate(-112.5deg);
  167.           transform: translateY(-10em) rotate(-112.5deg);
  168. }
  169.  
  170. .rotater:nth-child(5) {
  171.   -webkit-transform: rotate(157.5deg);
  172.           transform: rotate(157.5deg);
  173. }
  174.  
  175. .menu.active .rotater:nth-child(5) .btn-icon {
  176.   -webkit-transform: translateY(-10em) rotate(-157.5deg);
  177.           transform: translateY(-10em) rotate(-157.5deg);
  178. }
  179.  
  180. .rotater:nth-child(6) {
  181.   -webkit-transform: rotate(202.5deg);
  182.           transform: rotate(202.5deg);
  183. }
  184.  
  185. .menu.active .rotater:nth-child(6) .btn-icon {
  186.   -webkit-transform: translateY(-10em) rotate(-202.5deg);
  187.           transform: translateY(-10em) rotate(-202.5deg);
  188. }
  189.  
  190. .rotater:nth-child(7) {
  191.   -webkit-transform: rotate(247.5deg);
  192.           transform: rotate(247.5deg);
  193. }
  194.  
  195. .menu.active .rotater:nth-child(7) .btn-icon {
  196.   -webkit-transform: translateY(-10em) rotate(-247.5deg);
  197.           transform: translateY(-10em) rotate(-247.5deg);
  198. }
  199.  
  200. .rotater:nth-child(8) {
  201.   -webkit-transform: rotate(292.5deg);
  202.           transform: rotate(292.5deg);
  203. }
  204.  
  205. .menu.active .rotater:nth-child(8) .btn-icon {
  206.   -webkit-transform: translateY(-10em) rotate(-292.5deg);
  207.           transform: translateY(-10em) rotate(-292.5deg);
  208. }
  209. </style></head><body>
  210. <div class="menu">
  211.   <div class="btn trigger">
  212.     <span class="line"></span>
  213.   </div>
  214.   <div class="icons">
  215.     <div class="rotater">
  216.       <div class="btn btn-icon">
  217.         <i class="fa fa-codepen"></i>
  218.       </div>
  219.     </div>
  220.     <div class="rotater">
  221.       <div class="btn btn-icon">
  222.         <i class="fa fa-facebook"></i>
  223.       </div>
  224.     </div>
  225.     <div class="rotater">
  226.       <div class="btn btn-icon">
  227.         <i class="fa fa-google-plus"></i>
  228.       </div>
  229.     </div>
  230.     <div class="rotater">
  231.       <div class="btn btn-icon">
  232.         <i class="fa fa-twitter"></i>
  233.       </div>
  234.     </div>
  235.     <div class="rotater">
  236.       <div class="btn btn-icon">
  237.         <i class="fa fa-dribbble"></i>
  238.       </div>
  239.     </div>
  240.     <div class="rotater">
  241.       <div class="btn btn-icon">
  242.         <i class="fa fa-linkedin"></i>
  243.       </div>
  244.     </div>
  245.     <div class="rotater">
  246.       <div class="btn btn-icon">
  247.         <i class="fa fa-github"></i>
  248.       </div>
  249.     </div>
  250.     <div class="rotater">
  251.       <div class="btn btn-icon">
  252.         <i class="fa fa-behance"></i>
  253.       </div>
  254.     </div>
  255.   </div>
  256. </div>
  257. <!--<script src="index_elemei/jquery.js">-->
  258. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  259. <script>$(document).ready(function() {
  260.   $(".trigger").click(function() {
  261.     $(".menu").toggleClass("active"); 
  262.   });
  263. });
  264. </script>
0
0
HF leon képe

Beküldte HF leon - 2018. március 12. 15.05

Mi a csudának bootstrap?

Végül is egy blokkban, vagy tartalomként is beilleszthető. Ezen kívül csak jquery és fontawesome kell hozzá!

https://www.drupal.org/project/fontawesome

  1. <style class="cp-pen-styles">*, *:before, *:after {
  2.   -webkit-box-sizing: border-box;
  3.           box-sizing: border-box;
  4.   margin: 0;
  5.   padding: 0;
  6. }
  7. html, body {
  8.   height: 100%;
  9.   overflow: hidden;
  10. }
  11. body {
  12.   background: linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
  13. }
  14. .absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {
  15.   position: absolute;
  16.   top: 50%;
  17.   left: 50%;
  18.   -webkit-transform: translateX(-50%) translateY(-50%);
  19.           transform: translateX(-50%) translateY(-50%);
  20. }
  21. .menu {
  22.   width: 5em;
  23.   height: 5em;
  24. }
  25. .menu .btn {
  26.   position: absolute;
  27.   top: 0;
  28.   left: 0;
  29.   width: 100%;
  30.   height: 100%;
  31.   border-radius: 50%;
  32.   background: rgba(255, 255, 255, 0.15);
  33.   opacity: 0;
  34.   z-index: -10;
  35.   cursor: pointer;
  36.   -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
  37.   transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
  38.   transition: opacity 1s, z-index 0.3s, transform 1s;
  39.   transition: opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
  40.   -webkit-transform: translateX(0);
  41.           transform: translateX(0);
  42. }
  43. .menu .btn .fa {
  44.   font-size: 3em;
  45.   -webkit-transition: color 0.3s;
  46.   transition: color 0.3s;
  47. }
  48. .menu .btn:hover .fa {
  49.   color: rgba(255, 255, 255, 0.7);
  50. }
  51. .menu .btn.trigger {
  52.   opacity: 1;
  53.   z-index: 100;
  54.   cursor: pointer;
  55.   -webkit-transition: -webkit-transform 0.3s;
  56.   transition: -webkit-transform 0.3s;
  57.   transition: transform 0.3s;
  58.   transition: transform 0.3s, -webkit-transform 0.3s;
  59. }
  60. .menu .btn.trigger:hover {
  61.   -webkit-transform: scale(1.2);
  62.           transform: scale(1.2);
  63. }
  64. .menu .btn.trigger:hover .line {
  65.   background-color: rgba(255, 255, 255, 0.7);
  66. }
  67. .menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
  68.   background-color: rgba(255, 255, 255, 0.7);
  69. }
  70. .menu .btn.trigger .line {
  71.   width: 60%;
  72.   height: 6px;
  73.   background: #000;
  74.   border-radius: 6px;
  75.   -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
  76.   transition: background-color 0.3s, height 0.3s, top 0.3s;
  77. }
  78. .menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
  79.   content: "";
  80.   display: block;
  81.   position: absolute;
  82.   left: 0;
  83.   width: 100%;
  84.   height: 6px;
  85.   background: #000;
  86.   border-radius: 6px;
  87.   -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
  88.   transition: background-color 0.3s, -webkit-transform 0.3s;
  89.   transition: background-color 0.3s, transform 0.3s;
  90.   transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
  91. }
  92. .menu .btn.trigger .line:before {
  93.   top: -12px;
  94.   -webkit-transform-origin: 15% 100%;
  95.           transform-origin: 15% 100%;
  96. }
  97. .menu .btn.trigger .line:after {
  98.   top: 12px;
  99.   -webkit-transform-origin: 25% 30%;
  100.           transform-origin: 25% 30%;
  101. }
  102. .menu .rotater {
  103.   position: absolute;
  104.   top: 0;
  105.   left: 0;
  106.   width: 100%;
  107.   height: 100%;
  108.   -webkit-transform-origin: 50% 50%;
  109.           transform-origin: 50% 50%;
  110. }
  111. .menu.active .btn-icon {
  112.   opacity: 1;
  113.   z-index: 50;
  114. }
  115. .menu.active .trigger .line {
  116.   height: 0px;
  117.   top: 45%;
  118. }
  119. .menu.active .trigger .line:before {
  120.   -webkit-transform: rotate(45deg);
  121.           transform: rotate(45deg);
  122.   width: 110%;
  123. }
  124. .menu.active .trigger .line:after {
  125.   -webkit-transform: rotate(-45deg);
  126.           transform: rotate(-45deg);
  127.   width: 110%;
  128. }
  129.  
  130. .rotater:nth-child(1) {
  131.   -webkit-transform: rotate(-22.5deg);
  132.           transform: rotate(-22.5deg);
  133. }
  134.  
  135. .menu.active .rotater:nth-child(1) .btn-icon {
  136.   -webkit-transform: translateY(-10em) rotate(22.5deg);
  137.           transform: translateY(-10em) rotate(22.5deg);
  138. }
  139.  
  140. .rotater:nth-child(2) {
  141.   -webkit-transform: rotate(22.5deg);
  142.           transform: rotate(22.5deg);
  143. }
  144.  
  145. .menu.active .rotater:nth-child(2) .btn-icon {
  146.   -webkit-transform: translateY(-10em) rotate(-22.5deg);
  147.           transform: translateY(-10em) rotate(-22.5deg);
  148. }
  149.  
  150. .rotater:nth-child(3) {
  151.   -webkit-transform: rotate(67.5deg);
  152.           transform: rotate(67.5deg);
  153. }
  154.  
  155. .menu.active .rotater:nth-child(3) .btn-icon {
  156.   -webkit-transform: translateY(-10em) rotate(-67.5deg);
  157.           transform: translateY(-10em) rotate(-67.5deg);
  158. }
  159.  
  160. .rotater:nth-child(4) {
  161.   -webkit-transform: rotate(112.5deg);
  162.           transform: rotate(112.5deg);
  163. }
  164.  
  165. .menu.active .rotater:nth-child(4) .btn-icon {
  166.   -webkit-transform: translateY(-10em) rotate(-112.5deg);
  167.           transform: translateY(-10em) rotate(-112.5deg);
  168. }
  169.  
  170. .rotater:nth-child(5) {
  171.   -webkit-transform: rotate(157.5deg);
  172.           transform: rotate(157.5deg);
  173. }
  174.  
  175. .menu.active .rotater:nth-child(5) .btn-icon {
  176.   -webkit-transform: translateY(-10em) rotate(-157.5deg);
  177.           transform: translateY(-10em) rotate(-157.5deg);
  178. }
  179.  
  180. .rotater:nth-child(6) {
  181.   -webkit-transform: rotate(202.5deg);
  182.           transform: rotate(202.5deg);
  183. }
  184.  
  185. .menu.active .rotater:nth-child(6) .btn-icon {
  186.   -webkit-transform: translateY(-10em) rotate(-202.5deg);
  187.           transform: translateY(-10em) rotate(-202.5deg);
  188. }
  189.  
  190. .rotater:nth-child(7) {
  191.   -webkit-transform: rotate(247.5deg);
  192.           transform: rotate(247.5deg);
  193. }
  194.  
  195. .menu.active .rotater:nth-child(7) .btn-icon {
  196.   -webkit-transform: translateY(-10em) rotate(-247.5deg);
  197.           transform: translateY(-10em) rotate(-247.5deg);
  198. }
  199.  
  200. .rotater:nth-child(8) {
  201.   -webkit-transform: rotate(292.5deg);
  202.           transform: rotate(292.5deg);
  203. }
  204.  
  205. .menu.active .rotater:nth-child(8) .btn-icon {
  206.   -webkit-transform: translateY(-10em) rotate(-292.5deg);
  207.           transform: translateY(-10em) rotate(-292.5deg);
  208. }
  209. </style></head><body>
  210. <div class="menu">
  211.   <div class="btn trigger">
  212.     <span class="line"></span>
  213.   </div>
  214.   <div class="icons">
  215.     <div class="rotater">
  216.       <div class="btn btn-icon">
  217.         <i class="fa fa-codepen"></i>
  218.       </div>
  219.     </div>
  220.     <div class="rotater">
  221.       <div class="btn btn-icon">
  222.         <i class="fa fa-facebook"></i>
  223.       </div>
  224.     </div>
  225.     <div class="rotater">
  226.       <div class="btn btn-icon">
  227.         <i class="fa fa-google-plus"></i>
  228.       </div>
  229.     </div>
  230.     <div class="rotater">
  231.       <div class="btn btn-icon">
  232.         <i class="fa fa-twitter"></i>
  233.       </div>
  234.     </div>
  235.     <div class="rotater">
  236.       <div class="btn btn-icon">
  237.         <i class="fa fa-dribbble"></i>
  238.       </div>
  239.     </div>
  240.     <div class="rotater">
  241.       <div class="btn btn-icon">
  242.         <i class="fa fa-linkedin"></i>
  243.       </div>
  244.     </div>
  245.     <div class="rotater">
  246.       <div class="btn btn-icon">
  247.         <i class="fa fa-github"></i>
  248.       </div>
  249.     </div>
  250.     <div class="rotater">
  251.       <div class="btn btn-icon">
  252.         <i class="fa fa-behance"></i>
  253.       </div>
  254.     </div>
  255.   </div>
  256. </div>
  257. <!--<script src="index_elemei/jquery.js">-->
  258. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  259. <script>$(document).ready(function() {
  260.   $(".trigger").click(function() {
  261.     $(".menu").toggleClass("active"); 
  262.   });
  263. });
  264. </script>
0
0
HF leon képe

Beküldte HF leon - 2018. március 12. 15.06

Mi a csudának bootstrap?

Végül is egy blokkban, vagy tartalomként is beilleszthető. Ezen kívül csak jquery és fontawesome kell hozzá!

https://www.drupal.org/project/fontawesome

  1. <style class="cp-pen-styles">*, *:before, *:after {
  2.   -webkit-box-sizing: border-box;
  3.           box-sizing: border-box;
  4.   margin: 0;
  5.   padding: 0;
  6. }
  7. html, body {
  8.   height: 100%;
  9.   overflow: hidden;
  10. }
  11. body {
  12.   background: linear-gradient(45deg, #e10522 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #3105d1 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0adbd8 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #09f505 100%, rgba(9, 245, 5, 0) 70%);
  13. }
  14. .absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {
  15.   position: absolute;
  16.   top: 50%;
  17.   left: 50%;
  18.   -webkit-transform: translateX(-50%) translateY(-50%);
  19.           transform: translateX(-50%) translateY(-50%);
  20. }
  21. .menu {
  22.   width: 5em;
  23.   height: 5em;
  24. }
  25. .menu .btn {
  26.   position: absolute;
  27.   top: 0;
  28.   left: 0;
  29.   width: 100%;
  30.   height: 100%;
  31.   border-radius: 50%;
  32.   background: rgba(255, 255, 255, 0.15);
  33.   opacity: 0;
  34.   z-index: -10;
  35.   cursor: pointer;
  36.   -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
  37.   transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
  38.   transition: opacity 1s, z-index 0.3s, transform 1s;
  39.   transition: opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
  40.   -webkit-transform: translateX(0);
  41.           transform: translateX(0);
  42. }
  43. .menu .btn .fa {
  44.   font-size: 3em;
  45.   -webkit-transition: color 0.3s;
  46.   transition: color 0.3s;
  47. }
  48. .menu .btn:hover .fa {
  49.   color: rgba(255, 255, 255, 0.7);
  50. }
  51. .menu .btn.trigger {
  52.   opacity: 1;
  53.   z-index: 100;
  54.   cursor: pointer;
  55.   -webkit-transition: -webkit-transform 0.3s;
  56.   transition: -webkit-transform 0.3s;
  57.   transition: transform 0.3s;
  58.   transition: transform 0.3s, -webkit-transform 0.3s;
  59. }
  60. .menu .btn.trigger:hover {
  61.   -webkit-transform: scale(1.2);
  62.           transform: scale(1.2);
  63. }
  64. .menu .btn.trigger:hover .line {
  65.   background-color: rgba(255, 255, 255, 0.7);
  66. }
  67. .menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
  68.   background-color: rgba(255, 255, 255, 0.7);
  69. }
  70. .menu .btn.trigger .line {
  71.   width: 60%;
  72.   height: 6px;
  73.   background: #000;
  74.   border-radius: 6px;
  75.   -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
  76.   transition: background-color 0.3s, height 0.3s, top 0.3s;
  77. }
  78. .menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
  79.   content: "";
  80.   display: block;
  81.   position: absolute;
  82.   left: 0;
  83.   width: 100%;
  84.   height: 6px;
  85.   background: #000;
  86.   border-radius: 6px;
  87.   -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
  88.   transition: background-color 0.3s, -webkit-transform 0.3s;
  89.   transition: background-color 0.3s, transform 0.3s;
  90.   transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
  91. }
  92. .menu .btn.trigger .line:before {
  93.   top: -12px;
  94.   -webkit-transform-origin: 15% 100%;
  95.           transform-origin: 15% 100%;
  96. }
  97. .menu .btn.trigger .line:after {
  98.   top: 12px;
  99.   -webkit-transform-origin: 25% 30%;
  100.           transform-origin: 25% 30%;
  101. }
  102. .menu .rotater {
  103.   position: absolute;
  104.   top: 0;
  105.   left: 0;
  106.   width: 100%;
  107.   height: 100%;
  108.   -webkit-transform-origin: 50% 50%;
  109.           transform-origin: 50% 50%;
  110. }
  111. .menu.active .btn-icon {
  112.   opacity: 1;
  113.   z-index: 50;
  114. }
  115. .menu.active .trigger .line {
  116.   height: 0px;
  117.   top: 45%;
  118. }
  119. .menu.active .trigger .line:before {
  120.   -webkit-transform: rotate(45deg);
  121.           transform: rotate(45deg);
  122.   width: 110%;
  123. }
  124. .menu.active .trigger .line:after {
  125.   -webkit-transform: rotate(-45deg);
  126.           transform: rotate(-45deg);
  127.   width: 110%;
  128. }
  129.  
  130. .rotater:nth-child(1) {
  131.   -webkit-transform: rotate(-22.5deg);
  132.           transform: rotate(-22.5deg);
  133. }
  134.  
  135. .menu.active .rotater:nth-child(1) .btn-icon {
  136.   -webkit-transform: translateY(-10em) rotate(22.5deg);
  137.           transform: translateY(-10em) rotate(22.5deg);
  138. }
  139.  
  140. .rotater:nth-child(2) {
  141.   -webkit-transform: rotate(22.5deg);
  142.           transform: rotate(22.5deg);
  143. }
  144.  
  145. .menu.active .rotater:nth-child(2) .btn-icon {
  146.   -webkit-transform: translateY(-10em) rotate(-22.5deg);
  147.           transform: translateY(-10em) rotate(-22.5deg);
  148. }
  149.  
  150. .rotater:nth-child(3) {
  151.   -webkit-transform: rotate(67.5deg);
  152.           transform: rotate(67.5deg);
  153. }
  154.  
  155. .menu.active .rotater:nth-child(3) .btn-icon {
  156.   -webkit-transform: translateY(-10em) rotate(-67.5deg);
  157.           transform: translateY(-10em) rotate(-67.5deg);
  158. }
  159.  
  160. .rotater:nth-child(4) {
  161.   -webkit-transform: rotate(112.5deg);
  162.           transform: rotate(112.5deg);
  163. }
  164.  
  165. .menu.active .rotater:nth-child(4) .btn-icon {
  166.   -webkit-transform: translateY(-10em) rotate(-112.5deg);
  167.           transform: translateY(-10em) rotate(-112.5deg);
  168. }
  169.  
  170. .rotater:nth-child(5) {
  171.   -webkit-transform: rotate(157.5deg);
  172.           transform: rotate(157.5deg);
  173. }
  174.  
  175. .menu.active .rotater:nth-child(5) .btn-icon {
  176.   -webkit-transform: translateY(-10em) rotate(-157.5deg);
  177.           transform: translateY(-10em) rotate(-157.5deg);
  178. }
  179.  
  180. .rotater:nth-child(6) {
  181.   -webkit-transform: rotate(202.5deg);
  182.           transform: rotate(202.5deg);
  183. }
  184.  
  185. .menu.active .rotater:nth-child(6) .btn-icon {
  186.   -webkit-transform: translateY(-10em) rotate(-202.5deg);
  187.           transform: translateY(-10em) rotate(-202.5deg);
  188. }
  189.  
  190. .rotater:nth-child(7) {
  191.   -webkit-transform: rotate(247.5deg);
  192.           transform: rotate(247.5deg);
  193. }
  194.  
  195. .menu.active .rotater:nth-child(7) .btn-icon {
  196.   -webkit-transform: translateY(-10em) rotate(-247.5deg);
  197.           transform: translateY(-10em) rotate(-247.5deg);
  198. }
  199.  
  200. .rotater:nth-child(8) {
  201.   -webkit-transform: rotate(292.5deg);
  202.           transform: rotate(292.5deg);
  203. }
  204.  
  205. .menu.active .rotater:nth-child(8) .btn-icon {
  206.   -webkit-transform: translateY(-10em) rotate(-292.5deg);
  207.           transform: translateY(-10em) rotate(-292.5deg);
  208. }
  209. </style></head><body>
  210. <div class="menu">
  211.   <div class="btn trigger">
  212.     <span class="line"></span>
  213.   </div>
  214.   <div class="icons">
  215.     <div class="rotater">
  216.       <div class="btn btn-icon">
  217.         <i class="fa fa-codepen"></i>
  218.       </div>
  219.     </div>
  220.     <div class="rotater">
  221.       <div class="btn btn-icon">
  222.         <i class="fa fa-facebook"></i>
  223.       </div>
  224.     </div>
  225.     <div class="rotater">
  226.       <div class="btn btn-icon">
  227.         <i class="fa fa-google-plus"></i>
  228.       </div>
  229.     </div>
  230.     <div class="rotater">
  231.       <div class="btn btn-icon">
  232.         <i class="fa fa-twitter"></i>
  233.       </div>
  234.     </div>
  235.     <div class="rotater">
  236.       <div class="btn btn-icon">
  237.         <i class="fa fa-dribbble"></i>
  238.       </div>
  239.     </div>
  240.     <div class="rotater">
  241.       <div class="btn btn-icon">
  242.         <i class="fa fa-linkedin"></i>
  243.       </div>
  244.     </div>
  245.     <div class="rotater">
  246.       <div class="btn btn-icon">
  247.         <i class="fa fa-github"></i>
  248.       </div>
  249.     </div>
  250.     <div class="rotater">
  251.       <div class="btn btn-icon">
  252.         <i class="fa fa-behance"></i>
  253.       </div>
  254.     </div>
  255.   </div>
  256. </div>
  257. <!--<script src="index_elemei/jquery.js">-->
  258. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  259. <script>$(document).ready(function() {
  260.   $(".trigger").click(function() {
  261.     $(".menu").toggleClass("active"); 
  262.   });
  263. });
  264. </script>
0
0
HF leon képe

Beküldte HF leon - 2018. március 12. 16.04

Mi a csudának bootstrap?

Végül is egy blokkban, vagy tartalomként is beilleszthető. Ezen kívül csak jquery és fontawesome kell hozzá!

https://www.drupal.org/project/fontawesome

Szívesen beszúrtam volna a kódot is, de a drupal.hu kiakadt tőle :D

Egyébként, ha nem akarsz ikonokat, akkor a jquery is elég.
A css-hez is vannak modulok.
https://www.drupal.org/project/css_editor
https://www.drupal.org/project/css_injector

Persze akár natur a body-ba is beszúrható és a html 5.2-óta, még szabványos is, bár kicsit sem elegáns. A jquery, viszont nagyon fontos és a menüvezérlő javascript is:

jQuery:

  1. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Menüvezérlő szkript:
  1. <script>$(document).ready(function() {
  2.   $(".trigger").click(function() {
  3.     $(".menu").toggleClass("active"); 
  4.   });
  5. });
  6. </script>

A szkriptek fölé tedd be a html kódot és a css kódot, valamint egészítsd ki azzal, hogy mi kerüljön a korongokba. Mert eddig csak a példában látott menüt fogod látni üres korongokkal.

Ha a jquery 2.x-es verziója betöltődik a lapodon, akkor a jquery-s szkriptrész elhagyható. Az 1.x-es verzióval valószínűleg nem működik.

0
0
HF leon képe

Beküldte HF leon - 2018. március 13. 14.02

Most mérges vagyok. Egész hosszú hozzászólásban leírtam mindent erre a drupal.hu eltüntette.

Kérd az oldal üzemeltetőit, hogy állítsák vissza!!!

Azt a mindeni ez aztán vissza lett állítva :D.

Lehet válogatni. Itt van mind a három próbálkozás, ami alapból sem jelent meg és a végén az utolsó, ahova a hosszú kódrészletet, már meg sem próbáltam betenni :D.

Minden esetre köszönöm a visszaállítást. Remélem segít a kérdezőnek.

0
0
koksemolye képe

Beküldte koksemolye - 2018. március 14. 06.19

Hello!

Huhh nem semmi válasz...

Bemásoltam a kódot de egyelőre szétnyomja az eredeti oldalt.
Próbálkozom vele, hogy hogyan lehetne megoldani, hogy ha egy hivatkozást csinálok neki akkor csak ez jelenjen meg.

Mindenesetre hálás vagyok, hogy foglalkoztál vele.
Remélem sikerül megoldanom.

0
0