Три вертикальных меню для блога

вертикальное меню для блога>Всем доброго времени суток. Для более удобной навигации по блогу так же как ярлыки и страница содержание, меню является очень важным элементом. Сейчас можно найти  достаточно много красивых меню . На любой вкус и цвет. Сегодня хочу предложить 3 варианта вертикального меню, которые можно установить в боковой панели блога через гаджет HTML/JavaScript. 

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

Очень простое в установке вертикальное меню. При наведении курсора цвет  вкладки меняется. Работу такого блока меню можно посмотреть здесь


А теперь код для него
<center><style>
.btrix_blockmenu{
font: bold 14px Germand;
width: 220px; 
}
.btrix_blockmenu ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.btrix_blockmenu ul li{
margin:0;
padding:0;
}
.btrix_blockmenu ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; 
-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); 
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; 
-moz-transition: all 0.2s ease-in-out; 
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btrix_blockmenu ul li a:hover, .btrix_blockmenu ul li a.selected{
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); 
-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
}
</style>

<div class="btrix_blockmenu">
<ul>
<li><a href="http://hpargallka.blogspot.ru/">главная страница</a></li>
<li><a href="http://hpargallka.blogspot.ru/p/srchttpdl.html">содержание</a></li>
<li><a href="http://hpargallka.blogspot.ru/p/blog-page_29.html">будем знакомы</a></li>
<li><a href="http://hpargallka.blogspot.ru/p/blog-page_2746.html">форма связи</a></li>
<li><a href="http://hpargallka.blogspot.ru/p/blog-page_18.html">генератор цвета</a></li>

</ul>
</div></center>

Всё, что выделено красным меняйте на адрес своих страниц и зелёным название страниц соответственно. Ширину width: 220px так же можно регулировать.

Меню прокрутки. Как оно работает также можно увидеть на тестовом блоге(ссылка выше)


<div style="padding-right: 10px; padding-left: 30px; padding-bottom: 10px; overflow: auto; width: 245px; padding-top: 10px; height: 141px" 1px="1px" solid="solid">   <ul>
    <p><a href="####">название</a> </p>
    <p><a href="####">название</a> </p>
    <p><a href="####">название</a> </p></ul>
</div>
Здесь, всё что выделено красным адрес страницы и ваше название.  width: 245 и ширину height: 141 подгоняйте под размеры блога.

В данный код можно сколько угодно добавлять нужных пунктов. Для этого просто добавить соответственно вот такую строку <p><a href="####">название</a> </p>

Ну и чтобы не писать отдельный пост  совсем простое скролл -меню. Достаточно компактное  на то случай если совсем уж нет места в боковой панели.




А это его код

<div 1px="1px" solid="solid" style="height: 141px; overflow: auto; padding-bottom: 10px; padding-left: 30px; padding-right: 10px; padding-top: 10px; width: 245px;">
<ul>
    <a href="####">название</a> <br />

    <a href="####">название</a> <br />

    <a href="####">название</a> <br />

    <a href="####">название</a> <br />


  </ul>
</div>
</div>

Всё, что выделено красным адрес страницы меню, зелёным-её название. А вот как создать совсем необычное анимированное меню, прочитайте в этом сообщении.На этом сегодня всё.

Желаю всем хорошего весеннего настроения.
Удачи нам всем.

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

введите пожалуйста свой email :

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

  1. Думаю, что мне скоро понадобится третий вариант. Спасибо Вика, забираю)))

    ОтветитьУдалить
  2. Ирина, привет. Ну для любителей минимализма это самое то. Забирай.

    ОтветитьУдалить
  3. В любом деле если сесть и разобраться можно сделать такую красоту)))

    ОтветитьУдалить
  4. madonna4ka верно сказано.

    ОтветитьУдалить
  5. Рассмотрел Ваше Меню, Первый Вариант. Получилось неплохо. Соединил со статическими страницами и скриптом. Вышел подраздел блога. СМ. https://hermesmdm.blogspot.com/ В боковой Панели Раздел ART Избавило меня от разрастания Меню страниц))))

    ОтветитьУдалить
    Ответы
    1. Light Warrior, очень интересное решение нашли . Не плохо получилось.

      Удалить
  6. Решение нашли Вы!)))) Хотел Сделать 2 таких Меню, но получилось Некрасиво.

    ОтветитьУдалить
  7. Да 2 меню, скорее всего не красиво получается. А может менюшку выпадающую сделать.
    http://www.shpargalochki.ru/2017/01/gorizontalnoe-fiksirovannoe-vypadajushhee-menju.html или
    http://www.shpargalochki.ru/2017/03/ne-vypadaet-vypadayushee-menyu-v-bloggere.html
    или вертикальное аккордеон http://www.shpargalochki.ru/2017/04/vertikalnoe-menyu-akkordion-dlya-bogger.html

    ОтветитьУдалить
  8. Меню выпадающее - Отличная Идея. Покручу. Интересно, что она все время висит. Она может полносью Заменит Виджет Страницы.

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

      Удалить

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