Gyors kereső a honlap bal oldalán

Egy, a bal oldalon rögzült kis keresőgomb, melyre rámutatva előugrik a teljes kereső.

1. Vezérlőpult >> Külalak vezérlése >> Stílusok táblázata (CSS). A legelejére vagy legvégére illeszd be a következő kódot:

Kód

.poisk{
  position:fixed;
  background-image:-webkit-linear-gradient(bottom,#426BFF,#60A5FF);
  background-image:-moz-linear-gradient(bottom,#426BFF,#60A5FF);
  background-image:-o-linear-gradient(bottom,#426BFF,#60A5FF);
  background-image:linear-gradient(bottom,#426BFF,#60A5FF);
  -webkit-box-shadow:0 0 3px black;
  -moz-box-shadow:0 0 3px black;
  -o-box-shadow:0 0 3px black;
  box-shadow:0 0 3px black;
  border:1px solid #404040;
  left:-200px;
  width:240px;
  height:30px;
  border-radius:3px;
  top:100px;
  color:white;
  text-shadow:0 0 3px black;
  -webkit-transition:all 0.4s ease;
  -moz-transition:all 0.4s ease;
  -o-transition:all 0.4s ease;
  transition:all 0.4s ease;
  padding:3px;
  }
  .poisk:hover{
  left:-3px;
  }
  .poisk #search{
  width: 120px;
  position:relative;
  top:3px;
  left:5px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius:3px;
  border:1px solid #606060;
  height: 20px;
  }
  .poisk:hover #search{
  width: 220px;
  }
  #search{
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease;
  transition:all 0.2s ease;
  }
  #search:focus{
  border:1px solid #404040;
  -webkit-box-shadow:inset 1px 1px 3px #ccc;
  -moz-box-shadow:inset 1px 1px 3px #ccc;
  box-shadow:inset 1px 1px 3px #ccc;
  }
  .poisk:hover #poiskknopka{
  display:none;
  }

3. Vezérlőpult >> Külalak vezérlése >> A honlap alsó része. A legvégére illeszd be ezt:

Kód

Hozzászólások (0)