Горизонтальное выпадающее меню в блоге.

Привет, друзья. Сделаем сегодня красивое горизонтальное меню с выпадающими вкладками. Информация в блоге постоянно накапливается и иногда, для лучшей навигации, есть смысл добавить в пункты меню ещё и открывающиеся вкладки, подпункты.
Здесь вариант вертикального меню с вкладками. Само по себе оно достаточно компактное, а при наведении курсора откроется ещё ссылки на нужные разделы блога. Посмотрите, пожалуйста, как вариант, на тестовом блоге ниже бегущих новостей. 
Ничего сложного с установкой нет. Код устанавливается через гаджет HTML/JavaScript. Для начала советую скопировать предложенный код в черновик или блокнот и сделать свои настройки.

<style>nav {
  font:bold 11px Arial,Sans-Serif;  
  text-transform:uppercase;
}

nav ul {
  background-color:#336666 ;
  color:white ;
  margin:0px 0px;
  padding:0px 0px;
  height:30px;  
}

nav li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  position:relative;  
}

nav li a {
  display:block;
  text-decoration:none;
  color:#FFF  ;
  line-height:30px;
  padding:0px 15px;  
}

nav li a:hover,
nav li:hover > a {
  background-color: #99CCCC ;
  color:white;  
}

nav li ul {
  position:absolute;
  top:100%;
  left:0px;
  z-index:99;
  width:200px;
  height:auto;
  display:none;  
}

nav li ul li {
  float:none;
  display:block;  
}

nav li ul ul {
  top:0px;
  left:100%;  
}

nav li:hover > ul {
  display:block;
}</style>

<nav>
    <ul>
        <li><a href="## # ">Главная</a></li>
        <li><a href="## #  ">Содержание</a></li>
        <li><a href="## # ">Архив</a>
            <ul>
                <li><a href="## #">гаджеты</a></li>
                <li><a href="## # ">дизайн</a>
                    <ul>
                        <li><a href=" ## #">2013</a></li>
                        <li><a href="## # ">2014</a></li>
                        <li><a href="## # ">2015</a></li>
                    </ul>
                </li>
                <li><a href="## # ">январь</a></li>
                <li><a href="## # ">февраль</a></li>
                <li><a href=" ## #">март</a></li>
            </ul>
        </li>
        <li><a href="## # ">Контакты</a></li>
    </ul>
</nav>

Вместо решёток вставляйте адреса своих страниц, добавляйте пункты меню при необходимости-

 <li><a href="## #  ">Содержание</a></li>

Подпункты, соответственно.

 <li><a href=" ## #">2013</a></li>

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

Готовый код устанавливаем в гаджет и перемещаем под заголовок блога.

В Блоггере может возникнуть проблема, с выпадающим меню, которое расположено именно под заголовком блога. Решение в этом сообщении

Не смею больше занимать ваше драгоценное время. Спасибо, что читаете мои шпаргалки. До новых встреч. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email