Вертикальное меню, типа "Аккордеон" для Блогспот, Блоггер


Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

Получил я в комментариях заявку: "Подскажите, а у вас нет случайно скрипта для вертикального меню, типа Аккордеон?" И появилась у меня идея опубликовать пост на эту тему.


Как выглядит меню, можно посмотреть на тестовом блоге:
http://blogodeltest2.blogspot.com/

Сам скрипт вставляется просто: надо добавить код: В Дизайн - Добавить гаджет - HTML/JavaScript (жёлтый фон это цвет меню, который можно поменять).

<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: #999999;/*цвет наружного меню*/ 
}
#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: #cccccc; /*цвет фона внутреннего меню*/
filter: progid:DXImageTransform.Microsoft.gradient
        ( startColorstr='#E1A3370', endColorstr='#E1A337',GradientType=0 );
}

#mymenu p:hover {
 background: #999999;
 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/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>
        </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>

29 коммент.:

Дмитрий Геннадьевич
Justus
Дмитрий Геннадьевич
Альбина Рассеина
Justus
блог Татьяны Коноваловой
Justus
Антонова Екатерина Ивановна
Justus
Антонова Екатерина Ивановна
Бахарев Роман
Ирина Топчий
Денис Бусько
Justus
Muranofox
Justus
Виталий Петров
Irina Nik
Irina Nik
БДОУ ДЮСШ
Ольга Здановская
Наталия Смирнова
Наталия Смирнова
Elena Markovski
Justus
Виктория
Наталья
Татьяна Лапкина
Вика

Отправить комментарий

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

Плюсани блог!