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

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

Ничего сложного с установкой нет. Код устанавливается через гаджет 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


16 комментариев:

  1. Виктория, с праздником! С Международным Днем Блоггера! УРА!

    ОтветитьУдалить
  2. Спасибо, Ирина. И Вас тоже с праздником.

    ОтветитьУдалить
  3. Вик! А как вставить архив на страницу. У меня "официальный" гаджет( родной блогерский) А у тебя? Я бы очень хотела архив тоже вот так расположить , только в нижней меню. Очень здорово- уберется с "С/бара"

    ОтветитьУдалить
  4. Вика! И еще очень важно! У меня гаджет "Содержание" публикует только последние посты. Это так и должно быть? Всех постов за всё время там не отражено!

    ОтветитьУдалить
  5. Ирина, архив и содержание это не страницы. Они просто отдельные родные гаджеты и ни как не страницы. Их вставить в в список страниц нельзя. ира, объясни мне где я могу увидеть твой гаджет содержание. Извини, я не совсем понимаю о чём идёт речь.

    ОтветитьУдалить
  6. У меня не заработал. А мой перестал работать летом и не пойму почему...

    ОтветитьУдалить
  7. Tanya, если Вы имеете ввиду содержание и у вас там была картра блога-это беда у всех. Я уже сама всё это просто руками добавляю. Так надёжнее.

    ОтветитьУдалить
  8. Виктория, я ничего не поняла, к сожаленью! Что и куда вставлять, вместо чего и как называть...Я обычный педагог и далека от информатики. А этот язык HTML-вообще никак. Если вы можете обьяснить, ну как для детей-пошагово, то пожалуйста, пожалуйста!!! на вас одна надежда!Пожалуйста!

    ОтветитьУдалить
  9. Светлана в Вашем блоге уже созданы страницы (это те же вкладки) вверху под шапкой блога. Если вы нажимаете на вкладку , допустим Обо мне, вверху в строке браузера её адрес или ещё это называется URL. У Вас он такой http://radugaslonim.blogspot.ru/p/blog-page_62.html.
    И так у всех других вкладок, которые вы и создали в гаджете страницы.
    Теперь, чтобы сделать меню копируйте предложенный код в блокнот или черновик в блоггере.
    То, что в коде я отметила синим цветом (решётки) - аккуратно удаляете и вместо них вставляете этот адрес страницы http://radugaslonim.blogspot.ru/p/blog-page_62.html и вместо того что отмечено розовым название своей страницы. И так со всеми.
    когда весь код у Вас будет готов, устанавливаете его в гаджет HTML/JavaScript и перемещаете его под шапку блога.
    Дайте мне свой эл. адрес. Вышли Вам для понимания готовый код по вашим страницам.

    ОтветитьУдалить
    Ответы
    1. Пробовала сама-ничего не получилось.Добавились дубликаты страниц под шапкой без выпадающего меню. Эти подстраницы в меню тоже как-то сохранять надо?
      Мой адрес: rosaxsvet@mail.ru

      Удалить
  10. Написала Вам на почту.

    ОтветитьУдалить
    Ответы
    1. Виктория, извините, пожалуйста, но письмо где-то затерялось.Отправьте, пожалуйста ещё раз.

      Удалить
  11. Проработал варианты Меню. Очень красиво! Но заменить Меню страницы (стандартный виджет) не вышло. Теряется работа с Андроида... Так что оставил Меню в боковом баре как мы обсуждали ранее. Кстати из-за этого убрал новые Шаблоны. Тоже плохо работают с Андроида....

    ОтветитьУдалить
    Ответы
    1. Light Warrior, сходила к Вам в гости. Спасибо за некоторые пояснения, нужно будет учесть. А так у Вас очень миленько стало. А я что - то совсем ещё не приглядывалась особо к новым шаблонам. Так поперебирала немного.

      Удалить
  12. Новые шаблоны на ББ отличны. Хороший журнальный вариант. Но на Андроиде это кошмар. Плюс очень сложен переход, все слетает. Поигрался и перешел на обычные.

    ОтветитьУдалить
    Ответы
    1. А мне вот честно говоря даже внешне не очень они понравились. Возможно поработать и подогнать что - то.
      А вроде как адаптивые для всех устройств. Пока некогда копаться в них.

      Удалить

Пользовательский поиск
Foto Saya
My Photo