Простое вертикальное меню в сайдбаре блога. Заставим подвигаться сами вкладки и создадим эффект тени.
Код меню совершенно простой и устанавливается в гаджет HTML/JavaScript. Меняя стили CSS можно легко подогнать его под дизайн вашего блога. Посмотрите здесьhttp://n-t-b-b.blogspot.ru/2016/12/blog-post_12.html о чём идёт речь и ниже разберём что к чему.
Код.
<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>
http://www.shpargalochki.ru/2016/12/prostoe-vertikalnoe-menju.html
0 коммент.:
Отправить комментарий