Випадаюче меню

Дуже цікава тема! Думала над нею з самого початку створення блогів. І от знайшла сьогодні цікаву річ! Для встановлення такого меню потрібна правка самого шаблону блогу, щоб задати стилі CSS віджету. Звісно, спочатку зроблю резервну копію, а тоді розпочну експериментувати)

Заходжу в Дизайн - Змінити HTML і в коді шаблону знаходжу рядок </b:skin> , перед яким вставлю такий код:

/* Главное меню */  

  

#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 */ 

Збережу. Згодом в тому місці, де буде віджет, впишу саму структуру меню. Віджет можна розмістити над контентом блогу зверху наприклад, за допомогою гаджета HTML/JavaScript або прописати його розміщення в самому шаблоні. Рівні і вкладення, звісно, пишемо свої. Замість # - посилання на свої сторінки

Структура меню

<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>  

        </ul>  

  </li>  

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

  <ul>  

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

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

  </ul>  

  </li>  

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

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

</ul>