Хоризонтално меню с бутон "Още" за Blogger

 Неразделен елемент в почти всеки сайт и блог е популярното решение за поставяне на обикновена навигация във вид на хоризонтално меню. Дали ще е фиксирано или не, вече е по желание. Хоризонталното меню в блога е красиво, когато е само на един ред.  Но основният му недостатък е ограничеността.

1. Код
2. Настройки
3. Инсталиране

На един ред можете да разположите малък брой от необходимите хипервръзки. Ако си поиграете с шрифта и изберете по-малък по размер, може да разположите още една или две. В случай, че необходимите хипервръзки са повече, хоризонталното меню става на два реда. Тогава падащите блокове са в помощ на хоризонталното меню.
  Бутонът "Още" е създаден в края на хоризонталното меню, което ви предлагам днес. Вместо да премахвате нужни за вашето хоризонтално меню хипервръзки, бутонът "Още" автоматично се показва в края му. При кликане върху него ще се покаже подменю със скрити раздели.

Код

Кодът на хоризонталното меню с бутон "Още" е:

<style>nav {

font:bold 12px Tahoma,Sans-Serif;

text-transform:uppercase;

}

nav ul {

background-color:#2288bb ;

color:white ;

margin:0px 0px;

padding:0px 0px;

height:30px;

}

nav li {

list-style:none;

margin:0px 0px;

padding:0px 0px;

float:left;

display:inline;

position:relative;

}

nav li a {

display:block;

text-decoration:none;

color:#FFF  ;

line-height:30px;

padding:0px 15px;

}

nav li a:hover,

nav li:hover > a {

background-color: #96DCFE ;

color:#000;

}

nav li ul {

position:absolute;

top:100%;

left:0px;

z-index:99;

width:200px;

height:auto;

display:none;

}

nav li ul li {

float:none;

display:block;

}

nav li ul ul {

top:0px;

left:100%;

}

nav li:hover > ul {

display:block;

}</style>

<nav>

<ul>

<li><a href="## # ">Главна страница</a></li>

<li><a href="## #  ">Архив</a></li>

<li><a href="## #  ">Контактна форма</a></li>

<li><a href="## #  ">За блога и неговия автор</a></li>

<li><a href="## #  ">Съдържание</a></li>

<li><a href="## #  ">Етикети</a></li>

<li><a href="## #  ">Въпроси</a></li>

<li><a href="## #  ">Сътрудничество</a></li>

<li><a href="## #  ">Инструменти</a></li>

<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>

<li><a href="## #"> наименование </a></li>

</ul>

</li>

</ul>

</nav>

Използвайте този инструмент и ще видите какво ви предлагам.

Настройки

Съветът ми е да копирате предложения код някъде встрани и да направите вашите настройки.

➤Вместо решетките въведете адресите на страниците си;

➤Добавете елементи към менюто, ако е необходимо;

<li><a href="## #  ">Съдържание</a></li>

➤И за подменюто, също;

<li><a href="## #">наименование</a></li>

Инсталиране

Няма нищо трудно с инсталирането на това меню. Ще го направите чрез притурка HTML / JavaScript. Готовият код се вписва в притурката и се премества под заглавката на блога.

Към всеки един елемент от менюто е възможно да се въведат подменюта

Много информация може да бъде въведена в такова падащо хоризонтално меню. Компактно и удобно.

В Blogger може да има проблем с падащото меню, което се намира точно под заглавката на блога. Ако срещнете такъв споделям как да го решите тук. 

Благодаря, че ми гостувахте. За въпроси, моля използвайте формата на коментарите. До следващия път и успех!

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

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