Οριζόντιο μενού
|
<style>form#GRss{
padding:0 0 0 10px;
margin:0 auto;
width:95%;
height:45px;
background:#000;
font-family: arial, sans-serif;
background:#000;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
}
form#GRss input{
width:80px;
height:20px;
float:right;
margin:10px 12px 0 0;
border:0;
background:#aaa url(https://lh6.googleusercontent.com/-oF2gBVOjZhQ/UhXEtzmJXsI/AAAAAAAAFgo/RaXRS3zaEMs/h120/lefta4klik-search.png) no-repeat 3px center;
border-radius:10px;
padding-left:20px;
outline:none;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
form#GRss input:focus {
width:200px;
background-color:#fff;
}
form a{
display:block;
float:left;
height:34px;
width:100px;
text-align:center;
color:#fff;
line-height:35px;
text-decoration:none;
text-shadow:0 1px 5px rgba(0, 0, 0, 0.5);
margin:5px 3px 0;
background:#900;
border-radius:6px 6px 4px 4px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
form#GRss input:focus ~ a {width:80px;}
form#GRss a:hover{background:#333;
background:#09c;
border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
text-decoration:none;
}
</style> <form action="https://lefta4klik.blogspot.gr/search" id="GRss" method="get">
<input name="q" type="text" value="Search..." />
<a href="#">First</a>
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
<a href="#">four</a>
<a href="#">five</a>
</form>
|
