![Да направим допълнително меню в Blogger допълнително меню в Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6x18aa3TrwYQTyy8bU9ePW8B11UVtkwl5Z24hY5BlUlv56bTGijXLz63pF74G1kDnzFiQpXBUQURpxb-92KUU6NnA8IW_pTJSHBi9uchorEL1JszdOLHo6sHkftMt52RxvzX1NcoP2U/s1600/prosto_menu1-min.png)
За да създадем допълнително меню, се нуждаем от познатата ни HTML / JavaScript притурка. В нея ще бъде вписан кодът на нашето допълнително меню.
И първо ще изберем местоположението му. Имаме следните възможности:
Ако притурката "Страници" не се използва и CSS свойства не са зададени за нея, можете да я поставич над или под заглавката на блога.
Заедно с притурката "Страници" - над или под полето за публикации, или в страничните колони.
CSS за всички варианти е еднакъв, само ширината и височината на целия блок и елементите вътре, като бутонните за връзки, се задават в зависимост на желаните размери.
HTML структурата е най-обикновена:
<ul class="CssMenu">
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<!--всички наши хипервръзки-->
<li class="CssMenu"><a href="#" title="">>Link</a></li>
</ul>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<!--всички наши хипервръзки-->
<li class="CssMenu"><a href="#" title="">>Link</a></li>
</ul>
А сега и CSS кода :
ul.CssMenu {
list-style:none;
padding:0px;
margin:0px;
}
li.CssMenu {
float:left;
padding: 0px;
}
li.CssMenu a{
display:block;
vertical-align: middle;
text-align:center;
font: normal normal 12px Tahoma;
text-decoration:none;
color: #fff;
margin: 0px;
}
li.CssMenu a{
height:50px; /*височина на бутоните – избира се*/
background-image:url(../image.jpg); /*фоново изображение за бутоните-хипервръзки*/
background-repeat: no-repeat;
width:90px; /*ширина на бутоните – избира се*/
}
li.CssMenu a:hover{
background-position:-90px 0;
}
list-style:none;
padding:0px;
margin:0px;
}
li.CssMenu {
float:left;
padding: 0px;
}
li.CssMenu a{
display:block;
vertical-align: middle;
text-align:center;
font: normal normal 12px Tahoma;
text-decoration:none;
color: #fff;
margin: 0px;
}
li.CssMenu a{
height:50px; /*височина на бутоните – избира се*/
background-image:url(../image.jpg); /*фоново изображение за бутоните-хипервръзки*/
background-repeat: no-repeat;
width:90px; /*ширина на бутоните – избира се*/
}
li.CssMenu a:hover{
background-position:-90px 0;
}
За този стил като фоново изображение е използвано следното изображение:
![Фоново изображение на меню Фоново изображение](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSOdxlHOZP9axppX6JsX1rUwcudDTzuCuDfxhj92AV5xQxQKlnFoPKPeu2NfQ8GpPsiPMAqnAPtnrhE0A0J-j8bu4sVNb23fZNVjiqJA_byQkHCKY6YYb-uWFrsFYI0IDkt0QSwFb_EDU/s1600/noname41.jpg)
За повече информация относно използването на изображения (sprites) като фон на бутоните прочетете тази публикация.
След като изберете местоположението на притурката с менюто в темата, може да се наложи да регулирате височината - height и ширината - width на блоковете. За да намалите или увеличите броя на бутоните, просто изтрийте или добавете нови хипервръзки към притурката с менюто.
<li class="CssMenu"><a href="#" >Link</a></li>
При използване на двете менюта в блога – допълнителното меню и притурката „Страници“, е необходимо задаване на допълнителни CSS свойства, за да премахнете разстоянието между бутоните и на двете менюта.
.tabs .widget ul a, .tabs .widget ul a:hover, .tabs .widget li a, .tabs .widget li a:hover {
margin: 0;
border: 0;
margin: 0;
border: 0;
Това е всичко. Ще се радвам на вашите коментари.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
![Посетете .: BGtop.net :. Топ класацията на българските сайтове и гласувайте за този сайт! BGtop](http://bgtop.net/images/bgtop8831.gif)
Няма коментари:
Публикуване на коментар