Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  суббота, июля 16, 2011  

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

Пример этого замечательного меню вы можете подсмотреть в верхней части изображения:

Выпадающее меню в блог только на CSS

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

Выпадающее меню в блог
Для установки меню потребуется правка самого шаблона блога, дабы задать стили CSS виджету. Перед внесением изменений в Blogger создайте резервную копию шаблона и приступайте. Проследуйте Дизайн > Изменить HTML и в коде шаблона найдите строку </b:skin>, перед которой добавьте:
/* Главное меню */

#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #874006;
background: -moz-linear-gradient(#BF6306, #874006);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #874006),color-stop(1, #BF6306));
background: -webkit-linear-gradient(#BF6306, #874006);
background: -o-linear-gradient(#BF6306, #874006);
background: -ms-linear-gradient(#BF6306, #874006);
background: linear-gradient(#BF6306, #874006);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #874006;
-webkit-box-shadow: 0 2px 1px #874006;
box-shadow: 0 2px 1px #874006;
}

#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
}

#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #ffffff;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
color: #fafafa;
}

*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}

#menu li:hover > ul
{
display: block;
}

/* Подменю */

#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #BF6306;
background: -moz-linear-gradient(#BF6306, #783B08);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #783B08),color-stop(1, #BF6306));
background: -webkit-linear-gradient(#BF6306, #783B08);
background: -o-linear-gradient(#BF6306, #783B08);
background: -ms-linear-gradient(#BF6306, #783B08);
background: linear-gradient(#BF6306, #783B08);
-moz-border-radius: 5px;
border-radius: 5px;
}

#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#menu ul a
{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu ul a /* IE6 */
{
height: 10px;
width: 150px;
}

*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
width: 150px;
}

#menu ul a:hover
{
background: #9A1B19;
background: -moz-linear-gradient(#562F24,  #9A1B19);
background: -webkit-gradient(linear, left top, left bottom, from(#562F24), to(#9A1B19));
background: -webkit-linear-gradient(#562F24,  #9A1B19);
background: -o-linear-gradient(#562F24,  #9A1B19);
background: -ms-linear-gradient(#562F24,  #9A1B19);
background: linear-gradient(#562F24,  #9A1B19);
}

#menu ul li:first-child a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;

border-bottom: 8px solid #874006;
}

#menu ul li:first-child a:hover:after
{
border-bottom-color: #5D2D23;
}

#menu ul li:last-child a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

#menu ul li:first-child a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #BF6306;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #5D2D23;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
Сохраните шаблон.
Как можно заметить, букаф достаточно, тем не менее, здесь прописаны все свойства нашего меню, без внесения дополнительных скриптов и изображений.

Остается в том месте, где будет распологаться виджет, вписать саму структуру меню. Виджет можно расположить над контентом блога вверху, например, с помощью гаджета HTML/JavaScript, либо прописывать его местоположение непосредственно в шаблоне.

Структура меню:
<ul id="menu">
  <li><a href="#">ГЛАВНАЯ</a></li>
  <li>
  <a href="#">КАТЕГОРИИ</a>
        <ul>
        <li><a href="#">Виджеты</a></li>
        <li><a href="#">Украшения</a></li>
        <li><a href="#">Настройка блога</a></li>
        <li><a href="#">Сервисы</a></li>
        </ul>
  </li>
  <li><a href="#">РОК'Н'РОЛЛ</a>
  <ul>
        <li><a href="#">Музыка</a></li>
        <li><a href="#">Биографии</a></li>
  </ul>
  </li>
  <li><a href="#">О ПРОЕКТЕ</a></li>
  <li><a href="#">КОНТАКТЫ</a></li>
</ul>
Настройте меню под свои нужды, добавляя или удаляя уровни и вложения, а также прописывая собственные названия категорий и включая ссылки на них вместо символа #.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.