How to add a search module as a menu item in Joomla? - html

Question

My simple setup:
<div id="menuwrap">
<div id="menu">
<jdoc:include type="modules" name="menu" styles="" />
</div>
</div>
And
ul.menu {
display: inline-block;
}
because i need it to be centered.
This is displayed as follows (imagine it is centered on the screen):
Menu_Item_1 | Menu_Item_1 | Menu_Item_3
I would like to add a search box (a standard Joomla search module) as a menu item. That is:
Menu_Item_1 | Menu_Item_1 | Menu_Item_3 | Search...
I've tried to put the search module into another div, inside #menuwrap and float #menu to the left and #search to the right.
Menu_Item_1 | Menu_Item_1 | Menu_Item_3 | Search...
This is OK until resizing:
Menu_Item_1 | Menu_Item_1 |
Menu_Item_3 |
Search...
The #search just gets pushed under the #menu (on the third line - this is because the display of the ul is inline-block). The goal is to remain on the same line as the menu (i.e., second line), as follows:
Menu_Item_1 | Menu_Item_1 |
Menu_Item_3 | Search...
Any suggestions? Thanks.

Answer 1

If I'm understanding you correctly - you want to embed the search module itself within a menu - rather than linking to it from a menu item.
I think there are a number of ways to do this:
The easiest way is to fake it. Put a background on the div that contains your module position - publish two modules to that position (the menu and the search module) use css to make sure they float alongside each other.
Alternatively if you really need to embed the form within the same module I'd suggest creating a 'custom module chrome' to add the html of the search form to the output of any module you publish within a position that uses your custom module chrome style
Here is an article covering the basics - probably for an older version of Joomla - but as far as I can tell the principle holds:
http://docs.joomla.org/Applying_custom_module_chrome

Answer 2

If your goal is to add the search module as a menu item, then you need to make of it a component using this extension:
http://extensions.joomla.org/extensions/core-enhancements/embed-a-include/3810
You just need to place the module in a custom (probably hidden or nonexistent in a template) position and then you create a menuitem that points to the m2c component and use that position there.