Падащо меню за Blogger

Здравейте, всички! Ето ни отново на тема варианти на меню. Толкова са много и различни, че ми се иска да ви споделя всичките наведнъж. За днес съм приготвила падащо меню.
Това, което предлага падащото меню е йерархичен преглед на подразделите, съдържащи се в елементите му.

1. Код
2. Добавяне на менюто в Blogger
3. Уточнения

По принцип в него се показват всички подсекции в дадена секция на блога, когато задържите курсора на мишката върху нея. Това е изключително полезно за показване на съдържанието на даден раздел от блога и позволява на читателите ви да имат лесен достъп до него. Защо да слагате скриптове като jquery, докато можете да използвате прости CSS и HTML, за да създадете красиви падащи менюта за вашия блог.
Тук споделям прост код, който може да бъде напълно персонализиран, като направите предпочитаните от вас промени. Така, че на работа! Ще работим за ето тава меню:

Преглед на менюто и редакцията му направете, като копирате кода и използвате този редактор.

Код

<style>

#bt-menu ul,

#bt-menu li,

#bt-menu a {

margin: 0;

padding: 0;

position: relative;

}

#bt-menu {

height: 49px;

background: #123D60;

background: -moz-linear-gradient(top, #0077D7 0%, #123D60 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0077D7), color-stop(100%, #123D60));

background: -webkit-linear-gradient(top, #0077D7 0%, #123D60 100%);

background: -o-linear-gradient(top, #0077D7 0%, #123D60 100%);

background: -ms-linear-gradient(top, #0077D7 0%, #123D60 100%);

background: linear-gradient(to bottom, #0077D7 0%, #123D60 100%);

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0076d7, endColorStr=#123d60);

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0076d7, endColorStr=#123d60);

/* IE is so silly */

border-radius: 5px 5px 0 0;

-moz-border-radius: 5px 5px 0 0;

-webkit-border-radius: 5px 5px 0 0;

border-bottom: 4px solid #002A4C;

}

#bt-menu span {

margin: 0;

padding: 0;

position: relative;

}

#bt-menu:after,

#bt-menu ul:after {

content: "";

display: block;

clear: both;

}

#bt-menu a {

color: #ffffff;

display: inline-block;

font-family: Trebuchet MS, Arial, Verdana;

font-size: 16px;

font-weight: bold;

line-height: 49px;

padding: 0 25px;

border-right: 1px solid #123D60;

text-decoration: none;

}

#bt-menu ul {

list-style: none;

}

#bt-menu > ul {

float: left;

}

#bt-menu > ul > li {

float: left;

}

#bt-menu > ul > li:hover:after {

content: "";

display: block;

width: 0;

height: 0;

position: absolute;

left: 50%;

bottom: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid transparent;

margin-left: -10px;

}

#bt-menu > ul > li:first-child > a {

border-radius: 5px 0 0 0;

-moz-border-radius: 5px 0 0 0;

-webkit-border-radius: 5px 0 0 0;

}

#bt-menu > ul > li:last-child > a {

border-radius: 0 0px 0 0;

-moz-border-radius: 0 0px 0 0;

-webkit-border-radius: 0 0px 0 0;

}

#bt-menu > ul > li.active > a {

background: #004074;

}

#bt-menu > ul > li:hover > a {

background: #004074;

}

#bt-menu .has-sub {

z-index: 1;

}

#bt-menu .sub:hover > ul {

display: block;

}

#bt-menu .sub ul {

display: none;

position: absolute;

width: 200px;

top: 100%;

left: 0;

}

#bt-menu .sub ul li {

*margin-bottom: -px;

}

#bt-menu .sub ul li a {

background: #047DCB;

border-bottom: 1px dotted #6fc7ec;

filter: none;

font-size: 14px;

font-weight: bold;

display: block;

line-height: 120%;

padding: 10px;

text-shadow:1px 1px 3px #333;

}

#bt-menu .sub ul li:hover a {

background: #009BFF;

text-shadow:1px 2px 1px #000;

}

#bt-menu .sub .sub:hover > ul {

display: block;

}

#bt-menu .sub .sub ul {

display: none;

position: absolute;

left: 100%;

top: 0;

}

#bt-menu .sub .sub ul li a {

background: #0c7fb0;

border-bottom: 1px dotted #6db2d0;

}

#bt-menu .sub .sub ul li a:hover {

background: #095c80;

}

</style>

<div id='bt-menu'>

<ul>

<li class='active'><a href='http://bl0gger-tricks.blogspot.com'><span>Home</span></a></li>

<li class='sub'><a href='#'><span>Application</span></a>

<ul>

<li class='sub'><a href='URL'><span>HTML Editor</span></a>

<ul>

<li><a href='URL'><span>HTML Encoder</span></a></li>

<li><a href='URL'><span>HTML Encoder</span></a></li>

</ul>

</li>

<li class='sub'><a href='URL'><span>HTML Encoder</span></a></li>

<li class='sub'><a href='URL'><span>Comming Soon</span></a></li>

<li class='sub'><a href='URL'><span>Comming Soon</span></a></li>

</ul>

</li>

<li class='sub'><a href='#'><span>Tools</span></a>

<ul>

<li class='sub'><a href='URL'><span>HTML Editor</span></a>

<ul>

<li> <a href='URL'><span>Sub Item 1</span></a></li>

<li> <a href='URL'><span>Sub Item 2</span></a></li>

</ul>

</li>

<li class='sub'><a href='URL'><span>HTML Encoder</span></a></li>

<li class='sub'><a href='URL'><span>Page Rank Checker</span></a></li>

<li class='sub'><a href='URL'><span>Color Code</span></a></li>

</ul>

</li>

<li><a href='#'><span>Faqs</span></a></li>

<li><a href='#'><span>Advertise</span></a></li>

<li><a href='#'><span>About</span></a></li>

<li class='last'><a href='#'><span>Contact</span></a></li>

</ul>

</div>

Добавяне на менюто в Blogger

➤Към таблото за управление на Blogger кликнете върху Оформление;

➤Кликнете върху Добавяне на притурка;

➤Намерете притурка HTML / JavaScript;

➤Накрая поставете посочения горе код в HTML пространството ѝ;

Уточнения

➤Менюто е съвместимо с всички основни браузъри като Firefox, Chrome, Safari и IE7+;

Тъй като за IE+ винаги липсва съвместимост с CSS3, няма да се визуализират само заоблени граници. Намерих решение в Интернет как да се направи закръглена граница за IE7. Просто трябва да копирате и поставите кода. Той е изключително лесен за редактиране.

➤За да промените заглавието на връзките, просто сменете текста (в частта с разделители) със заглавията на страниците си и заменете знака (#) със съответните връзки;

➤Ако в шаблона ви ]]> </ b: skin> секцията има вече същите идентификатори или класове като “# BT-menu”, “sub”, “first-child” и “last-child” това падащо меню няма да работи добре;

Ако се нуждаете от допълнителна помощ при премахването на редове или колони, моля, не се колебайте да публикувате въпросите си. Кажете ми конкретния ред и колона, за да споделя предпочитания от вас код в коментарите. Можете да дискутирате с мен колкото искате. Това ще помогне на другите да разберат по-добре как да правят по-нататъшни промени.

Благодаря, че четете моята публикация. Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:



Здраве за всички вас! Не забравяйте да правите добро на други хора!