Module as menu item

Question

I need to insert the search module as a menu item (default menu module).

I need this output :

<ul>
    <li>menu item</li>
    <li>menu item</li>
    <li>SEARCH MODULE</li>
    <li>menu item</li>
    ...
</ul>

My first thoughts would be to duplicate the default menu module twice :

1. One to display menu items before the search module without the closing </ul> tag
2. An other to display menu items after the search module without the opening <ul> tag

And insert the search module in between them. This doesn't seem to be the easiest and most maintainable way to achieve my aim as it requires :

• 3 module positions for the menu
• 2 diferent menus in the menu manager

I know I could use some of the mega menu modules to do this but I would like to avoid third party extensions and use custom code that I can control.

How can I add a module as a menu item in default menu?

Answer 1

Here's one alternative to load the search module in your menu. It requires a couple of simple steps:

1. Override your mod_menu module

• Create an override in your templates folder \templates\YOURTEMPLATE\html\mod_menu\default_url.php.
• Copy the following contents to the file:

default_url.php

 <?php
 /**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights   reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="' . $item->anchor_css . '" ' : '';
$title = $item->anchor_title ? 'title="' . $item->anchor_title . '" ' : '';

if ($item->menu_image)
    {
        $item->params->get('menu_text', 1) ?
        $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '"   /><span class="image-title">' . $item->title . '</span> ' :
        $linktype = '<img src="' . $item->menu_image . '" alt="' . $item->title . '"  />';
 }
 else
 {
    $linktype = $item->title;
 }
  
 $flink = $item->flink;
$flink = JFilterOutput::ampReplace(htmlspecialchars($flink));
if ($linktype == "CustomSearchBox"){
    $document   = &JFactory::getDocument();
    $renderer   = $document->loadRenderer('modules');
    $options    = array('style' => 'xhtml');
    $position   = 'CustomSearchBox';
    echo $renderer->render($position, $options, null);
}
else {

switch ($item->browserNav) :
    default:
    case 0:
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
        break;
    case 1:
        // _blank
?><a <?php echo $class; ?>href="<?php echo $flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
        break;
    case 2:
        // window.open
        $options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,'.$params->get('window_open');
            ?><a <?php echo $class; ?>href="<?php echo $flink; ?>" onclick="window.open(this.href,'targetWindow','<?php echo $options;?>');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
        break;
endswitch;
}

I have added an if-else statement starting at line #29, that checks if the menu item title is "CustomSearchBox". If that's the case, the module position "CustomSearchBox" is loaded. If not, the normal menu item is returned. You can change "CustomSearchBox" to anything you like, but if you do remember to use the same value in the following steps.

2. Create a new search module

Create the search module and set the parameters as needed (I suggest to hide module title).

Publish the module to the custom position "CustomSearchBox"

3. Create a new menu item

The menu item can be any type, I suggest "External URL", and the name MUST be "CustomSearchBox".

Save your menu item, and the entire menu item will be replaced with the search box!

Let me know if something is unclear.

Answer 2

Although you say you don't want to use third party extensions, I have a solution that uses RokCandy from RocketTheme. It's a small snippet component that makes it very easy to add the search field in the menu. Simply install the plugin, and create a new macro like this:

Macro

 [searchfield][/searchfield]

HTML

<form action="index.php" method="post" class="form-inline" _lpchecked="1">
 <input name="searchword" id="mod-search-searchword" maxlength="20" class="inputbox search-query" type="text" size="20" value="Search..." onblur="if (this.value=='') this.value='Search...';" onfocus="if (this.value=='Search...') this.value='';">       
 <input type="hidden" name="task" value="search">
 <input type="hidden" name="option" value="com_search">
 <input type="hidden" name="Itemid" value="101">

Save and close.

Now create a menu item for the search box (I suggest External URL as type, but any menu item type will do), and in the Title field, add [searchfield][/searchfield]:

RokCandy will replace the title with the code in the macro, and you'll get a search field in the menu: