Помощь Как сделать такие категории?? или кто может помочь!

[nexis33]

Вот пример Для просмотра ссылки Войди или Зарегистрируйся
Совет или инструкции, заранее спасибо)))

 

[ddn128]

именно такой, заказчик у меня такой) А сам я не особо работал раньше с wordpress'om

Ну вы даёте . C CSS\HTML хотя бы работали? Для просмотра ссылки Войди или Зарегистрируйся

Если и с html проблема, тогда идите на Для просмотра ссылки Войди или Зарегистрируйся и перебирайте все плагины меню, 99,99% там есть такой плагин.

 

[DeathKing]

решили задачу?

 

[nexis33]

решили задачу?

Да, нашел шаблон уже адаптированный под это меню)))
У меня вот такой вопрос, если сможите помочь
У меня есть пример создания кнопки с анимацией
Вот такой.

  </pre>
<a class="circle_wrapper" href="#">
</a>
<div class="circle_over">
<div class="check blur">✓</div>
<div class="check lime">✓</div>
<div class="check fade">✓</div>
</div>
<div class="circle"></div>
<pre>

И сам стиль к этой кнопке

</pre>
$main-size: 240px;
$basecolor: #18272a;
// ^^^^ feel free to play with the size

@font-face {
font-family: 'random';
font-weight: normal;
font-style: normal;
}
html {
background: $basecolor;
display: table;
min-height: 100%;
min-width: 100%;
box-shadow: inset 0 0 300px 0 black;
}

body {
text-align: center;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}

@keyframes fade {
to {
opacity: .5;
}
}

.circle_wrapper {
width: $main-size;
height: $main-size;
position: absolute;
display: block;
top: 50%;
left: 50%;
border-radius: 100%;
box-shadow: 0 0 $main-size 0 black;
margin-left: $main-size / -2;
margin-top: $main-size / -2;
}

.circle {
width: $main-size;
height: $main-size;
position: absolute;
top: 50%;
left: 50%;
margin-left: $main-size / -2;
margin-top: $main-size / -2;
background-color: mix($basecolor - 50, cyan);
overflow: hidden;
border-radius: 100%;
// box-shadow: 0 0 $main-size * 0.025 0 rgba(white, .5);
transition: background-color 200ms ease;
animation: spin 2s linear infinite;
animation-play-state: paused;
&::after {
$size: $main-size * 0.75;
content: '';
display: block;
width: $size;
height: $size;
top: 50%;
left: 50%;
margin-top: $size / -2;
margin-left: $size / -2;
background-color: transparent;
position: absolute;
z-index: 10;
border-radius: 50%;
$shadowVarA: $main-size * 0.1;
$shadowVarB: $main-size * 0.25;
$shadowVarC: $main-size * 0.02;
$shadowVarD: $main-size * 0.075;

&::before {
$size: $main-size * 1;
content: '';
display: block;
width: $size;
height: $size;
top: 50%;
left: 50%;
margin-top: $size / -2;
margin-left: $size / -2;
position: absolute;
z-index: 11;
border-radius: 50%;
box-shadow: inset 0 0 $main-size * 0.0625 1px rgba(black, .35);
}
}

.circle_over {
$size: $main-size * 0.75;
width: $size;
height: $size;
top: 50%;
left: 50%;
font-weight: bold;
font-size: $main-size * 0.45;
text-transform: uppercase;
margin-left: $size / -2;
margin-top: $size / -2;
position: absolute;
// background-image: radial-gradient(circle, rgba(tint($basecolor,10), 0), $basecolor);
display: inline-block;
z-index: 12;
overflow: hidden;
border-radius: 100%;
.check {
font-size: $main-size * 0.6;
position: absolute;
font-family: "random";
line-height: $size;
width: $size;
height: $size;
font-family: 'random';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 100%;
transition: opacity 400ms ease-in, text-shadow 200ms linear;
&.blur {
color: $basecolor;
text-shadow: 0px 2px 0 rgba(white,.15);
background: $basecolor;
opacity: 1;
}
&.lime {
background-image: radial-gradient(cyan,lime);
// box-shadow: inset 0 0 40px 0 rgba(cyan,.25);
color: transparent;
-webkit-background-clip: text;
opacity: 0;
}
&.fade {
color: $basecolor + 20;
opacity: 1;
}
}
}

a.circle_wrapper:hover,
a.circle_wrapper:focus {
.circle {
animation-play-state: running;
background-color: mix($basecolor - 20, cyan);
}
.check.lime {
opacity: 1;
}
.check.fade {
opacity: 0;
}
.check.blur {
text-shadow: 0px 2px 0 rgba(black,.15);
}
}
<pre>

Как мне разместить на сайте у себя ?) я не могу понять куда подключить HTML Чтобы он выводился на сайт странице в сайдбаре)