Привет, друзья. Очередная шпаргалка как сделать простое вертикальное меню в сайдбаре блога. Но, чтобы оно не было совсем скучным, придадим ему немного уникальности. Заставим подвигаться сами вкладки и создадим эффект тени.
Код меню совершенно простой и устанавливается в гаджет HTML/JavaScript. Меняя стили CSS можно легко подогнать его под дизайн вашего блога. Посмотрите здесь о чём идёт речь и ниже разберём что к чему.
Код.
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 ; ширина и цвет тени.
Вместо решёток вставляйте адреса ваших страниц. Вкладка - это название соответствующей страницы. Для начинающих блогеров хочу посоветовать прочитать статью о страницах в блоге.
Добавляйте при необходимости дополнительные пункты меню используя строку -
К вышеизложенному добавить больше нечего. Сложного в создании вертикального меню с движением вкладок ничего нет. Если устраивает вас такой вариант - приступайте к реализации. Если остались вопросы, задавайте в комментариях к посту.
Спасибо всем за внимание и до встречи.
Код меню совершенно простой и устанавливается в гаджет 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>
#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>
К вышеизложенному добавить больше нечего. Сложного в создании вертикального меню с движением вкладок ничего нет. Если устраивает вас такой вариант - приступайте к реализации. Если остались вопросы, задавайте в комментариях к посту.
Спасибо всем за внимание и до встречи.
здесь можно оформить подписку на новые шпаргалки
Вика, привет. Спасибо. Воспользовалась твоей шпаргалкой.
ОтветитьУдалитьЛюба. как всегда обещаю потом заглянуть посмотреть, что ты навыдумываешь.
УдалитьВиктория, я не поняла, что это за меню. Для чего оно? Так можно страницы в блоге оформить?
ОтветитьУдалитьДа, Ирина. Я не зря дала ссылку на страницы. В это меню именно их и вставляешь- - нажимаешь на просмотр опубликованной страницы в браузере копируешь её URL (адрес) вместо решёток его вставляешь. И название соответственно. Все предлагаемые менюшки так и делаются.
ОтветитьУдалитьВиктория, я использовала твою форму для связи! Написала тебе письмо. Оно тебе придет или мне?
ОтветитьУдалитьИрина, конечно мне.
ОтветитьУдалитьЧестно в восторге, очень крутое меню, обязательно буду думать какие из, боковых ссылок, заменить на это прекрасное ❤❤❤, меню. Оч. круто!�� ������
ОтветитьУдалитьНакрутка В Инстаграм, благодарю Вас за отзыв. Меню красиво смотрится в таком варианте.
ОтветитьУдалитьСимпатично, очень даже. Аж себе захотелось) И снежный фон в твоем тестовом блоге прям заворожил, красиво смотрится.
ОтветитьУдалитьПривет, Наташа. Попробуй сделать. Посмотришь как в блоге впишется. А фон в блоге на заднем фоне самой нравится. Только у меня на этом столько всего, что-побаиваюсь.
УдалитьСпасибо интересно, щас блог один переехал у меня на вордпресс, но вот на другом блогерском, обязательно попробую.
ОтветитьУдалитьПопробуйте. К тому жеэто совсем не сложно.
Удалить