22.05.2017.

Jednostavni navigacioni meni za vas blog

Crveni navigacioni meni


Crveni navigacioni meni
Uz samo par jednostavnih koraka postavite ovaj jednostavni, vrhunski navigacini meni na vas blog.

  • Ulogujte se na vas Blogger Account
  • Iz vaseg Blogger menija izaberite opciju "Izgled"
  • Kliknite na opciju "Dodaj Gadzet"
  • Izaberite "HTML/JavaScript"
  • Nalepite sledeci kod

<style type="text/css">
body {
background-color:#111;
margin:0px 0px;
padding:50px; 
}

#shutter-menu {
font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
color:white;
text-transform:uppercase; 
}

#shutter-menu ul {
height:50px;
margin:0px 0px;
padding:0px 0px;
overflow:hidden; 
}

#shutter-menu li {
float:left;
display:inline;
list-style:none;
margin:0px 0px;
padding:0px 0px; 
}

#shutter-menu a,
#shutter-menu a:before {
display:block;
margin:0px 0px;
padding:0px 30px;
line-height:50px;
color:white;
text-decoration:none;
background-color:#900;
background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
position:relative;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

#shutter-menu a:before {
content:attr(data-clone);
position:absolute;
top:100%;
left:0px;
display:block;
background-color:white;
background-image:-webkit-linear-gradient(top, #ddd, white);
background-image:-moz-linear-gradient(top, #ddd, white);
background-image:-ms-linear-gradient(top, #ddd, white);
background-image:-o-linear-gradient(top, #ddd, white);
background-image:linear-gradient(top, #ddd, white);
border-top:2px solid rgba(0,0,0,0.2);
color:#333; 
}

#shutter-menu a:hover {
margin-top:-50px;
margin-bottom:1px;
}
</style>

<nav id="shutter-menu">
<ul>
<li><a href="#" data-clone="Home">Home</a></li>
<li><a href="#" data-clone="About">About</a></li>
<li><a href="#" data-clone="Portfolio">Portfolio</a></li>
<li><a href="#" data-clone="Comments">Comments</a></li>
<li><a href="#" data-clone="Contact">Contact</a></li>
</ul>
</nav>

  • Sacuvajte.
Na mestu gde se nalazi # ubacite vas url koji zelite
Takodje mozete izmeniti i staviti naziv kartica koji vama odgovara.


0 komentara:

Постави коментар