Варианти на вертикално меню за нашия блог

Здравейте, приятели. Варианти в дизайн на блога, като навигационното му меню, можете да намерите в изобилие в Internet. Обикновени, падащи менюта, разположени в ляво, в дясно, отгоре и отдолу. Но в стотиците варианти, които се срещат в Internet, трябва да се търси компромис между удобство и оригиналност, лекота в настройката и инсталирането в кода на шаблона.

Менюто да е с дизайн, подходящ и за автора на блога, за да може с лекота да добавя в него линкове към най-значимите и интересни свои публикации. Красиво и функционално меню е необходимо на всеки блог или сайт. Много често блогърите ползват две менюта, хоризонтално, което е основно, и вертикално, което е допълнително, помощно, улесняващо навигацията по блога.

Вертикално меню, разположено в страничната колона 

Можете да го видите тук като Меню – 3.

Кодът се вгражда в HTML/JavaScript притурка и е следният:

<style>/* Главно меню */

#menu

{

width: 100%;

margin: 0;

padding: 10px 0 0 0;

list-style: none;

background: #874006;

background: -moz-linear-gradient(#BF6306, #874006);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #874006),color-stop(1, #BF6306));

background: -webkit-linear-gradient(#BF6306, #874006);

background: -o-linear-gradient(#BF6306, #874006);

background: -ms-linear-gradient(#BF6306, #874006);

background: linear-gradient(#BF6306, #874006);

-moz-border-radius: 50px;

border-radius: 50px;

-moz-box-shadow: 0 2px 1px #874006;

-webkit-box-shadow: 0 2px 1px #874006;

box-shadow: 0 2px 1px #874006;

}

#menu li

{

float: left;

padding: 0 0 10px 0;

position: relative;

}

#menu a

{

float: left;

height: 25px;

padding: 0 25px;

color: #ffffff;

text-transform: uppercase;

font: bold 12px/25px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#menu li:hover > a

{

color: #fafafa;

}

*html #menu li a:hover /* IE6 */

{

color: #fafafa;

}

#menu li:hover > ul

{

display: block;

}

/* Подменю */

#menu ul

{

list-style: none;

margin: 0;

padding: 0;

display: none;

position: absolute;

top: 35px;

left: 0;

z-index: 99999;

background: #BF6306;

background: -moz-linear-gradient(#BF6306, #783B08);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #783B08),color-stop(1, #BF6306));

background: -webkit-linear-gradient(#BF6306, #783B08);

background: -o-linear-gradient(#BF6306, #783B08);

background: -ms-linear-gradient(#BF6306, #783B08);

background: linear-gradient(#BF6306, #783B08);

-moz-border-radius: 5px;

border-radius: 5px;

}

#menu ul li

{

float: none;

margin: 0;

padding: 0;

display: block;

-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

}

#menu ul li:last-child

{

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#menu ul a

{

padding: 10px;

height: auto;

line-height: 1;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

*html #menu ul a /* IE6 */

{

height: 10px;

width: 150px;

}

*:first-child+html #menu ul a /* IE7 */

{

height: 10px;

width: 150px;

}

#menu ul a:hover

{

background: #9A1B19;

background: -moz-linear-gradient(#562F24,  #9A1B19);

background: -webkit-gradient(linear, left top, left bottom, from(#562F24), to(#9A1B19));

background: -webkit-linear-gradient(#562F24,  #9A1B19);

background: -o-linear-gradient(#562F24,  #9A1B19);

background: -ms-linear-gradient(#562F24,  #9A1B19);

background: linear-gradient(#562F24,  #9A1B19);

}

#menu ul li:first-child a

{

-moz-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

}

#menu ul li:first-child a:after

{

content: '';

position: absolute;

left: 30px;

top: -8px;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 8px solid #874006;

}

#menu ul li:first-child a:hover:after

{

border-bottom-color: #5D2D23;

}

#menu ul li:last-child a

{

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

#menu:after

{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

* html #menu             { zoom: 1; } /* IE6 */

*:first-child+html #menu { zoom: 1; } /* IE7 */

#menu ul li:first-child a:after

{

content: '';

position: absolute;

left: 30px;

top: -8px;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 8px solid #BF6306;

}

#menu ul li:first-child a:hover:after

{

border-bottom-color: #5D2D23;

}

* html #menu             { zoom: 1; } /* IE6 */

*:first-child+html #menu { zoom: 1; } /* IE7 */

</style><ul id="menu">

<li><a href="#">ГЛАВНА</a></li>

<li>

<a href="#">КАТЕГОРИИ</a>

<ul>

<li><a href="#">Виджети</a></li>

<li><a href="#">Украшения</a></li>

<li><a href="#">Настройка</a></li>

<li><a href="#">Допълнения</a></li>

<li><a href="#">Програми</a></li>

</ul>

</li>

<li><a href="#">РОК'Н'РОЛЛ</a>

<ul>

<li><a href="#">Музика</a></li>

<li><a href="#">Албуми</a></li>

<li><a href="#">Биографии</a></li>

</ul>

</li>

<li><a href="#">ЗА ПРОЕКТА</a>

<ul>

<li><a href="#">За нас</a></li>

</ul>

</li>

<li><a href="#">КОНТАКТИ</a></li>

</ul>

Вертикално меню, тип акордеон

Лесно се вгражда в притурка HTML/JavaScript, разполага се в желано от вас място в страничните колони. Можете да го видите тук, като Меню – 4. Пести място и е компактно.

Кодът е:

<style>

#mymenu  {

width: 200px;

margin: 0 auto;

}

#mymenu .mydiv {

width: 200px;/*ширина всего меню*/

transition: height ease-in-out 500ms;

-o-transition: height ease-in-out 500ms;

-moz-transition: height ease-in-out 500ms;

-webkit-transition: height ease-in-out 500ms;

border-radius: 15px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}

.mydiv h3{height: 45px;

cursor:pointer;

margin: 0 0 0 0;

text-align: center;

color:white;padding: 12px 0px 0px 0px;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

background: #669933;/*цвет наружного меню*/

}

#mymenu p {

text-align: center;

margin: 0 0 1px 0;

height: 0px;

overflow: hidden;

transition: height ease-in-out 500ms;

-o-transition: height ease-in-out 500ms;

-moz-transition: height ease-in-out 500ms;

-webkit-transition: height ease-in-out 500ms;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

background: #99cc66; /*цвет фона внутреннего меню*/

filter: progid:DXImageTransform.Microsoft.gradient

( startColorstr='#E1A3370', endColorstr='#E1A337',GradientType=0 );

}

#mymenu p:hover {

background: #bfff7f;

cursor:pointer;

}

#mymenu div:hover  > p {

height: 45px;padding: 12px 0px 0px 0px;

}

* html #mymenu .mydiv  {

filter: progid:DXImageTransform.Microsoft.gradient

(startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 );

height: 45px;

overflow: hidden;

forIE: expression(

onmouseover = function()  {this.className += ' hover'},

onmouseout = function() {this.className = this.className.replace('hover', '')}

);

}

* html #mymenu .mydiv.hover  {

height: auto;

}

#mymenu p a {

color:white;

}

</style>

<div  id="mymenu">

<div class="mydiv">

<h3 >Меню 1</h3>

<p><a href = "#">Подменю1</a></p>

<p><a href = "#">Подменю2</a></p>

</div>

<div class="mydiv">

<h3>Меню 2</h3>

<p><a href = "#">Подменю1</a></p>

<p><a href = "#">Подменю2</a></p>

<p><a href = "#">Подменю3</a></p>

</div>

<div class="mydiv">

<h3>Меню 3</h3>

<p><a href = "#">Подменю1</a></p>

<p><a href = "#">Подменю2</a></p>

<p><a href = "#">Подменю3</a></p>

<p><a href = "#">Подменю4</a></p>

</div>

<div class="mydiv">

<h3>Меню 4</h3>

<p><a href = "#">Подменю1</a></p>

<p><a href = "#">Подменю2</a></p>

<p><a href = "#">Подменю3</a></p>

<p><a href = "#">Подменю4</a></p>

<p><a href = "#">Подменю5</a></p>

</div></div>

Експериментирайте, приятели. Изберете най-подходящото за вас. Направете необходимите настройки.
Още видове менюта, с които ще промените своя дизайн, ще ви представя в следваща публикация.

Успех!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: