Menu com Search efeito scroll sobre o template sem Jquery

menu dropdown search scroll over blogger template


Hoje vamos apresentar menu dropdown com search no menu dropdown que tem efeito scrolling sobre o template 100% funcioonando e o que é melhor sem o uso de Jquery isso é leve e faz um perfeito trabalho no template do Blogger para adicionar siga os passos abaixo:


Adicionando menu com search efeito scroll sobre o template 

Faça login no template do blogger va no menu tema então editar HTML com as teclas combinadas CTRL+F procure por </ body>  ou &lt;!--</body>--&gt;&lt;/body&gt; e antes disso copie e cole o seguinte código 

* Menu and Search */

.menu-wrapper{width:100%;max-width:1000px;margin:0 auto;padding:0;position:relative}

.sticky-menu{font-family: &#39;Open Sans&#39;, arial;background:#2d2d2d;width:auto;padding:0;margin:0;font-size:15px;font-weight:400}

.sticky-menu ul{margin:0 auto;padding:0;float:left}

.sticky-menu ul a {display:block;padding:0 15px;}

.sticky-menu ul li{position:relative;margin:0;}

.sticky-menu ul &gt; li {float:left;}

.sticky-menu ul &gt; li &gt; a {display:block;height:57px;line-height:56px;color:#fff;font-weight:bold;overflow:hidden;transition:all .35s ease;}

.sticky-menu ul &gt; li &gt; a.active {background:#e35959;color:#fff;}

.sticky-menu ul &gt; li:hover &gt; a,.sticky-menu ul li.homex {background:#e35959;color:#fff;}

.sticky-menu ul &gt; li:hover &gt; a.active {background:#e35959}

.sticky-menu ul li a img{vertical-align:middle!important;height:10px;width:14px}

.sticky-menu ul ul {display:none;list-style:none;position:absolute;top:100%;width:190px;z-index:9999;overflow:hidden}

.sticky-menu ul &gt; li:hover ul {display:block}

.sticky-menu ul ul &gt; li {clear:both;overflow:hidden;background:rgba(22,3,48,.6);height:42px;z-index:9999;width:190px;}

.sticky-menu ul ul &gt; li &gt; a {margin:0;color:#fff !important;padding:0 15px;text-align:left;height:42px;line-height:41px;width:190px;z-index:9999}

.sticky-menu ul ul &gt; li &gt; a:hover {color:#fff !important;background:#e35959}

/* Sticky menu */

.makesticking2{position:fixed!important;padding:0!important;top:0;max-width:100%;left:0;right:0;z-index:99999}

</style>

<script type='text/javascript'>

//<![CDATA[

var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){function makemeSticky2(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking2",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky2("floating");}

//]]>

</script>

Então você pode colocar o seguinte código em cabeçalho do template ou menu content-wrapper

<div class='menu-wrapper' id='floating'>

<nav class='sticky-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>

 <ul>

   <li class='homex'><a href='/' itemprop='url' title='home'><img alt='Home' expr:title='data:blog.title' height='12' src='http://2.bp.blogspot.com/-eXDzvmiaYcc/VktrFQnAsPI/AAAAAAAAGJQ/ECTgSNQKlzs/s1600/siminihome.png' width='14'/> Home</a></li>

   <li><a href='/search/label/Amazing' itemprop='url' title='Amazing'><span itemprop='name'>Amazing</span></a></li>

   <li><a href='/search/label/Black' itemprop='url' title='Black'><span itemprop='name'>Black</span></a></li>

   <li><a href='/search/label/Speed' itemprop='url' title='Speed'><span itemprop='name'>Speed</span></a></li>

   <li><a href='/search/label/Sport' itemprop='url' title='Sport'><span itemprop='name'>Sport</span></a></li>

   <li><a href='/search/label/Style' itemprop='url' title='Style'><span itemprop='name'>Style</span></a></li>

<li><a href='#' itemprop='url' title=''><span itemprop='name'>Other</span></a>

<ul>

<li><a href='/search/label/Red' itemprop='url' title='Red'><span itemprop='name'>Red Car</span></a></li>

<li><a href='/search/label/Modern' itemprop='url' title='Modern'><span itemprop='name'>Modern</span></a></li>

<li><a href='/search/label/ThankYou' itemprop='url' title='Thank You'><span itemprop='name'>Thank You</span></a></li>

</ul>

</li>

    </ul>

<form action='/search' id='search-wrapper' method='get'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search here...'/></td>

<td class='search-button'><input id='search-button' type='submit' value='Go'/></td></tr></tbody></table></form>

    <div class='clear'/>

</nav>

    <div class='clear'/>

</div>

Como criar a função pegajosa para fazer scroll do menu 

<div id=’floating’>
Aqui vai o código do menu existente entre as div  para chamar a função pegajosa
</div>


encontre o código </body> ou &lt;!--</body>--&gt;&lt;/body&gt;  e coloque o seguinte código antes disso:


<script type='text/javascript'>

//<![CDATA[

var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){function makemeSticky2(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking2",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky2("floating");}

//]]>

</script>

Salve e pronto.


Click to comment