Това, което предлага падащото меню е йерархичен преглед на подразделите, съдържащи се в елементите му.
Тук споделям прост код, който може да бъде напълно персонализиран, като направите предпочитаните от вас промени. Така, че на работа! Ще работим за ето тава меню:
Преглед на менюто и редакцията му направете, като копирате кода и използвате този редактор.
Код
<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” това падащо меню няма да работи добре;
Ако се нуждаете от допълнителна помощ при премахването на редове или колони, моля, не се колебайте да публикувате въпросите си. Кажете ми конкретния ред и колона, за да споделя предпочитания от вас код в коментарите. Можете да дискутирате с мен колкото искате. Това ще помогне на другите да разберат по-добре как да правят по-нататъшни промени.
Благодаря, че четете моята публикация. Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Интересно меню, ще се опитам да го инсталирам. Благодаря за информацията.
ОтговорИзтриванеПишете, ако имате нужда от помощ.
Изтриване