0

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

Вертикално меню
Здравейте, приятели. Варианти в дизайн на блога, като навигационното му меню, можете да намерите в изобилие в 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>



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

    Успех!


    Няма коментари :

    Публикуване на коментар

    Ако имате необходимост да вмъкнете HTML код в коментара си, моля използвайте един от инструментите в основното меню - Конвертор на HTML кодове.


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | All Rights Reserved