Вертикальное меню New

выпадающее вертикальное меню

Простое выпадающее вертикальное меню на CSS,но с уникальным оформлением,которое можно отредактировать под свой дизайн.Как установить меню навигации и где отредактировать стили меню. Всё это можно узнать из этой статьи и через несколько минут установить себе на страницу стильное и функциональное меню с выпадающим списком под категорий.



Установка кода меню.


Важно! Прежде чем установить себе на страницу такого вида вертикальное меню следует обратить внимание на другой пост Установка кода кнопки вместо read more.Так как стили оформления выпадающего меню будут совпадать и прежде чем установить себе такой вид навигации следует определиться с выбором.Так как этот стиль можно будет задать многим элементам оформления на вашем блоге:

Так же этот стиль можно применить и к основному меню или к оформления дизайна заголовка страницы изменив немного оболочку кода,но об этом постараюсь написать позже,а пока перейдём к вертикальному выпадающему меню.


Здесь на странице приведён полный код для установки,но если вы всё же решите кардинально изменить весь дизайн,то эту часть кода CSS следует установить лишь один раз.Пример работы меню для рубрик вверху.

.jump-link a{ background-color:#408080; font-family: 'Verdana', sans-serif; font-size:12px;font-weight:bold; text-decoration:none; color:#fff; position:relative; padding:5px 20px; padding-right:30px; background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%); border-radius: 10px; box-shadow: inset 0px 1px 0px #9e8d84, 0px 3px 0px 0px #ccc, 0px 10px 5px #408080;opacity:0.9; }
Для всех же остальных можно будет просто скопировать код CSS и установить в шаблон блога перед ]]></b:skin>.Также следует учитывать,что в этом случае вместо разделителя Читать дальше у вас автоматически появиться кнопка такого же вида,как и кнопка для меню.Если же нет желания менять что либо,то следует присвоить вместо jump-link присвоить другой класс,то есть поменять эту фразу на любую другую типа gggg. При изменении класса так же следует внести изменение в контейнер <div class='jump-link'>.

Популярные сообщения

Код CSS и HTML для вертикального списка меню.

CSS код.

<style type="text/css">
.jump-link a{ background-color:#408080; font-family: 'Verdana', sans-serif; font-size:16px;font-weight:bold; text-decoration:none; color:#fff; position:relative; padding:5px 20px; padding-right:30px; background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%); border-radius: 10px; box-shadow: inset 0px 1px 0px #9e8d84, 0px 3px 0px 0px #ccc, 0px 10px 5px #408080;opacity:0.9; }
#mnv-gol {
list-style:none;
margin:0px;
padding:0px;
}
#mnv-gol li {
float:center;
height:0;
width:200px;
text-align:center;
position:relative;
margin:0px;
padding:3px;
}
#mnv-gol li ul {
list-style:none;
width:0;
position:absolute;
left:0;
top:5px;
display:none;
margin:10px;
padding:0;
}
#mnv-gol li ul li {
float:none;z-index:500;
height:20px;
width:200px;
text-align:left;
margin:15px;
}
#mnv-gol li:hover ul {
display:block;
}
</style>





Количество ссылок может быть разным и изменять его можно убирая или добавляя фрагмент кода такого вида. <li><a href="ссылка">Blogspot</a></li>Дизайн оформления цвета кнопки можно поменять изменив значение background-color:#408080; на своё исходя из цветовой гаммы вашего блога.


HTML код

<div class="jump-link">
<ul id="mnv-gol">
<li><a href="ссылка">♂ Рубрики ♂</a>
<ul>
<li><a href="ссылка">Blogspot</a></li>
<li><a href="ссылка">Эффекты CSS</a></li>
<li><a href="ссылка">JavaScript</a></li>
<li><a href="ссылка">Query</a></li>
<li><a href="ссылка">Деньги</a></li>
</ul>
</li>
</ul></div>


Отправить комментарий