10

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?

  • You can use two different menus + one search with some CSS tricks but if you want exactly the above structure, you may consider jQuery functions like append() or prepend() which won't work on javascript-disabled browsers. – Farahmand Sep 20 '14 at 10:46
  • I would rather not use jQuery to move elements around and use the technique I described in the question if there is no better way... – web-tiki Sep 20 '14 at 10:52
  • 1
    I suspect you're either going to have to use a mega menu extension, or a snippet type system that will load a module into the drop down by pulling it in with a snippet code. Nonumber Snippets combined with nonumber Modules Anywhere would probably work. The stock menu system just isn't built for this. I mean, I guess it's possible to just override the menu output, but the drawback is then that you have a fully custom menu instead of just using some off the shelf upgradable plugins. – Brian Peat Sep 20 '14 at 14:39
  • Pretty sure Brian's right. You either need to override the menu and rewrite it's functions, or you've got to utilize a third party. NoNumber would be your least bloated third party option. – Faye Sep 22 '14 at 16:31
  • How are you generating a link to the module right now? Do you have a working link to the menu? – David Fritsch Sep 23 '14 at 3:59
4
+50

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.

  • Thx for the answer. I tried using your technique with a module position I already had in my template (LOGO) but it didn't seem to work. Should I try creating a "CustomSearchBox" position in my template and use that one? – web-tiki Sep 23 '14 at 9:40
  • Yes you should create custom position "CustomSearchBox" and use it. Or you can change it in the above code here: $linktype == "CustomSearchBox" and here $position = 'CustomSearchBox'; – Dmitry Rekun Sep 23 '14 at 12:06
  • You don't actually have to create the position (in your index.php or template.xml files). Simply write CustomSearchBox in the module position field and press enter. – johanpw Sep 23 '14 at 12:30
  • Ok, I finaly had time to get through this, I had to tweak your code to make it work. 1/ For some reason it wasn't wotking because I was using and image in the menu item. 2/ I changed line 30 of your code to $document = JFactory::getDocument();. Now it works but I will have to find a way to add my image back again. – web-tiki Oct 28 '14 at 18:03
  • Tweaked some more : I based the if statement on the CSS menu item class rather than on the menu item title and added the $linktype in the echo function. The code is visible here : phpad.org/1645824385. Thanks for pointing me in the right direction this is something I was wanting to achieve for some time now it's awesome! :) – web-tiki Oct 28 '14 at 18:19
1

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]:

Searchfield in menu

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

Result

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.