Search box in menu effect

*This technique is not accessible and should not be used

Step 1: Add a menu item, menu heading only called Search and with tooltip named Site Search and place it at the bottom of the Perimary Menu list.

Step 2: In Layout, add Search box widget

Step 3: Create EM widget and add the following script via edit:

 

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
jQuery(document).ready(function() {


// TOGGLES THE SEARCH BLOCK
    jQuery('#menu-bar ul.nice-menu li.last a[title="Site Search"]').click(function() {
        jQuery('.block-boxes-os_search_solr_search_box').toggleClass('show');
    });

});
</script>

 

Step 4: Add CSS:

.block-boxes-os_search_solr_search_box{

display:none;

}

 

#menu-bar ul.nice-menu li.last a[title="Site Search"] {
   padding: 21px 30px 16px;
   background: url(/profiles/openscholar/themes/custom/garyking/images/sprite.png?456) no-repeat 10px 14px #86a057;
   font-size: 0;
}

.block-boxes-os_search_solr_search_box.show {
   display: block;
   position: absolute;
   right: 0;
   top: 68px;
   z-index: 1;
   width: 349px;
   background-color: #333;
   padding: 15px;
}

 

 

See also: Search