Оригинално изскачащо фиксирано меню за блог

Pepa Tabakova
Pepa Tabakova
четвъртък
Меню. Оригинално изскачащо фиксирано меню
Здравейте, читатели, приятели и гости на блога. Предлагам днес да направите красиво хоризонтално меню. Менюто е под формата на изскачащ прозорец и е фиксирано. При превъртане на страницата то остава в горния ѝ край и се вижда постоянно.




    Описание

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

    Код

    В кода, който предлагам можете да промените почти всичко по свое усмотрение. Самият код се инсталира в притурката за оформление  HTML / JavaScript. Дори начинаещите могат лесно да се справят с това. Така, че добре дошли в Blogzablogove.com и моля, копирайте кода, който ви предлагам, поставете го тук и го разгледайте.



    <style>ul#navigation {
    position:fixed;
    margin:0px;
    padding:0px;
    top:0px;
    right:10px;
    list-style:none;
    z-index:999999;
    width:735px;
    font:normal 11px Arial,Sans-Serif;
    -webkit-animation:2s fxhompinav ease-in-out;
    -moz-animation:2s fxhompinav ease-in-out;
    -ms-animation:2s fxhompinav ease-in-out;
    animation:2s fxhompinav ease-in-out;
    }

    ul#navigation li {
    width:103px;
    display:inline;
    float:left;
    margin:0 0 0 2px;
    }

    ul#navigation li a {
    display:block;
    float:left;
    margin-top:-78px;
    width:100px;
    height:22px;
    background-color: #009999;
    background-repeat:no-repeat;
    background-position:50% 150px;
    border:2px solid #e6e6e6;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -khtml-border-bottom-right-radius:10px;
    -khtml-border-bottom-left-radius:10px;
    border-radius:0px 0px 10px 10px;
    color:#ccc;
    text-decoration:none;
    text-align:center;
    text-shadow:0 1px 1px #000;
    padding-top:85px;
    -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
    -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
    -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
    transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
    }

    ul#navigation li a:hover {
    margin-top:-3px;
    background-position:50% 10px;
    color:#fff;
    position:relative;
    }

    ul#navigation li a:hover:after {
    content:"";
    width:0px;
    height:0px;
    position:absolute;
    top:100%;
    left:45%;
    margin-top:-10px;
    border-width:5px;
    border-style:solid;
    border-color:transparent transparent #e6e6e6 transparent;
    }
    ul#navigation li:nth-child(1) a {
    background-image:url( https://lh3.googleusercontent.com/FRhXT4xYMRQ_GfoPkns92BHTqqIHZaQ20Gikn0jbHFU=s31-no);
    }
    ul#navigation li:nth-child(2) a {
    background-image:url( https://lh3.googleusercontent.com/AaEIX8lqHrxuRiYs985x7nB6Eg9EvXhKMXvBQFMzwWE=s27-no);
    }
    ul#navigation li:nth-child(3) a {
    background-image:url( https://lh3.googleusercontent.com/je18imYKR4RRPWsE9-nSo-v7esf-C0I9hw_srnsQrCs=s32-no);
    }
    ul#navigation li:nth-child(4) a {
    background-image:url( https://lh3.googleusercontent.com/6R6a5jHkty89LGIaN6KNAQKvJyxuRLsrzdqC6CvR8os=s32-no);
    }
    ul#navigation li:nth-child(5) a {
    background-image:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2bgRryjQaAlzy0QZ_yAovR6Mr45ubVEX_O9HFMDzonsU9O4Uy6c50CC7wtVDqCvPH7qQ3ztNHHH0qtqOM7c6Q5klp5jziFm210tb0vYTWDoy5KubVo-ka51xEFuRZGiJPN8GaVVzS1w/h120/icon-32x32png.png);
    }
    @-webkit-keyframes fxhompinav {
    from{margin-right:-1000px;}
    to  {margin-right:0px;}
    }

    @-moz-keyframes fxhompinav {
    from{margin-right:-1000px;}
    to  {margin-right:0px;}
    }

    @-ms-keyframes fxhompinav {
    from{margin-right:-1000px;}
    to  {margin-right:0px;}
    }

    @keyframes fxhompinav {
    from{margin-right:-1000px;}
    to  {margin-right:0px;}
    }

    @keyframes fxhompinav {
    from{margin-right:-1000px;}
    to  {margin-right:0px;}
    }
    </style>

    <ul id='navigation'>
    <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>


    Копирайте кода, ако ще го използвате, пренесете го в черновата си и направите съответните настройки.

    Настройки

    ➤Това, което е маркирано в червено, е цветът на фона на разделите в менюто. Използвайте този генератор на цветове, за да изберете правилния за вашия блог цвят.

    ➤Когато кликнете върху секцията, се появява икона. Маркирах адресите на техните изображения в синьо. Така че тук отново имате възможност да ги редактирате, като поставите свои.

    ➤В зелено са оцветени местата, където ще впишете адресите на страниците, там където ще водят хипервръзките.

    ➤А наименованията на страниците са маркирани в жълто.

    Имайте предвид, че тук ви показах меню само с 4 раздела. Ако искате да добавите още, трябва да направите следното:

    ◾Добавете ето такъв участък в кода с адресите на иконите:


    ul#navigation li:nth-child(4) a {
      background-image:url( https://lh3.googleusercontent.com/6R6a5jHkty89LGIaN6KNAQKvJyxuRLsrzdqC6CvR8os=s32-no);
    }


    В него сменете цифрата 4 с цифрата 5.

    ◾И добавете още една такава секция в кода преди </style>.
    @keyframes fxhompinav {
    from{margin-right:-1000px;}
    to  {margin-right:0px;}

    }


    Гарантирам ви, че ако направите всичко правилно, ще имате отлично и оригинално меню. Само моля, бъдете внимателни към всички точки, линии и скоби в кода. Само това, което е отбелязано с друг цвят в него, можете да изтриете и да вмъкнете ваши стойности.
    Ако имате въпроси относно настройките, не забравяйте да попитате в коментарите. Ще уточним всичко.
    Ще се радвам, ако информацията в днешната ми публикация е полезна за вас.

    До следващия път. Успех.

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

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

    BGtop


    Tags: Меню, Blogger
    OpenCloseComments
    Cancel