Менюто на блога не изглежда нищо сложно на пръв поглед. Но как да се направи така, че то да отличава блога ви, да го прави специален и в същото време напълно да съответства на стила му и неговия дизайн? Да се създаде меню не е сложно, но създаването на оригинално, интересно меню не е толкова лесно.
Публикацията е обновена през януари, 2019 година.
Дори малките елементи в него, като промяна на цвета при навеждане на курсора, вид и размер на шрифта, елементи като стрелки или малки икони, падащо многоцветно меню, меню с ефект на превъртане, могат да направят блога ви по-интересен и атрактивен. Предоставят на потребителя малки елементи на игра и точно с такова меню е удоволствие да се работи с блога.
Надявам се, че подборът и предложените видове менюта в тази публикация ще ви подскажат нови идеи и решения.
Кодът му се вгражда отново в HTML/JavaScript притурка, която стои под заглавката и е:
HTML кода е:
А CSS стиловете са: ( напомням, че могат да се вграждят в HTML кода на блога пред ]]></b:skin> или в притурка HTML/JavaScript, но оградени с таговете <style> и </style>)
И за да ви е по-лесно, ето и целия код, който проверете в този инструмент.
А ето и целия код на вертикалното меню. Ако искате да го инсталирате в притурка, можете да го проверите със същия инструмент.
Въпроси за настройките, моля в коментарите.
Ако имате смелост да промените своя дизайн с ново и различно меню, направете го.
Това е всичко.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Публикацията е обновена през януари, 2019 година.
Дори малките елементи в него, като промяна на цвета при навеждане на курсора, вид и размер на шрифта, елементи като стрелки или малки икони, падащо многоцветно меню, меню с ефект на превъртане, могат да направят блога ви по-интересен и атрактивен. Предоставят на потребителя малки елементи на игра и точно с такова меню е удоволствие да се работи с блога.
Надявам се, че подборът и предложените видове менюта в тази публикация ще ви подскажат нови идеи и решения.
Хоризонтално фиксирано меню
Характерно за този вид меню е, че винаги стои горе, не се премества даже и при скрулиране на страницата. Може да побере цялата информация на блога.Кодът му се вгражда отново в HTML/JavaScript притурка, която стои под заглавката и е:
<style>#sbfixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}#sbfixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}* html, * html body{overflow-y:hidden;height:100%;}* html #sbfixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }* html #sbfixedinner{margin-right:17px;}* html #sbfixed {position:absolute;}#sbtop-wrapper{background:#2288bb;width:100%;float:left;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #A10048;border-top:3px solid rgb(72, 161, 250);}#sbtopbar{width:980px;height:40px;margin:0 auto}#sbtop{width:100%}#sbtop,#sbtop ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#sbtop a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#ffffff;border-right:1px solid #00ffff;border-left:1px solid #00ffff;padding:7px 10px 7px}#sbtop a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUvCdpoonc3mADgcEQXEMh-vyZvIgt8YKxkT-mUnNKD9yZsLQrbuZG-58DUWYNUoWqN1LdvSmBvVHqGL34LmXGQzveXqtgJQo1Hx-3gfN1hYma9EtIurri9S95fYzZTEbY33Y4argzsQ/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}#sbtop li{float:left;position:static;width:auto}#sbtop li ul,#sbtop ul li{width:170px}#sbtop ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}#sbtop li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}#sbtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color:#222;color:#fff}#sbtop li:hover ul,#sbtop li.hvr ul{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}#sbtop li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}#sbtop ul a:hover{background-color:rgb(72, 161, 250)!important;color:#fff!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 12px Arial;color:#fff;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color:#00ffff}</style><div id="sbfixed"><div id="sbfixedinner"><div id="sbtop-wrapper"><div id="sbtopbar"><ul id="sbtop">
<li><a href="#"><span>НАЧАЛО</span></a></li>
<li><a href=" #"><span>###</span></a></li>
<li><a href="#"><span>###</span></a><ul>
<li><a href="#">###</a></li><li></li>
<li><a href="#">###</a></li></ul></li>
<li><a href="#"><span>###</span></a><ul>
<li><a href="#">###</a></li><li></li>
<li><a href="#">###</a></li><li></li>
<li><a href="#">###</a></li><li></li>
<li><a href="#">###</a></li></ul></li>
<li><a href="#"><span>###</span></a><ul>
<li><a href="#">###</a></li><li></li>
<li><a href="#">###</a></li><li></li>
<li><a href="#">###</a></li></ul></li>
<li><a href="#"><span>###</span></a><ul>
<li><a href="#">###</a></li><li></li>
<li><a href="#">###</a></li><li></li>
<li><a href="#">###</a></li><li></li>
<li><a href="#">###</a></li></ul></li>
<li><a href="#"><span>###</span></a></li>
<li><a href="#"><span>###</span></a></li>
<li><a href="#"><span>###</span></a></li>
<li><a href="#"><span>###</span></a></li>
</ul></div><div style="clear:both;"></div></div></div></div>
Меню с картинки и CSS3 анимация -хоризонтален вариант
Едно прилично, симпатично и просто меню с иконки в хоризонтален вариант. Кодат е от две части, HTML и CSS.HTML кода е:
<div class="macmenu">
<div align="center" class="button">
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXLuAUNzozWZqsTc_Zbm7qgizWRViSWqF6nAeuFvA1K60RMuu5gflVtlHDfm07L4uNyw89gYDOped0Up1gWZSoablng5esieemAOs2UZef6SKwDOsu55j00cODRrDI4UU1tsafkHOy6Are/s1600/home+(1).png" />Главна</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQiDIZjjzqtd-29L-UL2SoB9zacS84uig5l98t7Me6YRJWo_Ej6PXlowQN0M_NHreT3qo1vdj6cgP8qbNp0Vn476n_SQVzHRp1DPmyG150TxRgZyONekfHXMBWrTYJTDcIG1AxF7nnhD5/s1600/home+(2).png" />Новости</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sOv_pjOwziPqxWVd7cLivM2Rvi7guMHkpsw9Pk5QXWNLE-YsAq1DqfLiG77W7_sA_u0_31hcWsFauucMivfZMJaqvPy-LROjU9QmxjgfgGtQcKTQ3eNaI_GGJymoxLy1tUN_8557QBhS/s1600/home+(3).png" />Фотографии</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0j3h8lBDJozyNnfEDVE0XJMwOEkIVWABX3EgzJCnxfAE0eSNyIsP0f-QQHQA8etYGErE9ww7hRPPYhHzy3NEsxsMbYnEEzexpZ6WavVd9fsMA3WODcyBNWR-6G9fZPK8oWjcPeoB54555/s1600/home+(4).png" />Музика</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCEbR_wPRQEVKzmNYrSl4PqG2rLTBr55wbKwm-xjOMW7gMaE7902CIL5rEOX51151Ceir0EqJipIp4pwp4EluqN_GJQFxIpCcpLfdV0oeKUclNFQ8uuvZX9h3C4laRIBFOlKdn2HHQkrDx/s1600/home+(5).png" />Документи</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_IPUdnK-z4jMhCciqeE4A62pXRvxxvG0HCDpp-1Y4XZ2vgApyRQijqmmSmZS9BI3s_Cxh54V3jsHsqAodugCLoJhYGoGAduX7DNuxIdaAeo-YkHsz_9aOi9p-lkeaVvQOD6KfbpNaZNZz/s1600/home+(6).png" />Избрано</a>
</div>
</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 class="macmenu">
<div align="center" class="button">
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXLuAUNzozWZqsTc_Zbm7qgizWRViSWqF6nAeuFvA1K60RMuu5gflVtlHDfm07L4uNyw89gYDOped0Up1gWZSoablng5esieemAOs2UZef6SKwDOsu55j00cODRrDI4UU1tsafkHOy6Are/s1600/home+(1).png" />Главна</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQiDIZjjzqtd-29L-UL2SoB9zacS84uig5l98t7Me6YRJWo_Ej6PXlowQN0M_NHreT3qo1vdj6cgP8qbNp0Vn476n_SQVzHRp1DPmyG150TxRgZyONekfHXMBWrTYJTDcIG1AxF7nnhD5/s1600/home+(2).png" />Новости</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sOv_pjOwziPqxWVd7cLivM2Rvi7guMHkpsw9Pk5QXWNLE-YsAq1DqfLiG77W7_sA_u0_31hcWsFauucMivfZMJaqvPy-LROjU9QmxjgfgGtQcKTQ3eNaI_GGJymoxLy1tUN_8557QBhS/s1600/home+(3).png" />Фотографии</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0j3h8lBDJozyNnfEDVE0XJMwOEkIVWABX3EgzJCnxfAE0eSNyIsP0f-QQHQA8etYGErE9ww7hRPPYhHzy3NEsxsMbYnEEzexpZ6WavVd9fsMA3WODcyBNWR-6G9fZPK8oWjcPeoB54555/s1600/home+(4).png" />Музика</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCEbR_wPRQEVKzmNYrSl4PqG2rLTBr55wbKwm-xjOMW7gMaE7902CIL5rEOX51151Ceir0EqJipIp4pwp4EluqN_GJQFxIpCcpLfdV0oeKUclNFQ8uuvZX9h3C4laRIBFOlKdn2HHQkrDx/s1600/home+(5).png" />Документи</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_IPUdnK-z4jMhCciqeE4A62pXRvxxvG0HCDpp-1Y4XZ2vgApyRQijqmmSmZS9BI3s_Cxh54V3jsHsqAodugCLoJhYGoGAduX7DNuxIdaAeo-YkHsz_9aOi9p-lkeaVvQOD6KfbpNaZNZz/s1600/home+(6).png" />Избрано</a>
</div>
</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 class="macmenu">
<div align="center" class="button">
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXLuAUNzozWZqsTc_Zbm7qgizWRViSWqF6nAeuFvA1K60RMuu5gflVtlHDfm07L4uNyw89gYDOped0Up1gWZSoablng5esieemAOs2UZef6SKwDOsu55j00cODRrDI4UU1tsafkHOy6Are/s1600/home+(1).png" />Главна</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQiDIZjjzqtd-29L-UL2SoB9zacS84uig5l98t7Me6YRJWo_Ej6PXlowQN0M_NHreT3qo1vdj6cgP8qbNp0Vn476n_SQVzHRp1DPmyG150TxRgZyONekfHXMBWrTYJTDcIG1AxF7nnhD5/s1600/home+(2).png" />Новости</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sOv_pjOwziPqxWVd7cLivM2Rvi7guMHkpsw9Pk5QXWNLE-YsAq1DqfLiG77W7_sA_u0_31hcWsFauucMivfZMJaqvPy-LROjU9QmxjgfgGtQcKTQ3eNaI_GGJymoxLy1tUN_8557QBhS/s1600/home+(3).png" />Фотографии</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0j3h8lBDJozyNnfEDVE0XJMwOEkIVWABX3EgzJCnxfAE0eSNyIsP0f-QQHQA8etYGErE9ww7hRPPYhHzy3NEsxsMbYnEEzexpZ6WavVd9fsMA3WODcyBNWR-6G9fZPK8oWjcPeoB54555/s1600/home+(4).png" />Музика</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCEbR_wPRQEVKzmNYrSl4PqG2rLTBr55wbKwm-xjOMW7gMaE7902CIL5rEOX51151Ceir0EqJipIp4pwp4EluqN_GJQFxIpCcpLfdV0oeKUclNFQ8uuvZX9h3C4laRIBFOlKdn2HHQkrDx/s1600/home+(5).png" />Документи</a>
<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_IPUdnK-z4jMhCciqeE4A62pXRvxxvG0HCDpp-1Y4XZ2vgApyRQijqmmSmZS9BI3s_Cxh54V3jsHsqAodugCLoJhYGoGAduX7DNuxIdaAeo-YkHsz_9aOi9p-lkeaVvQOD6KfbpNaZNZz/s1600/home+(6).png" />Избрано</a>
</div>
</div>
Въпроси за настройките, моля в коментарите.
Ако имате смелост да промените своя дизайн с ново и различно меню, направете го.
Това е всичко.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Няма коментари:
Публикуване на коментар