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

Простое вертикальное меню с лёгким движением вкладок

меню
Привет, друзья. Очередная шпаргалка как сделать простое вертикальное меню в сайдбаре блога. Но, чтобы оно не было совсем скучным, придадим ему немного уникальности. Заставим подвигаться сами вкладки и создадим эффект тени.
Код  меню совершенно простой и устанавливается в гаджет HTML/JavaScript. Меняя стили CSS можно легко подогнать его под дизайн вашего блога. Посмотрите здесь о чём идёт речь и ниже разберём что к чему.

Код.
<style>#spisok-menu {  }
#spisok-menu ul { list-style:none; }
#spisok-menu ul li { font-family:Georgia,serif,Times; font-size:18px; }
#spisok-menu ul li a { display:block; width:320px; height:28px; background-color:#6699CC; border-left:4px solid #CCCCFF ; border-right:4px solid #CCCCFF ; padding-left:10px;
        text-decoration:none; color:#ffffff; }
#spisok-menu ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 15px #003366 ;
        -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 15px #003366 ;
        transform:rotate(-5deg); box-shadow:10px 10px 15px # 003366; }</style>

<div id="spisok-menu">
<ul>
<li><a href="#">Вкладка 1</a></li>
<li><a href="#">Вкладка 2</a></li>
<li><a href="#">Вкладка 3</a></li>
<li><a href="#">Вкладка 4</a></li>
<li><a href="#">Вкладка 5</a></li>
</ul>
</div>

width:320px; height:28px;- ширина и высота вкладок.

background-color:#6699CC;- цвет вкладки.

border-left:4px solid #CCCCFF ; border-right:4px solid #CCCCFF ; - ширина и цвет правого и левого бортиков.

color:#ffffff; font-size:18px; - цвет и размер шрифта вкладок меню.

box-shadow:10px 10px 15px #003366 ; ширина и цвет тени.

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

<li><a href="#">Вкладка 5</a></li>

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

Спасибо всем за внимание и до встречи.

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

Введите Ваш email


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

  1. Вика, привет. Спасибо. Воспользовалась твоей шпаргалкой.

    ОтветитьУдалить
    Ответы
    1. Люба. как всегда обещаю потом заглянуть посмотреть, что ты навыдумываешь.

      Удалить
  2. Виктория, я не поняла, что это за меню. Для чего оно? Так можно страницы в блоге оформить?

    ОтветитьУдалить
  3. Да, Ирина. Я не зря дала ссылку на страницы. В это меню именно их и вставляешь- - нажимаешь на просмотр опубликованной страницы в браузере копируешь её URL (адрес) вместо решёток его вставляешь. И название соответственно. Все предлагаемые менюшки так и делаются.

    ОтветитьУдалить
  4. Виктория, я использовала твою форму для связи! Написала тебе письмо. Оно тебе придет или мне?

    ОтветитьУдалить
  5. Ирина, конечно мне.

    ОтветитьУдалить
  6. Честно в восторге, очень крутое меню, обязательно буду думать какие из, боковых ссылок, заменить на это прекрасное ❤❤❤, меню. Оч. круто!�� ������

    ОтветитьУдалить
  7. Накрутка В Инстаграм, благодарю Вас за отзыв. Меню красиво смотрится в таком варианте.

    ОтветитьУдалить
  8. Симпатично, очень даже. Аж себе захотелось) И снежный фон в твоем тестовом блоге прям заворожил, красиво смотрится.

    ОтветитьУдалить
    Ответы
    1. Привет, Наташа. Попробуй сделать. Посмотришь как в блоге впишется. А фон в блоге на заднем фоне самой нравится. Только у меня на этом столько всего, что-побаиваюсь.

      Удалить
  9. Спасибо интересно, щас блог один переехал у меня на вордпресс, но вот на другом блогерском, обязательно попробую.

    ОтветитьУдалить
    Ответы
    1. Попробуйте. К тому жеэто совсем не сложно.

      Удалить

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