Простое выпадающее меню для рубрик.



Незамысловатое навигационное меню для списка категорий или ярлыков. В функционале Блогспот есть возможность присваивать ярлыки или метки для сообщений.Что позволяет создавать категории блога и систематизировать все сообщения в рубрики соответствующей тематики.По умолчанию рубрики или ярлыки можно выводить в виде раскрывающего списка или облака меток,что мало функционально и не эстетично.



Избавиться от стандартных решений и сделать нечто оригинальное можно с помощью простого выпадающего меню рубрик,где будут размещены наиболее часто встречающиеся ярлыки.Каждый ярлык присваиваемый сообщению ведёт на определённую вкладку,где будут расположенные только сообщения соответствующей тематики.Поэтому изначально не стоит присваивать сообщениям большое количество ярлыков,чтобы впоследствии их можно было систематизировать.

Установка кода меню навигации для рубрик.


Установка кода для меню рубрик идентична практически вставке любого другого кода.У нас есть две части кода которые нужно будет разместить там,где они должны находиться согласно установленным правилам.Итак первая часть это CSS.По хорошему этот код нужно вставить в шаблон блога перед закрывающим тегом ]]></b:skin>,но также можно всё сразу вставить в гаджет .

Настройки меню для рубрик.


Вторая часть код HTML после добавления ссылок и названий категорий рубрик соответствующих вашим ярлыкам,присвоенных вами ранее сообщениям соответствующей тематики.Его следует вставить в гаджет HTML в том месте,где по вашему определению,должен быть расположено навигационное меню для рубрик вашего блога.


<style type="text/css">
  /* === Основные стили для меню рубрик  === */
  .spmenu, .spsubmenu {
    list-style-type: none; /* убираем маркеры */
    padding: 0; /* убираем отступы внутри */
    margin: 0; /* убираем отступы снаружи */
  }
  .spmenu li a {
    text-decoration: none; /* убираем подчеркивание ссылок */
    color: #551A8B; /* задаем цвет текста */
    padding: 5px 10px; /* задаем отступы */
    display: inline-block; /* задаем стиль отображения ссылок */
  }
  .spmenu>li {
    float: center; /* выстраиваем элементы меню по горизонтали */
    text-align: center; /* выравниваем текст по центру */
    font-size:22px;    /*размер текста кнопки*/
    margin: 1px; /* внешний отступ */
    border: 3px solid #C1CDC1; /* границы элементов меню I уровня */

  }
  .spmenu>li {
    background: #7ACcfc; /* цвет фона элементов меню I уровня */
  }
  .spsubmenu {
    clear: both; /* запрет обтекания */
    position: absolute; /* делаем элемент плавающим */
    visibility: hidden; /* скрываем элемент меню II уровня */
    opacity: 0.0; /* даем меню II уровня полную прозрачность */
  }
  .spsubmenu>li {
    background: #fff; /* цвет фона элементов меню II уровня */
    border: 3px solid #C1CDC1;
    font-size:18px;    /*размер текста кнопки*/
  }
  .spmenu>li:hover {
    background: #DDA0DD; /* цвет фона элементов меню I уровня после наведения курсора */
  }
  .spmenu>li:hover .spsubmenu {
    visibility: visible; /* отображаем элементы меню II уровня */
    opacity: 1.0; /* убираем прозрачность элементов меню II уровня */
  }
  .spsubmenu {
    border: 1px solid #009990; /* границы меню II уровня */
  }
  .spsubmenu>li:hover {
    background: #FF83FA; /* цвет фона подменю при наведении курсора */
  }

  /* === Тень на CSS3 === */
  .spsubmenu, .spmenu>li {
    box-shadow: 10px 5px 10px #999999; /* CSS3 */
    -o-box-shadow: 10px 5px 10px #999999; /* Opera 11- */
    -moz-box-shadow: 10px 5px 10px #999999; /* Mozilla-браузеры (Firefox) */
    -webkit-box-shadow: 10px 5px 10px #999999; /* Webkit-браузеры (Chrome) */
    -khtml-box-shadow: 10px 5px 10px #999999; /* Khtml-браузеры (Konqueror)*/
    -ms-box-shadow: 10px 5px 10px #999999; /* IE 10+ */
  }
  /* === Анимация на CSS3 === */
  .spsubmenu, .spmenu li {
    transition: all 700ms; /* CSS3 */
    -o-transition: all 700ms; /* Opera 11- */
    -moz-transition: all 700ms; /* Mozilla-браузеры (Firefox) */
    -webkit-transition: all 700ms; /* Webkit-браузеры (Chrome) */
    -khtml-transition: all 700ms; /* Khtml-браузеры (Konqueror)*/
    -ms-transition: all 700ms; /* IE 10+ */
  }
}
</style>

НТМЛ-код
<ul class="spmenu">
<li>ссылка</li>
<li> <ul class="spsubmenu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li> <ul class="spsubmenu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li><<ul class="spsubmenu">
<li></li>
<li>ссылка</li>
</ul>
</li>
</ul>

Смотреть ещё

Слайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода

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