Вертикальное меню .Йёжа Йежов

Вертикальное меню

В общем и блог у нас ничего получился . Но чего-то всё нам не хватает .Хочется больше и больше .А вот там-то, у такого -то, меню такое красивое ,а у меня стандартные ярлыки!
Ведь нам тоже хочется приукрасить свой блог ,ну хоть немножко. Да и плюс -меню помогает  навигации по блогу (ползингу то есть по оному) .Ну в общем чего разговаривать .Сделать бы -это было бы здорово ! Всё в наших руках ! Тем более не так это и сложно !
Долго ли коротко ,но мы добрались и до ВЕРТИКАЛЬНОГО МЕНЮ    про один из вариантов  ГОРИЗОНТАЛЬНОГО   МЕНЮ   мы уже говорили .Меню нам помогает не заблудиться  на блоге  ,как и КАРТА БЛОГА или СОДЕРЖАНИЕ .  Можно сделать что-то одно , а можно и то и другое .Дело вкуса .У меня есть и то и другое и третье ,ну .нравится мне вот так ! Привык я всё домой тащить ,не обессудьте уж .Этакий Ёжик-Плюшкин.
Вначале несколько вариантов одного и того же меню .Один вариант можно увидеть у меня в блоге в боковой панели ,другой с изменённым цветом \оранжевый\ можно увидеть http://kyklamoda.blogspot.com/
Отличие в основном цвет .Вообще его можно подобрать самим ,но если не хочется возиться ,несколько вариантов приведу здесь .Чем хороши эти меню -не надо лезть в шаблон.
Во всех вариантах вместо

Adres

вствляем свой адрес ссылки

Вместо

 Nazvanie

 Соответственно название ссылки

и ЕЩЁ СТРОЧЕК С АДРЕСОМ ,НАЗВАНИЕМ МОЖНО СДЕЛАТЬ СКОЛЬКО НУЖНО 
КОПИРУЯ  

 <a href="Adres">Nazvanie</a>

НАЧНЁМ СОЗДАНИЕ  НАШЕГО МЕНЮ 

Первое что делаем ,это добавляем в боковую или нижнюю панель

гаджет HTML/JavaScript .

А далее просто вставляем код ниже и сохраняем

Кстати,МЕНЮ можно разместить и просто на странице или в статье    

В Первом варианте подробно расписано ,где какой цвет ,так что можно самим поменять цвет

 Вариант 1

Как выглядит можно посмотреть под спойлером ниже ,там же и код 
 Вариант взят здесь
Взято здесь
.

.

Страницы

Про блоги Музыка Изменить

.

 .

<style type="text/css">

#bluetd{

border: 1px solid #000000; /*Цвет границы */

border-bottom-width: 0;

width: 100%;

}



#bluetd ul{

margin: 0;

padding: 0;

list-style-type: none;

font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}



#bluetd a{

display: block;

padding: 3px 0;

padding-left: 9px;

width: 94%;

text-decoration: none;

color: #ffffff; /*Цвет шрифта меню */

background-color: #2175bc; /*Цвет фона меню */

border-bottom: 1px solid #90bade; /*Цвет нижней границы*/

border-left: 7px solid #1958b7; /*Цвет левый границы */

list-style-type:none;

}



* html #bluetd a{ /*Только для IE */

width: 94%;

width: 94%;

}



#bluetd a:hover {

background-color: #2586d7; /*Цвет фона при наведении курсором мышки*/

border-left-color: #1c64d1; /*Цвет фона левой границы при наведении курсором мышки*/

}



#bluetd div.menutitle{

color: #ffffff; /* Цвет шрифта, названии меню */

border-bottom: 1px solid black;

padding: 1px 0;

padding-left: 5px;

background-color: #000000;  /*Цвет фона, названии меню*/

font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

</style>



<div id="bluetd">



<div class="menutitle">stra</div>

<ul>

<a href="Adres">Nazvanie</a>

<a href="Adres">Nazvanie</a>

</ul></div>

.

.

Вариант 2

  Его можно увидеть на моём блоге в боковой панели.А также посмотреть под спойлером ниже ,там же и код
 Взято здесь

.

Получается вот такое меню

Страницы

НачалоСодержаниеАудиоспектакли и аудиокнигиВидеоплейлистыГотовкаДокументальное кино

Код ниже
.

<style type="text/css">

#greentd{

border: 1px solid #000000; /*Main Border Color */

border-bottom-width: 0;

width: 100%;

}



#greentd ul{

margin: 0;

padding: 0;

list-style-type: none;

font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}



#greentd a{

display: block;

padding: 3px 0;

padding-left: 9px;

width: 94%; /*94% minus all left/right paddings and margins*/

text-decoration: none;

color: #ffffff; /* Menu Font Color */

background-color: #267F00; /*Menu background Color */

border-bottom: 1px solid #90bade; /*Bottom border color */

border-left: 7px solid #4CFF00; /*Left border color */

list-style-type:none;

}



* html #greentd a{ /*IE only */

width: 94%; /*IE 5*/

width: 94%; /*94% minus all left/right paddings and margins*/

}



#greentd a:hover {

background-color: #FF4300; /*Menu background Color On Hover*/

border-left-color: #1c64d1; /*Left border color On Hover*/

}



#greentd div.menutitle{

color: #ffffff; /* Title Font Color */

border-bottom: 1px solid black;

padding: 1px 0;

padding-left: 5px;

background-color: #000000;  /*Menu Tite Background Color*/

font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

</style>



<div id="greentd">



<div class="menutitle">Stranici</div>

<ul>

<a href="Adres">Nazvanie</a>

<a href="Adres">Nazvanie</a>

</ul></div>

.


.

.

Вариант 3

Взято Здесь

Ещё один вариант из этой же серии
Как выглядит можно посмотреть под спойлером ниже ,там же и код

.

.

<style type="text/css">

/* Edit by lagunof.blogspot.com*/

#ddblueblockmenu{

border: 1px solid #000000; /*Main Border Color */

border-bottom-width: 0;

width: 100%;

}

#ddblueblockmenu ul{

margin: 0;

padding: 0;

list-style-type: none;

font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

#ddblueblockmenu a{

display: block;

padding: 3px 0;

padding-left: 9px;

width: 94%; /*94% minus all left/right paddings and margins*/

text-decoration: none;

color: #000000; /* Menu Font Color */

background-color: #ffffff; /*Menu background Color */

border-bottom: 1px solid #90bade; /*Bottom border color */

border-left: 7px solid #000000; /*Left border color */

list-style-type:none;

}

* html #ddblueblockmenu a{ /*IE only */

width: 94%; /*IE 5*/

width: 94%; /*94% minus all left/right paddings and margins*/

}

#ddblueblockmenu a:hover {

background-color: #2586d7; /*Menu background Color On Hover*/

border-left-color: #1c64d1; /*Left border color On Hover*/

}

#ddblueblockmenu div.menutitle{

color: #ffffff; /* Title Font Color */

border-bottom: 1px solid black;

padding: 1px 0;

padding-left: 5px;

background-color: #000000;  /*Menu Tite Background Color*/

font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

/* Made By AllBlogTools.com */

</style>

<div id="ddblueblockmenu">

<div class="menutitle">Menu</div>

<ul>



<a href="Adres">Nazvanie</a>

<a href="Adres">Nazvanie</a>

</ul></div><font size="1">Pererabotano<a

href=" http://bloggfast.blogspot.com "> Bloggfast </a

href="http:></font>

.

. Ссылки на аналогичное меню у других авторов


http://nuzhdiki.blogspot.com/2010/12/blogger_19.html
http://www.damir-tote.ru/2012/01/vertikalnoe-menju-blogspot-css.html

ЕЩЁ СТАТЕЙ ОТ ЙЁЖИ ЙЕЖОВА

 

--

Об Авторе