Главная » Гаджеты » Горизонтальное разноцветное меню для Blogger

Горизонтальное разноцветное меню для Blogger

Сегодня в статье предлагаю посмотреть на интересное, разноцветное меню для сайта. Оно очень просто устанавливаются на сайт, лёгкое - код состоит только из html и css.

Устанавливаем код меню в Дизайн/Добавить гаджет/HTML/JavaScript.

Многое в менюшках можно поменять под стиль блога - цвет, текст, шрифт и т.д.

Удобнее всего изменять код в визуальном редакторе.

Меню полупрозрачное, с ховер эффектом

Первый вид меню - как в коде, второй, если поменять цвет.

Код:

<div class="navi">
<div class="sm1shadow"><div class="sm1"><a href="#"><span>Главная</span></a></div></div>
<div class="sm2shadow"><div class="sm2"><a href="#"><span>Статьи</span></a></div></div>
<div class="sm3shadow"><div class="sm3"><a href="#"><span>Автор</span></a></div></div>
<div class="sm4shadow"><div class="sm4"><a href="#"><span>О блоге</span></a></div></div>
<div class="sm5shadow"><div class="sm5"><a href="#"><span>Контакты</span></a></div></div>
</div>
<style>
.navi {
  position: relative;
  display: block;
  width: 600px;
  height: 80px;
  margin:30px auto;
}
.navi a {
  width: 100%;
  height: 50px;
  left: 0px;
  position: absolute;
  text-decoration: none;
}
.sm1 {
width:125px;
height: 35px;
margin:0px 0px 0px 0px;
border:2px dotted #829e39;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
background: -moz-linear-gradient(top,  rgba(235,135,223,0.65) 0%, rgba(167,135,235,0.8) 100%);
background: -webkit-linear-gradient(top,  rgba(235,135,223,0.65) 0%,rgba(167,135,235,0.8) 100%);
background: linear-gradient(to bottom,  rgba(235,135,223,0.65) 0%,rgba(167,135,235,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6b3bf67', endColorstr='#cc779531',GradientType=0 );
text-align:center;
line-height: 35px;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 24px;
font-weight: 700;
-webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
        transform: rotate(0deg);
}
.sm1shadow {
position: absolute;
width:125px;
height: 60px;
margin:0px 0px 0px 0px;
background: -webkit-radial-gradient(50% 80%,60% 10%,rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0));
-webkit-transform: rotate(-5deg);
   -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
     -o-transform: rotate(-5deg);
        transform: rotate(-5deg);
}
.sm2 {
width:125px;
height: 35px;
margin:0px 0px 0px 0px;
border:2px dotted #3f86bb;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
background: -moz-linear-gradient(top,  rgba(255,255,0,0.65) 0%, rgba(112,176,224,0.8) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,0,0.65) 0%,rgba(112,176,224,0.8) 100%);
background: linear-gradient(to bottom,  rgba(255,255,0,0.65) 0%,rgba(112,176,224,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a68ac0e9', endColorstr='#cc70b0e0',GradientType=0 ); /* IE6-9 */
text-align:center;
line-height: 35px;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 24px;
font-weight: 700;
-webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
        transform: rotate(0deg);
}
.sm2shadow {
position: absolute;
width:125px;
height: 60px;
margin:5px 0px 0px 110px;
background: -webkit-radial-gradient(50% 80%,60% 10%,rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0));
-webkit-transform: rotate(5deg);
   -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
     -o-transform: rotate(5deg);
        transform: rotate(5deg);
}
.sm3 {
width:125px;
height: 35px;
margin:0px 0px 0px 0px;
border:2px dotted #bc8d03;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
background: -moz-linear-gradient(top,  rgba(27,228,0,0.65) 0%, rgba(199,152,16,0.8) 100%);
background: -webkit-linear-gradient(top,  rgba(27,228,0,0.65) 0%,rgba(199,152,16,0.8) 100%);
background: linear-gradient(to bottom,  rgba(27,228,0,0.65) 0%,rgba(199,152,16,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6eab92d', endColorstr='#ccc79810',GradientType=0 ); /* IE6-9 */
text-align:center;
line-height: 35px;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 24px;
font-weight: 700;
-webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
        transform: rotate(0deg);
}
.sm3shadow {
position: absolute;
width:125px;
height: 60px;
margin:-5px 0px 0px 225px;
background: -webkit-radial-gradient(50% 80%,60% 10%,rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0));
-webkit-transform: rotate(-5deg);
   -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
     -o-transform: rotate(-5deg);
        transform: rotate(-5deg);
}
.sm4 {
width:125px;
height: 35px;
margin:0px 0px 0px 0px;
border:2px dotted #92a6ca;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
background: -moz-linear-gradient(top,  rgba(5, 25, 242,0.65) 0%, rgba(135,206,235,0.8) 100%);
background: -webkit-linear-gradient(top,  rgba(5, 25, 242,0.65) 0%,rgba(135,206,235,0.8) 100%);
background: linear-gradient(to bottom,  rgba(5, 25, 242,0.65) 0%,rgba(135,206,235,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6b0c3e4', endColorstr='#cc778bae',GradientType=0 ); /* IE6-9 */
text-align:center;
line-height: 35px;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 24px;
font-weight: 700;
-webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
        transform: rotate(0deg);
}
.sm4shadow {
position: absolute;
width:125px;
height: 60px;
margin:5px 0px 0px 335px;
background: -webkit-radial-gradient(50% 80%,60% 10%,rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0));
-webkit-transform: rotate(-7deg);
   -moz-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
     -o-transform: rotate(-7deg);
        transform: rotate(-7deg);
}
.sm5 {
width:125px;
height: 35px;
margin:0px 0px 0px 0px;
border:2px dotted #c3c860;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
background: -moz-linear-gradient(top,  rgba(235,135,159,0.65) 0%, rgba(206,212,104,0.8) 100%);
background: -webkit-linear-gradient(top,  rgba(235,135,159,0.65) 0%,rgba(206,212,104,0.8) 100%);
background: linear-gradient(to bottom,  rgba(235,135,159,0.65) 0%,rgba(206,212,104,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6e2e47f', endColorstr='#ccced468',GradientType=0 ); /* IE6-9 */
text-align:center;
line-height: 35px;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 24px;
font-weight: 700;
-webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
        transform: rotate(0deg);
}
.sm5shadow {
position: absolute;
width:125px;
height: 60px;
margin:-2px 0px 0px 445px;
background: -webkit-radial-gradient(50% 80%,60% 10%,rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0));
-webkit-transform: rotate(5deg);
   -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
     -o-transform: rotate(5deg);
        transform: rotate(5deg);
}
.sm1:hover, .sm1shadow:hover {
  animation: animationFrames1 ease 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; 
  -webkit-animation: animationFrames1 ease 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; 
  -moz-animation: animationFrames1 ease 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; 
  -o-animation: animationFrames1 ease 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; 
  -ms-animation: animationFrames1 ease 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; 
}
@keyframes animationFrames1{
  0% {position:absolute;z-index:1000; transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; transform:  translate(0px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-moz-keyframes animationFrames1{
  0% {position:absolute;z-index:1000; -moz-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -moz-transform:  translate(0px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-webkit-keyframes animationFrames1 {
  0% {position:absolute;z-index:1000; -webkit-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -webkit-transform:  translate(0px,-5px)  scaleX(1.05) scaleY(1.05) ; }
}
@-o-keyframes animationFrames1 {
  0% {position:absolute;z-index:1000; -o-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -o-transform:  translate(0px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-ms-keyframes animationFrames1 {
  0% {position:absolute;z-index:1000; -ms-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -ms-transform:  translate(0px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
.sm2:hover, .sm2shadow:hover {
  animation: animationFrames2 ease 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; 
  -webkit-animation: animationFrames2 ease 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; 
  -moz-animation: animationFrames2 ease 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; 
  -o-animation: animationFrames2 ease 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; 
  -ms-animation: animationFrames2 ease 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; 
}
@keyframes animationFrames2{
  0% {position:absolute;z-index:1000; transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-moz-keyframes animationFrames2{
  0% {position:absolute;z-index:1000; -moz-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -moz-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-webkit-keyframes animationFrames2 {
  0% {position:absolute;z-index:1000; -webkit-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -webkit-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ; }
}
@-o-keyframes animationFrames2 {
  0% {position:absolute;z-index:1000; -o-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -o-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-ms-keyframes animationFrames2 {
  0% {position:absolute;z-index:1000; -ms-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -ms-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
.sm3:hover, .sm3shadow:hover {
  animation: animationFrames3 ease 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; 
  -webkit-animation: animationFrames3 ease 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; 
  -moz-animation: animationFrames3 ease 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; 
  -o-animation: animationFrames3 ease 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; 
  -ms-animation: animationFrames3 ease 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; 
}
@keyframes animationFrames3{
  0% {position:absolute;z-index:1000; transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-moz-keyframes animationFrames3{
  0% {position:absolute;z-index:1000; -moz-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -moz-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-webkit-keyframes animationFrames3 {
  0% {position:absolute;z-index:1000; -webkit-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -webkit-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ; }
}
@-o-keyframes animationFrames3 {
  0% {position:absolute;z-index:1000; -o-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -o-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-ms-keyframes animationFrames3 {
  0% {position:absolute;z-index:1000; -ms-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -ms-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
.sm4:hover, .sm4shadow:hover {
  animation: animationFrames4 ease 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; 
  -webkit-animation: animationFrames4 ease 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; 
  -moz-animation: animationFrames4 ease 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; 
  -o-animation: animationFrames4 ease 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; 
  -ms-animation: animationFrames4 ease 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; 
}
@keyframes animationFrames4{
  0% {position:absolute;z-index:1000; transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-moz-keyframes animationFrames4{
  0% {position:absolute;z-index:1000; -moz-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -moz-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-webkit-keyframes animationFrames4 {
  0% {position:absolute;z-index:1000; -webkit-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -webkit-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ; }
}
@-o-keyframes animationFrames4 {
  0% {position:absolute;z-index:1000; -o-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -o-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-ms-keyframes animationFrames4 {
  0% {position:absolute;z-index:1000; -ms-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -ms-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
.sm5:hover, .sm5shadow:hover {
  animation: animationFrames5 ease 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  -webkit-animation: animationFrames5 ease 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; 
  -moz-animation: animationFrames5 ease 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards;
  -o-animation: animationFrames5 ease 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; 
  -ms-animation: animationFrames5 ease 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; 
}
@keyframes animationFrames5{
  0% {position:absolute;z-index:1000; transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-moz-keyframes animationFrames5{
  0% {position:absolute;z-index:1000; -moz-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -moz-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-webkit-keyframes animationFrames5 {
  0% {position:absolute;z-index:1000; -webkit-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -webkit-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ; }
}
@-o-keyframes animationFrames5 {
  0% {position:absolute;z-index:1000; -o-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -o-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
@-ms-keyframes animationFrames5 {
  0% {position:absolute;z-index:1000; -ms-transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;}
  100% {position:absolute;z-index:1000; -ms-transform:  translate(-2px,-5px)  scaleX(1.05) scaleY(1.05) ;}
}
</style>

Красным выделила знак #, на его место добавляем адреса страниц.

Синим в коде выделила названия страниц - меняем на свои.

Зелёным - цвета градиента в rgba, последнюю цифру можно оставить, так как она создаёт эффект прозрачности. Конвертер цвета в помощь - https://colorscheme.ru/color-converter.html

Оранжевым - border-style, он может быть:

dotted - рамка из точек

dashed - пунктирная

solid - рамка из линий

double - двойная рамка

и т.д.

Генератор рамок - https://html-css-js.com/css/generator/border-outline/

Голубым - цвет рамок

Розовым - размер рамки

Коричневым - шрифт меняйте на свой

Найдено на codepen.io у пользователя CyberPath

Ваши комментарии:

Комментарии со спамом удаляются.