0

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

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



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

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

    Характерно за този вид меню е, че винаги стои горе, не се премества даже и при скрулиране на страницата. Може да побере цялата информация на блога.
    Можете да го видите над заглавката на блога тук Кодът му се вгражда отново в 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(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/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>







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

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


    HTML кода е:


    <div class="macmenu">
     <div class="button">
      <a href="#"><img src=".../image/home.png">Главна</a>
      <a href="#"><img src=".../image/news.png">Новини</a>
      <a href="#"><img src=".../image/photo.png">Фотографии</a>
      <a href="#"><img src=".../image/music.png">Музика</a>
      <a href="#"><img src=".../image/docs.png">Документи</a>
      <a href="#"><img src=".../image/fav.png">Избрано</a>
     </div>
    </div>

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


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

    }









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

    Ако искаме да разположим менюто вертикално, то 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; /*височина под курсор*/

    }


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

    Няма коментари :

    Публикуване на коментар


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита