Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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

Всем, доброго времени суток. Для более удобной навигации по блогу, так же как ярлыки и страница содержание, меню является очень важным элементом. Сейчас можно найти  достаточно много красивых меню. На любой вкус и цвет. Сегодня хочу предложить 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. Такая менюшка вообще выход из положения, когда блог с массой страниц и ещё на подрубрики разбит. Конечно всё туда впихнуть можно и гаджет не нужен. удачи. Отпишитесь если сделаете, пожалуйста.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML