Други решения за дизайна на меню в блога

Pepa Tabakova

вторник

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

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

Хоризонтално фиксирано меню

Характерно за този вид меню е, че винаги стои горе, не се премества даже и при скрулиране на страницата. Може да побере цялата информация на блога.
Кодът му се вгражда отново в HTML/JavaScript притурка, която стои под заглавката и е:

<li><a href="#"><span>НАЧАЛО</span></a></li>

</ul></div><div style="clear:both;"></div></div></div></div>

Меню с картинки и CSS3 анимация -хоризонтален вариант

Едно прилично, симпатично и просто меню с иконки в хоризонтален вариант. Кодат е от две части, HTML и CSS.

HTML кода е:

<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5sXMnibkpEM7MqsCuvD7k15OStxH0rEFX4qtDV-BhhXtZVZ-p49ct1X_01W-hQOe6XUE8csF0SxhVptsGRjRVzjLOuQVvh4q_M3Gl6Ycxtygb0qubnWa_FlphDBsVzqwNR2jDHLKRQZ6/s1600/home+(1).png" />Главна</a>

<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhic4A-PWoN8S5d_IqBzd0sHi8V5auznk9dj6CwRfEjs9j5LVALLNvLkPuErUFKiaitHWigO3SmDa4BEgQ7r3jCpWfBNLr4kcK80uGWYge6wGtcFKiCdTqFPzopOoot6bFhI-MCrhA2a9a7/s1600/home+(2).png" />Новости</a>

<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2nfvJ-mplL6khWqChBeMkoVf6X871hl3IfT59YSj5Bc3ixbAp56fF0zK4gbHZnJoHnW9ZeWKGn9YYTmP7IYc5fLrWH6q_PKEZ-UzPQIpgbeynihnCrAjXznQXAuj2zcCDTXwOHBEcas7p/s1600/home+(3).png" />Фотографии</a>

<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSffVIYW63uY3bIjZFnbA9R8Pezpf6Cz-pHEEoBA-HX42QWeP-IC7RVIJQ1eP2Hic2ePWqOF8-K2RFMLBkTVuAzaxiGKlAV6NjEs2TkjUtTmozCg7FfEt63St0ZRy2lPmcBuPKnaVCWl6/s1600/home+(4).png" />Музика</a>

<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjclWA5286fk-IAVtJvZburrUvyEiUUZhsr-0uE9Y9BrmizfF4JNTno2FSmLs18am9bDGpi7bDE3eKb2VHbvxfOgZMaRQH1HzK1ASHgedJxbdAD3fBqAyla8fZ_T0_rkAJhxMe4hgG_3NAQ/s1600/home+(5).png" />Документи</a>

<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzXGEvoiSPIX4AdcJSk59V2S5hmRSFXeY6TmHtmgP21mz3znY0Wjh_-HHxqnSlCWJ9hjgnr4cd6S5FirANpuf2DxxP4_NHXYswwXKIifzML2pODtskLD8x70uYOWLHJobscoekd3wwVNCt/s1600/home+(6).png" />Избрано</a>

</div>

А CSS стиловете са: ( напомням, че могат да се вграждят в HTML кода на блога пред ]]></b:skin> или в притурка HTML/JavaScript, но оградени с таговете <style> и </style>)

.macmenu {

height: 128px; /*височина на блока*/

}

.button {

margin: 0 auto; /*центриране на блока*/

width: 720px; /*ширина на блока с меню*/

}

.button a img,

.button a {

display: block;

float: left;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

height: 70px;

width: 70px;

}

.button a {

margin: 5px 15px;

text-align: center;

color: #fff;

font: normal normal 10px Verdana;

text-decoration: none;

word-wrap: normal; /*забранява автоматически разделянето на думата за пренасяне*/

}

.macmenu a:hover img {

margin-left: -30%;

height: 128px;

width: 128px;

}

.button a:hover {

font: normal bold 14px Verdana;

}

И за да ви е по-лесно, ето и целия код, който проверете в този инструмент.

<style>

.macmenu {

height: 128px; /*височина на блока*/

}

.button {

margin: 0 auto; /*центриране на блока*/

width: 720px; /*ширина на блока с меню*/

}

.button a img,

.button a {

display: block;

float: left;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

height: 70px;

width: 70px;

}

.button a {

margin: 5px 15px;

text-align: center;

color: #fff;

font: normal normal 10px Verdana;

text-decoration: none;

word-wrap: normal; /*забранява автоматически разделянето на думата за пренасяне*/

}

.macmenu a:hover img {

margin-left: -30%;

height: 128px;

width: 128px;

}

.button a:hover {

font: normal bold 14px Verdana;

}

</style>

</div>

Меню с картинки и CSS3 анимация - вертикален вариант

Ако искаме да разположим менюто вертикално, то CSS стила ще е:

.macmenu {

height: 720px; /*височина на блока*/

}

.button {

text-align: center;

margin: 0 10px; /*външен отстъп*/

}

.button a img,

.button a {

display: block;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

height: 70px;

width: 70px;

}

.button a {

margin: 15px 5px;

text-align: center;

color: #000;

font: normal normal 10px Verdana;

text-decoration: none;

word-wrap: normal;

}

.macmenu a:hover img {

margin-left: -30%;

height: 128px;

width: 128px;

}

.button a:hover {

font: normal bold 14px Verdana;

height: 128px; /*височина под курсор*/

}

А ето и целия код на вертикалното меню. Ако искате да го инсталирате в притурка, можете да го проверите със същия инструмент.

<style>

.macmenu {

height: 720px; /*височина на блока*/

}

.button {

text-align: center;

margin: 0 10px; /*външен отстъп*/

}

.button a img,

.button a {

display: block;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

height: 70px;

width: 70px;

}

.button a {

margin: 15px 5px;

text-align: center;

color: #000;

font: normal normal 10px Verdana;

text-decoration: none;

word-wrap: normal;

}

.macmenu a:hover img {

margin-left: -30%;

height: 128px;

width: 128px;

}

.button a:hover {

font: normal bold 14px Verdana;

height: 128px; /*височина под курсор*/

}

</style>

</div>

Въпроси за настройките, моля в коментарите.
Ако имате смелост да промените своя дизайн с ново и различно меню, направете го.
Това е всичко.

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

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

Cancel

Хоризонтално фиксирано меню

Меню с картинки и CSS3 анимация -хоризонтален вариант

Меню с картинки и CSS3 анимация - вертикален вариант

PEPA TABAKOVA