Menu responsivo com caixa de pesquisa para usar no blog

CÓDIGO DAS VARIÁVEIS

(colar abaixo de /* Variable definitions
   ====================)

<Group description="Fonte do menu" selector=".tabs-inner .widget li a">

     <Variable name="menu.font" description="Font" type="font"

         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

     <Variable name="menu.text.color" description="Cor da fonte do menu" type="color" default="#999999" value="#ffffff"/>

     <Variable name="menu.selected.text.color" description="Cor da fonte hover" type="color" default="#000000" value="#444444"/>

<Variable name="submenu.font" description="Font submenu" type="font"

         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

     <Variable name="submenu.text.color" description="Cor da fonte do submenu" type="color" default="#999999" value="#000000"/>

     <Variable name="submenu.selected.text.color" description="Cor da fonte submenu hover" type="color" default="#000000" value="#444444"/>

   </Group>

   <Group description="Cor de fundo do menu" selector=".tabs-outer .PageList">

     <Variable name="menu.background.color" description="Cor de fundo do menu" type="color" default="#f5f5f5" value="#222222"/>

     <Variable name="menu.selected.background.color" description="Cor de fundo hover" type="color" default="#eeeeee" value="#eeeeee"/>

<Variable name="submenu.background.color" description="Cor de fundo do submenu" type="color" default="#f5f5f5" value="#00818b"/>

     <Variable name="submenu.selected.background.color" description="Cor de fundo submenu hover" type="color" default="#eeeeee" value="#eeeeee"/>

   </Group>

CÓDIGO CSS

(cole acima de ]]></b:skin>)

/* MENU RESPONSIVO COM CAIXA DE BUSCA- by elainegaspareto.com
----------------------------------------------- */
.conteudo-menu { background: $(menu.background.color); font: $(menu.font); }
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 100%; height: 50px;}
#menu {
    background: $(menu.background.color); /* COR DE FUNDO DO MENU */
    color: $(menu.font); /* COR DA FONTE DO MENU */
    height: 50px; /* ALTURA DO MENU */
    width: 100%;
    position: relative;
    z-index: 999;
}

#menu-left {
    float: left;
    width: 100%;
    max-width: 700px;/* ÁREA ÚTIL DO MENU, AUMENTE OU REDUZA PARA CENTRALIZAR */
}

#menu-right {
    float: right;
    width: 100%;
    max-width: 300px;
    text-align: right;
}

#menu ul, #menu li {
font: $(menu.font); /* TIPO FONTE DO MENU */
    text-transform: uppercase;  /* Todas as fontes maiúsculas, se não quiser, apague esta linha */
    margin: 0 auto;
    padding: 0 0;
    list-style: none;
}

#menu ul {
    width: 100%;
}

#menu li {
    float: left;
    display: inline;
    position: relative;
    font-weight: 700;
}

#menu a {
    display: block;
    line-height: 50px;
    padding: 0 14px; /* DISTÂNCIA ENTRE AS CASAS */
    text-decoration: none;
    color: $(menu.text.color); /* COR DA FONTE DO MENU */
}

#menu li a:hover {
    color: $(menu.selected.text.color);  /* COR DO TEXTO AO PASSAR O CURSOR */
    background: $(menu.selected.background.color);  /* COR DE FUNDO DO MENU HOVER */
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

#menu-left input {
    display: none;
    margin: 0 0;
    padding: 0 0;
    width: 80px;
    height: 50px;
    opacity: 0;
    cursor: pointer;
}

#menu label {
    background: url("http://i.imgur.com/Cx8HQMd.png") center no-repeat;
    -moz-background-size: auto 50%;
    -webkit-background-size: auto 50%;
    background-size: auto 50%;
    display: none;
    width: 50px;
    height: 50px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#menu ul.menus {
    padding-top: 5px;
    height: auto;
    overflow: hidden;
    width: 200px;
    background: rgba(255,255,255,0.95);
    position: absolute;
    z-index: 99;
    display: none;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
}
#menu ul.menus li {
    display: block;
    width: 100%;
    text-transform: none;
    text-shadow: none;
}
#menu ul.menus a {
    color: $(submenu.text.color);
    line-height: 35px;
}
#menu li:hover ul.menus {display: block;}
#menu ul.menus a:hover {
    background: $(submenu.selected.background.color);  /* COR DE FUNDO DAS SUB ABAS HOVER */
    color: $(submenu.selected.text.color);  /* COR DO TEXTO DAS SUB ABAS HOVER */
    padding-left: 20px;
}
#search {
    margin-top: 0px;
    color: $(menu.text.color) !important;
}
#search input[type="text"] {
    background: url("http://i.imgur.com/WsHNC7P.png") no-repeat 20px 15px;
    border: none;
    color: #fff !important;
    font-size: 13px;
    width: 0px;
    height: 38px;
    padding: 6px 5px 6px 50px;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    cursor: pointer;
}

#search input[type="text"]:focus {
    color: #fff !important;
    width: 245px;
    background: url("http://i.imgur.com/WsHNC7P.png") no-repeat  20px 15px rgba(0,0,0,0.2);
    outline: none;
    cursor: text;
}
centro {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}
/* MEDIA QUERIES DO MENU (DEFINE A RESPONSIVIDADE)
----------------------------------------------- */
@media screen and (max-width: 1024px){
.menunope { display: none;}
#menu { position: relative;
}
#menu ul {
    background: rgba(0,0,0,0.9);
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 3;
    height: 1000px;
    display: none
}
#menu ul.menus {
    width: 100%;
    position: static;
    padding-left: 20px;
}
#menu li {
    display: block;
    float: none;
    width: auto;
     background: #666; /* COR DE FUNDO DO MENU RESPONSIVO */
}
#menu-left input, #menu label {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
#menu-left input { z-index:4;}
#menu-left input:checked + label {
    background: url("http://i.imgur.com/yNRYwBD.png") no-repeat center;
    -moz-background-size: auto 50%;
    -webkit-background-size: auto 50%;
    background-size: auto 50%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
#menu-left input:checked ~ ul { display:block;}
#menu ul.menus {
    width: 100%;
    background: $(menu.background.color); /* COR DE FUNDO DO MENU RESPONSIVO */
    z-index: 99;
    display: none;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
    margin-top: -5px;
    margin-left: -20px;
    padding-top: 0;
    border:none;
}
#menu ul.menus li {
    display: block;
    width: 100%;
    font-weight: 100;
    text-shadow: none;
    background: rgba(0,0,0,0.5);
}
#menu ul.menus a {
    color: #ccc; /* COR DA FONTE DO MENU RESPONSIVO */
    line-height: 35px;
}
#menu li:hover ul.menus { display: block;}
#menu ul.menus a:hover {
    background: $(submenu.selected.background.color);  /* COR DE FUNDO DO SUBMENU */
    color: $(submenu.selected.text.color);  /* COR DO TEXTO DO SUBMENU HOVER */
    padding-left: 20px;
}
}

CÓDIGO JAVASCRIPT

(colar acima de </head>)

<script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(&quot;document&quot;).ready(function($){
var nav = $(&#39;.conteudo-menu&#39;);
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 359) {
nav.addClass(&quot;menu-fixo&quot;);
} else {
nav.removeClass(&quot;menu-fixo&quot;);
}
});
});
</script>

CÓDIGO HTML

(colar abaixo de </header> para ficar abaixo do cabeçalho ou cole abaixo de  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> para ficar fixo desde o começo)

<div class='conteudo-menu'>
<nav id='menu'>
<centro>
<div id='menu-left'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/'>Início</a></li>
<li><a href='LINK AQUI'>Aba simples</a></li>
<li><a>Aba com submenu</a>
  <ul class='menus'>
   <li><a href='LINK AQUI'>Sub aba 1</a></li>
   <li><a href='LINK AQUI'>Sub aba 2</a></li>
   <li><a href='LINK AQUI'>Sub aba 3</a></li>
   <li><a href='LINK AQUI'>Sub aba 4</a></li>
  </ul>
</li>
<li><a href='LINK AQUI'>Aba simples</a></li>
<li><a>Aba com submenu</a>
  <ul class='menus'>
   <li><a href='LINK AQUI'>Sub aba 1</a></li>
   <li><a href='LINK AQUI'>Sub aba 2</a></li>
   <li><a href='LINK AQUI'>Sub aba 3</a></li>
   <li><a href='LINK AQUI'>Sub aba 4</a></li>
   <li><a href='LINK AQUI'>Sub aba 5</a></li>
  </ul>
</li>
<li><a href='LINK AQUI'>Aba simples</a></li>
</ul>
</div>
<div id='menu-right'>
<form action='/search' id='search' method='get'>
<input autocomplete='off' name='q' placeholder='Digite sua busca e tecle Enter' type='text'/>
</form>
</div>
</centro>
  </nav></div>