Menu Horizontal Con Buscador


En esta ocasión les traigo un peculiar menu horizontal que tiene incorpoado un buscador.

El menu se compone de códigos HTML y CSS con imagenes como fondo.

Aqui esta una imagen de como quedara nuestro menu:

Haz clic en la imagen para verla en tamaño real

Ya visto como sera nuestro menu prosigamos con los códigos y las imagenes que necesitamos.

El siguiente codigo lo debes de inplantar en tu plantilla justo antes de: ]]></b:skin>

Código CSS



/* Menu */

#topmenu {
 width: 880px;
 height: 76px;
 margin: 0 auto;
 background: #608F30 url(img/img02.jpg) no-repeat left top;
}


#menu {
 float: left;
 width: 540px;
 height: 51px;
}

#menu ul {
 margin: 0;
 padding: 25px 0 0 10px;
 list-style: none;
 line-height: normal;
}

#menu li {
 display: block;
 float: left;
}

#menu a {
 display: block;
 float: left;
 margin-right: 17px;
 padding: 5px 12px;
 text-decoration: none;
 font: 14px Georgia, "Times New Roman", Times, serif;
 color: #FFFFFF;
}

#menu a:hover { text-decoration: underline; }

#menu .current_page_item a {
 color: #FFFFFF;
}

/* Search */

#search {
 float: right;
 width: 305px;
 height: 76px;
}

#search form {
 float: right;
 margin: 0;
 padding: 30px 20px 0 0;
}

#search fieldset {
 margin: 0;
 padding: 0;
 border: none;
}

#search input {
 float: left;
 font: 12px Georgia, "Times New Roman", Times, serif;
 border: none;
}

#search-text {
 width: 150px;
 height: 18px;
 padding: 3px 0 0 15px;
 background: url(img/searchf.gif) no-repeat;
}

#search-submit {
 height: 20px;
 margin-left: 0px;
 color: #39561D;
}


ul{
 list-style: none;
 margin: 0;
 padding: 0;
 }

img {
    border: none;
}


Recuerda que tendras que subir las imagenes a picasa o a tu servidor favorito, y despues obtener la url y pegarla en este sector del css: (img/img02.jpg) cada una en su respectivo lugar.

Estas son las imagenes que nesetitaremos:

img02

Haz clic en la imagen para verla y guardarla en tamaño real

searchf



El código siguiente remplaza el navar en el header de tu plantilla justo debajo del body lo ubicaras, mira los div y fijate bien cual contiene el Home o Inicio de tu Blog.

Código HTML



<div id="topmenu">
  <div id="menu">
   <ul>
    <li class="current_page_item"><a href="#">Home</a></li>
 <li><a href="#">Blog</a></li>
  <li><a href="#">Photos</a></li>
   <li><a href="#">About</a></li>
 <li><a href="#">Links</a></li>
    <li><a href="#">Contact</a></li>
 </ul>
  </div>

  <!-- end #menu -->

    <div id="search">
      <form method="get" action="">
          <fieldset>
    <input type="text" name="s" id="search-text" size="15" />
    <input type="submit" id="search-submit" value="Buscar" />
        </fieldset>
      </form>
       </div>
 <!-- end #search -->
 </div>
     <!-- end #header -->

Subir