Меню для Блоггер

Что бы немного изменить внешний вид своего блога можно поменять какой-нибудь гаджет или обновить его внешний вид. Например, меню. Оно стоит в центре блога, и сразу бросается в глаза читателю. Ниже коды необычных, красивых и лёгких в установке и по весу гаджетов.

1 меню

<nav>
<ul>
<li><a href="ссылка на страницу"><span>Главная</span></a></li>
<li><a href="ссылка на страницу"><span>Категории</span></a></li>
<li><a href="ссылка на страницу"><span>Блог</span></a></li>
<li><a href="ссылка на страницу"><span>Информация</span></a></li>
<li><a href="ссылка на страницу"><span>Контакты</span></a></li>
<li><a href="ссылка на страницу"><span>Помощь</span></a></li>
</ul>
</nav>
<style>
li {
list-style-type: none;}
nav ul{ padding: 0;
margin: 0;
}
nav li
{ float: left;}
nav a{
float: left;
color: #FFFFFF;
margin: 0 5px;
padding: 3px;
text-decoration: none;
border: 1px solid #FFFFFF;
font: bold 14px Arial, Helvetica;
background-color: #b1dcfc;
background-image: -moz-linear-gradient( #b3cce6, #b1dcfc);
background-image: -webkit-gradient(linear, left top, left bottom, from(#b3cce6), to(##b1dcfc));
background-image: -webkit-linear-gradient(#b3cce6, #b1dcfc);
background-image: -o-linear-gradient(#b3cce6, #b1dcfc);
background-image: -ms-linear-gradient(#b3cce6, #b1dcfc);
background-image: linear-gradient(#b3cce6, #b1dcfc);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 -1px 0 rgba(0,0,0,.8);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
nav a:hover
{
background-color: #b1dcfc;
background-image: -moz-linear-gradient(#b1dcfc, #b3cce6);
background-image: -webkit-gradient(linear, left top, left bottom, from(#b1dcfc), to(#b3cce6));
background-image: -webkit-linear-gradient(#b1dcfc, #b3cce6);
background-image: -o-linear-gradient(#b1dcfc, #b3cce6);
background-image: -ms-linear-gradient(#b1dcfc, #b3cce6);
background-image: linear-gradient(#b1dcfc, #b3cce6);
}
nav a:active
{
background: #dfe6fc;
position: relative;
top: 2px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}
nav span
{
border: 1px dashed #FFFFFF;
display: inline-block;
padding: 4px 15px;
cursor: pointer;
background-color: #a3d4fa;
background-image: -moz-linear-gradient(#dfe6fc, #a3d4fa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dfe6fc), to(#a3d4fa));
background-image: -webkit-linear-gradient(#dfe6fc, #a3d4fa);
background-image: -o-linear-gradient(#dfe6fc, #a3d4fa);
background-image: -ms-linear-gradient(#dfe6fc, #a3d4fa);
background-image: linear-gradient(#dfe6fc, #a3d4fa);
}

nav a:hover span
{
background-color: #dfe6fc;
background-image: -moz-linear-gradient(#a3d4fa, #dfe6fc);
background-image: -webkit-gradient(linear, left top, left bottom, from(#a3d4fa), to(##dfe6fc));
background-image: -webkit-linear-gradient(#a3d4fa, #dfe6fc);
background-image: -o-linear-gradient(#a3d4fa, #dfe6fc);
background-image: -ms-linear-gradient(#a3d4fa, #dfe6fc);
background-image: linear-gradient(#a3d4fa, #dfe6fc);
}

</style>

Меню с ховер-эффектом, при наведении курсора оно меняется.

Изменить в меню можно все цвета под свой блог. Обратите внимание, в коде некоторые цвета повторяются, соответственно, меняем все коды одного и того же цвета на другой.

Салатовый, голубой, фиолетовый, розовый — меняем цвет

Красным выделила — меняем шрифт, размер

Синим выделила место, куда добавлять ссылки на страницы

Оранжевым — меняем названия вкладок

Зелёный — цвет прошивки (пунктиров)

Выделенное коричневым — можно поменять цвет тени.

Некоторые цвета не выделила, но их так же можно менять по своему вкусу.

2 меню

Вертикальное меню для боковой панели или подвала. Меню с эффектом. Язычки пунктов выдвигаются вперёд.

<ul class="svertical">
<li><a href="ссылка - добавляем свою">Блоггер</a></li>
<li><a href="ссылка - добавляем свою">CSS </a></li>
<li><a href="ссылка - добавляем свою">JavaScript</a></li>
<li><a href="ссылка - добавляем свою">Эффекты</a></li>
<li><a href="ссылка - добавляем свою">HTML</a></li>
<li><a href="ссылка - добавляем свою">Коды</a></li>
</ul>
<style>
ul.svertical{
width: 200px; /* ширина меню */
overflow: auto;
background:white;
margin: 0;
padding: 0;
padding-top: 7px;
list-style-type: none;
}
ul.svertical li{
text-align: right;
}
ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background:#50c878; /* цвет фона ссылок */
font: bold 15px Germand; /* шрифт, толщина, размер шрифта */
text-decoration: none;
padding: 5px;
margin-bottom: 7px;
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.svertical li a:hover{
padding-right: 30px;
color: black;
background: #00a550; /* цвет фона ссылок при наведении курсора */
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8);
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}
ul.svertical li a:before{
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px;
border-color: transparent transparent transparent white; }
</style>

Оранжевым выделила в коде — цвет тени

Синий — названия пунктов меню

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

Посмотреть менюшки можно на тестовом блоге.

Продолжение в следующей статье.